微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
本文實(shí)例為大家分享了微信小程序定時(shí)拍照的具體代碼,供大家參考,具體內(nèi)容如下
在某些進(jìn)行簽到的場(chǎng)景,為了防止用戶選擇相冊(cè)的照片或者不實(shí)時(shí)拍照,設(shè)置相機(jī)倒計(jì)時(shí)自動(dòng)拍照。
一、首先是視圖層index.wxml,視圖層主要負(fù)責(zé)顯示組件和圖片。
<!--index.wxml--> <view class="userinfo-login"> <view class="page-body"> <view class="page-body-wrapper"> <view wx:if="{{src}}"></view> <!-- 如果存在已經(jīng)拍好的照片就不再顯示調(diào)用攝像頭的組件--> <view wx:else> <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 200px;"></camera> <!-- 調(diào)用攝像頭的組件--> </view> <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image> <!-- 顯示拍好的照片--> </view> </view> </view>
二、邏輯層index.js,調(diào)用倒計(jì)時(shí)函數(shù)并且調(diào)用攝像頭拍照并保存圖片。
//index.js const app = getApp() Page({ data: { userInfo: {}, counting: false//倒計(jì)時(shí) }, onLoad: function () { this.daojishi();//一進(jìn)來就拍照倒計(jì)時(shí) this.ctx = wx.createCameraContext()//創(chuàng)建攝像頭對(duì)象 }, //倒計(jì)時(shí) daojishi: function () { var that = this; if (!that.data.counting) { //開始倒計(jì)時(shí)5秒 countDown(that, 5); } } }) //倒計(jì)時(shí)函數(shù) 在page外 function countDown(that, count) { if (count == 0) { //等于0時(shí)拍照 that.ctx.takePhoto({ quality: 'high', success: (res) => { that.setData({ src: res.tempImagePath }) wx.showToast({ title: '拍照完成', }) } }) that.setData({ counting: false }) return; } wx.showLoading({//加載時(shí)顯示倒計(jì)時(shí) title: '拍照倒計(jì)時(shí)'+count+'秒', }) setTimeout(function () { wx.hideLoading() }, 1000) that.setData({ counting: true, }) setTimeout(function () { count--; countDown(that, count); }, 1000); }
主要實(shí)現(xiàn)就是這樣。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)找質(zhì)數(shù)代碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)找質(zhì)數(shù)代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03JS彈出可拖拽可關(guān)閉的div層完整實(shí)例
這篇文章主要介紹了JS彈出可拖拽可關(guān)閉的div層完整實(shí)現(xiàn)方法,包括對(duì)div彈出層的樣式及功能的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02對(duì)layui中的onevent 和event的使用詳解
今天小編就為大家分享一篇對(duì)layui中的onevent 和event的使用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09layui框架table 數(shù)據(jù)表格的方法級(jí)渲染詳解
今天小編就為大家分享一篇layui框架table 數(shù)據(jù)表格的方法級(jí)渲染詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08深入理解JavaScript系列(29):設(shè)計(jì)模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列(29):設(shè)計(jì)模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對(duì)象,不僅允許你向方法添加行為,而且還可以將方法設(shè)置成原始對(duì)象調(diào)用(例如裝飾者的構(gòu)造函數(shù)),需要的朋友可以參考下2015-03-03基于JS+Canves實(shí)現(xiàn)點(diǎn)擊按鈕水波紋效果
本文給大家分享基于js和canves實(shí)現(xiàn)點(diǎn)擊按鈕水波紋效果,效果非常逼真,對(duì)此感興趣的朋友一起看看吧2016-09-09javascript游戲開發(fā)之《三國(guó)志曹操傳》零部件開發(fā)(二)人物行走的實(shí)現(xiàn)
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯?dòng)態(tài),今天我們來談?wù)勅绾问谷宋镆苿?dòng),感興趣的朋友可以了解下哦,順便鞏固一下animate方法的應(yīng)用,希望本文對(duì)你有所幫助2013-01-01