微信小程序的运用_微信小程序完成倒计时调用相

日期:2021-01-08 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

微信小程序实现倒计时调用相机自动拍照功能       这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下

在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照。

一、首先是视图层index.wxml,视图层主要负责显示组件和图片。

 !--index.wxml-- 
 view 
 view 
 view 
 view wx:if="{{src}}" /view 
 !-- 如果存在已经拍好的照片就不再显示调用摄像头的组件-- 
 view wx:else 
 camera device-position="back" flash="off" binderror="error" /camera 
 !-- 调用摄像头的组件-- 
 /view 
 image wx:if="{{src}}" mode="widthFix" src="{{src}}" /image 
 !-- 显示拍好的照片-- 
 /view 
 /view 
 /view 

二、逻辑层index.js,调用倒计时函数并且调用摄像头拍照并保存图片。

//index.js
const app = getApp()
Page({
 data: {
 userInfo: {},
 counting: false//倒计时
 onLoad: function () {
 this.daojishi();//一进来就拍照倒计时
 this.ctx = wx.createCameraContext()//创建摄像头对象
 //倒计时
 daojishi: function () {
 var that = this;
 if (!that.data.counting) {
 //开始倒计时5秒
 countDown(that, 5);
//倒计时函数 在page外
function countDown(that, count) {
 if (count == 0) {
 //等于0时拍照 
 that.ctx.takePhoto({
 quality: 'high',
 success: (res) = {
 that.setData({
 src: res.tempImagePath
 wx.showToast({
 title: '拍照完成',
 that.setData({
 counting: false
 return;
 wx.showLoading({//加载时显示倒计时
 title: '拍照倒计时'+count+'秒',
 setTimeout(function () {
 wx.hideLoading()
 }, 1000)
 that.setData({
 counting: true,
 setTimeout(function () {
 count--;
 countDown(that, count);
 }, 1000);
}

主要实现就是这样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。