小程序点击图片放大实现方式：使用微信小程序图片预览接口。
今天用到了上传图片的功能，在真机上测试时发现有的图片实际没有显示，有个小小的坑，分享出来，希望大家可以避免。共勉！
wxml:
<button bindtap="addPic">添加图片</button> <view class="imgBox" wx:for="{{imgBox}}" wx:key="index"> <image src="{{item}}" data-src="{{item}}" mode="aspectFill" bindtap="previewImage"></image> </view>
wxss:
.imgBox{width:300rpx;height:300rpx; float: left; margin:0 20rpx;} .imgBox image { width:100%;height:100%;}
js:
Page({ data: { imgBox:[], }, addPic:function(){ var _this=this; var imgBox=[]; wx.chooseImage({ count: 4, // 默认9 sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; for (var i = 0; i < tempFilePaths.length;i++){ imgBox.push(tempFilePaths[i]); } _this.setData({ imgBox: _this.data.imgBox.concat(imgBox) }) } }) }, previewImage: function (e) { wx.previewImage({ current: e.currentTarget.dataset.src, // 当前显示图片的http链接 urls: this.data.imgBox // 需要预览的图片http链接列表 }) }, })
手动设置图片就不赘述了，就是设置imgBox，这里只用真机测试，取实际的图片。
在这里要注意，res.tempFilePaths实际返回的是一个数组，在选择多张图片时，数组的长度就是实际选择的照片张数，必须要进行循环，拿到全部的数据，页面图片才能正常全部显示。
