Maison > Applet WeChat > Développement de mini-programmes > Introduction à la sélection d'albums et à la prise de photos dans le mini-programme WeChat

Introduction à la sélection d'albums et à la prise de photos dans le mini-programme WeChat

不言
Libérer: 2018-06-26 17:27:47
original
6568 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur la sélection d'album et la prise de photos et un exemple de code de développement du mini programme WeChat. Les amis dans le besoin peuvent se référer à

Explication détaillée du mini programme WeChat sur la prise de photos et l'appareil photo. sélection

Avant-propos :

Il existe deux façons d'obtenir des photos dans le mini programme La première consiste à ouvrir directement votre propre style dans WeChat. Le cadre est L'appareil photo prend une photo, suivi de l'image. Le deuxième type est une boîte contextuelle invitant l'utilisateur à prendre une photo ou à la sélectionner dans l'album.

Pour sélectionner un album, utilisez la fonction wx.chooseImage(OBJECT) Les paramètres spécifiques sont les suivants :

Introduction à la sélection dalbums et à la prise de photos dans le mini-programme WeChat

<.>

Regardons directement le code pour ouvrir l'album de l'appareil photo :

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

 },




})
Copier après la connexion

L'effet de la première méthode est le suivant :


Introduction à la sélection dalbums et à la prise de photos dans le mini-programme WeChat

Personnellement je pense que la deuxième expérience utilisateur est meilleure, l'effet est le suivant :


Introduction à la sélection dalbums et à la prise de photos dans le mini-programme WeChat

Cliquez pour obtenir l'invite contextuelle, le code est le suivant :

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

 },

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


})
Copier après la connexion

Le chemin temporaire du fichier peut être utilisé normalement pendant le démarrage du mini programme. Si vous devez le sauvegarder de manière persistante, vous devez appeler activement wx.saveFile dans le mini programme. Il ne sera accessible que la prochaine fois que vous le démarrerez.

Fichier de mise en page :

<button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>
<image src="{{tempFilePaths }}" catchTap="chooseImageTap" mode="aspectFit" style="width: 100%; height: 450rpx" />
Copier après la connexion

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Mise en œuvre de la fonction de téléchargement de plusieurs images dans l'applet WeChat

L'applet WeChat implémente la couche cloud de la page de connexion flottante effet d'animation

À propos du code de téléchargement d'avatars dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal