Heim > WeChat-Applet > Mini-Programmentwicklung > Das WeChat-Applet implementiert einen Countdown, um die automatische Fotoaufnahmefunktion der Kamera aufzurufen

Das WeChat-Applet implementiert einen Countdown, um die automatische Fotoaufnahmefunktion der Kamera aufzurufen

不言
Freigeben: 2018-06-26 15:59:11
Original
4027 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das WeChat-Applet zur Implementierung der Countdown-Funktion zum automatischen Aufnehmen von Bildern vorgestellt. Es hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel sind Der spezifische Code zum regelmäßigen Aufnehmen von Fotos im WeChat-Applet dient als Referenz:

In einigen Check-in-Szenarien soll verhindert werden, dass Benutzer Fotos im Album auswählen Wenn Sie Fotos nicht in Echtzeit aufnehmen, ist der Countdown der Kamera so eingestellt, dass automatisch Fotos aufgenommen werden.

1. Die erste ist die Ansichtsebene index.wxml. Die Ansichtsebene ist hauptsächlich für die Anzeige von Komponenten und Bildern verantwortlich.

<!--index.wxml-->

 <view class="userinfo-login">
 <view class="page-body">
  <view class="page-body-wrapper">
  <view wx:if="{{src}}"></view> 
  <!-- 如果存在已经拍好的照片就不再显示调用摄像头的组件-->
  <view wx:else>
   <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 200px;"></camera>
  <!-- 调用摄像头的组件-->
</view>
  <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
  <!-- 显示拍好的照片-->
  </view>
 </view>
 </view>
Nach dem Login kopieren

2. Logikebene index.js, rufen Sie die Countdown-Funktion auf und rufen Sie die Kamera auf, um Bilder aufzunehmen und die Bilder zu speichern.

//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: &#39;high&#39;,
  success: (res) => {
  that.setData({
   src: res.tempImagePath
  })
  wx.showToast({
   title: &#39;拍照完成&#39;,
  })
  }
 })
 that.setData({
  counting: false
 })
 return;
 }
 wx.showLoading({//加载时显示倒计时
 title: &#39;拍照倒计时&#39;+count+&#39;秒&#39;,
 })

 setTimeout(function () {
 wx.hideLoading()
 }, 1000)
 that.setData({
 counting: true,
 })
 setTimeout(function () {
 count--;
 countDown(that, count);
 }, 1000);
}
Nach dem Login kopieren

Die Hauptimplementierung ist so.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Produktion des WeChat Mini-Programms, Filmrezension des Mini-Programms

Runde des WeChat Mini-Programms, Bild für Internetanfragen Übertragung

Die Wirkung des WeChat-Applets, das den Projekt-Countdown dynamisch anzeigt

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert einen Countdown, um die automatische Fotoaufnahmefunktion der Kamera aufzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage