Beispiel für die Bild-API des WeChat Mini-Programms, ausführliche Erläuterung

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erklärung der WeChat-Applet-Image-API-Instanz vorgestellt. Freunde in Not können darauf zurückgreifen.

Bei der Auswahl eines Bildes können Sie darauf zurückgreifen Legen Sie fest, ob das Bild die ursprüngliche Abbildung und Bildquelle ist. Dies ist auch durchaus üblich. Um beispielsweise einen Avatar im persönlichen Center festzulegen, können Sie ihn mit der wx.upLoadFile() API

Hauptmethode:

verwenden wx.chooseImage(object )

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)

Das ist Eine weitere seltsame API-Realität. Ich verstehe nicht, wie man das verwendet. Ich habe zuerst die offizielle Verwendung nachgeahmt, aber nachdem ich es herausgefunden hatte, fügte ich meine eigene Verwendung

wxml

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

<🎜 hinzu >

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')
        }
   })
 }


})

Vielen Dank für das Lesen dieses Artikels. Ich hoffe, er kann allen helfen, danke Ihnen für Ihre Unterstützung dieser Seite!

Ausführlichere Erläuterungen zu WeChat-Applet-Image-API-Beispielen und verwandten Artikeln finden Sie auf der chinesischen PHP-Website!