微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
更新時(shí)間：2018年06月10日 10:09:18 作者：Alice茄子
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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)來(lái)就拍照倒計(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)文章
IE6-IE9使用JSON、table.innerHTML所引發(fā)的問題
這篇文章主要介紹了IE6-IE9使用JSON、table.innerHTML所引發(fā)的問題 ,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了詳解ES6中class的實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)JavaScript es6，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了JS模擬瀏覽器實(shí)現(xiàn)全局搜索功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
在開發(fā)中，數(shù)組的使用場(chǎng)景非常多，平日中也涉及到很多數(shù)組的api/相關(guān)操作，一直也沒有對(duì)這塊內(nèi)容進(jìn)行一塊整理總結(jié)，很多時(shí)候就算用過(guò)幾次這個(gè)api，在開發(fā)中也很容易忘記，還是要谷歌一下2018-06-06
小程序?qū)崿F(xiàn)左右來(lái)回滾動(dòng)字幕效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)左右來(lái)回滾動(dòng)字幕效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
微信小程序自定義頂部導(dǎo)航欄并適配不同機(jī)型實(shí)例詳解
這篇文章主要為大家介紹了微信小程序開發(fā)自定義頂部導(dǎo)航欄并適配不同機(jī)型的實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript_ibm
函數(shù)式編程語(yǔ)言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長(zhǎng)一段時(shí)間了，但是從歷史上看，它們沒有豐富的工具和庫(kù)可供使用。隨著 .NET 平臺(tái)上的 Haskell 的出現(xiàn)，函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語(yǔ)言，例如 C++ 和 JavaScript，引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下，JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程，就可以避免這些問題。此外，可以利用函數(shù)式編程風(fēng)格編寫更加優(yōu)美的回調(diào)。2008-05-05
JS localStorage存儲(chǔ)對(duì)象，sessionStorage存儲(chǔ)數(shù)組對(duì)象操作示例
這篇文章主要介紹了JS localStorage存儲(chǔ)對(duì)象，sessionStorage存儲(chǔ)數(shù)組對(duì)象操作,結(jié)合實(shí)例形式詳細(xì)分析了JS使用localStorage存儲(chǔ)對(duì)象以及sessionStorage存儲(chǔ)數(shù)組對(duì)象相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
微信開發(fā) JS-SDK 6.0.2 經(jīng)常遇到問題總結(jié)
本篇文章主要介紹了"微信微信JS-SDK 6.0.2 遇到問題 "，主要涉及到微信微信JS-SDK 6.0.2 填坑筆記 方面的內(nèi)容，對(duì)于微信微信JS-SDK 6.0.2 填坑筆記 感興趣的同學(xué)可以參考一下。2016-12-12
在table中插入多行的js代碼(與insertAdjacentHTML相似的功能)
在table中插入多行，能使用與insertAdjacentHTML相似的功能2010-06-06