微信小程序?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-03
JS彈出可拖拽可關(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-09
layui框架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-09
javascript游戲開發(fā)之《三國(guó)志曹操傳》零部件開發(fā)(二)人物行走的實(shí)現(xiàn)
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯?dòng)態(tài),今天我們來談?wù)勅绾问谷宋镆苿?dòng),感興趣的朋友可以了解下哦,順便鞏固一下animate方法的應(yīng)用,希望本文對(duì)你有所幫助2013-01-01

