Einführung in die Albumauswahl und das Fotografieren im WeChat-Miniprogramm

不言
Freigeben: 2018-06-26 17:27:47
Original
6543 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die relevanten Informationen zur Albumauswahl und zum Aufnehmen von Fotos sowie ein Beispielcode für die Entwicklung des WeChat-Miniprogramms vorgestellt. Freunde in Not können sich auf

detaillierte Erklärung des WeChat-Miniprogramms zum Aufnehmen von Fotos und zur Kamera beziehen Auswahl

Vorwort:

Es gibt zwei Möglichkeiten, Bilder im Miniprogramm zu erhalten. Die erste besteht darin, Ihren eigenen Stil direkt in WeChat zu öffnen Das Bild wird von der Kamera aufgenommen, gefolgt von einem Popup-Fenster, in dem der Benutzer gefragt wird, ob er ein Bild aufnehmen oder aus dem Album auswählen möchte.

Um ein Album auszuwählen, verwenden Sie die Funktion wx.chooseImage(OBJECT). Die spezifischen Parameter lauten wie folgt:

Einführung in die Albumauswahl und das Fotografieren im WeChat-Miniprogramm


Schauen wir uns direkt den Code zum Öffnen des Kameraalbums an:

Page({
 data: {
  tempFilePaths: ''
 },
 onLoad: function () {
 },
 chooseimage: function () {
  var that = this;
  wx.chooseImage({
   count: 1, // 默认9 
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
   success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 
    that.setData({
     tempFilePaths: res.tempFilePaths
    })
   }
  })

 },




})
Nach dem Login kopieren

Der Effekt von Methode eins ist wie folgt:

Einführung in die Albumauswahl und das Fotografieren im WeChat-Miniprogramm

Ich persönlich denke, dass die zweite Benutzererfahrung besser ist, der Effekt ist wie folgt:

Einführung in die Albumauswahl und das Fotografieren im WeChat-Miniprogramm

Klicken Sie, um die Popup-Eingabeaufforderung zu erhalten. Der Code lautet wie folgt:

Page({
 data: {
  tempFilePaths: ''
 },
 onLoad: function () {
 },
 chooseimage: function () {
  var that = this;
  wx.showActionSheet({
   itemList: ['从相册中选择', '拍照'],
   itemColor: "#CED63A",
   success: function (res) {
    if (!res.cancel) {
     if (res.tapIndex == 0) {
      that.chooseWxImage('album')
     } else if (res.tapIndex == 1) {
      that.chooseWxImage('camera')
     }
    }
   }
  })

 },

 chooseWxImage: function (type) {
  var that = this;
  wx.chooseImage({
   sizeType: ['original', 'compressed'],
   sourceType: [type],
   success: function (res) {
    console.log(res);
    that.setData({
     tempFilePaths: res.tempFilePaths[0],
    })
   }
  })
 }


})
Nach dem Login kopieren

Der temporäre Pfad der Datei kann während des aktuellen Starts von normal verwendet werden Wenn Sie das Miniprogramm dauerhaft speichern müssen, müssen Sie wx.saveFile aktiv aufrufen, wenn das Miniprogramm das nächste Mal aufgerufen werden kann.

Layout-Datei:

<button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>
<image src="{{tempFilePaths }}" catchTap="chooseImageTap" mode="aspectFit" style="width: 100%; height: 450rpx" />
Nach dem Login kopieren

Offizielle Dokumentation: https://mp.weixin.qq.com/debug/wxadoc/dev/api /media-picture.html

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:

Implementierung der Funktion zum Hochladen mehrerer Bilder im WeChat-Applet

Das WeChat-Applet implementiert die schwebende Cloud-Ebene der Anmeldeseite Animationseffekt

Über den Code zum Hochladen von Avataren im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonEinführung in die Albumauswahl und das Fotografieren im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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