Exemple d'API d'image de programme WeChat Mini Explication détaillée

Cet article présente principalement des informations pertinentes sur l'explication détaillée de l'instance de l'API Image de l'applet WeChat. Les amis dans le besoin peuvent s'y référer

Lors de la sélection d'une image, vous pouvez. définir si l'image est la figure originale, la source de l'image. Ceci est également assez courant. Par exemple, pour définir un avatar dans le centre personnel, vous pouvez l'utiliser avec l'API wx.upLoadFile()

Méthode principale :

wx.chooseImage(objet)

wxml

<!--监听按钮-->
<button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button>
<!--通过数据绑定的方式动态获取js数据-->
<image src="{{source}}" mode="aspecFill" style="width: 640rpx; height: 640rpx"/>

js

Page({
 data:{
  // text:"这是一个页面"
  source: ''
 },
 /**
  * 选择相册或者相机 配合上传图片接口用
  */
 listenerButtonChooseImage: function() {
   var that = this;
   wx.chooseImage({
     count: 1,
     //original原图，compressed压缩图
     sizeType: ['original'],
     //album来源相册 camera相机 
     sourceType: ['album', 'camera'],
     //成功时会回调
     success: function(res) {
       //重绘视图
       that.setData({
         source: res.tempFilePaths
       })
     }
   })
 },

wx.previewImage(object)

C'est une autre réalité étrange de l'API. Je ne comprends pas comment l'utiliser. J'ai d'abord imité l'utilisation officielle mais cela n'a eu aucun effet. Après l'avoir compris, j'ai ajouté ma propre utilisation

wxml

<!--图片预览-->
<button type="primary" bindtap="listenerButtonPreviewImage">展示图片</button>

js

Page({
 data:{
  // text:"这是一个页面"
  source: ''
 },

 /**
  * 预览图片 又一个奇葩接口
  */
 listenerButtonPreviewImage: function() {
   wx.previewImage({
     current: 'http://img.souutu.com/2016/0511/20160511055648316.jpg',
     urls: [
       'http://img.souutu.com/2016/0511/20160511055648316.jpg',
        'http://img.souutu.com/2016/0511/20160511055650751.jpg',
        'http://img.souutu.com/2016/0511/20160511054928658.jpg'
        ],
        //这根本就不走
        success: function(res) {
          console.log(res);
        },
        //也根本不走
        fail: function() {
          console.log('fail')
        }
   })
 }


})

Merci d'avoir lu cet article, j'espère qu'il pourra aider tout le monde, merci vous pour votre soutien à ce site !

Pour des explications plus détaillées sur les exemples d'API Image de l'applet WeChat et les articles connexes, veuillez prêter attention au site Web PHP chinois !