先看下效果图吧，不得不说 微信小程序的设计真的很好！用户体验也很好~
image.png
image.png
拍照和上传照片 官网讲的很详细
image.png
具体用法也很简单 js 部分代码
selectBottom() {
const selectNum = this.data.selectImageList.length;
const num = 3 - selectNum;
num != 0 && wx.chooseImage({
count: num,
success: (res) => {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
let newList = this.data.selectImageList;
for (let i = 0; i < tempFilePaths.length; i++) {
newList.push(tempFilePaths[i]);
}
newList.length == 3 ? this.setData({
isShow: false
}) :null;
this.setData({
selectImageList: newList
}, () => {
console.log(this.data.selectImageList)
})
// console.log("tempFilePaths:"+JSON.stringify(tempFilePaths))
}
})
},
closeOption(e) {
const {
index
} = e.currentTarget.dataset;
let imagelist = this.data.selectImageList;
imagelist.splice(index, 1);
this.setData({
selectImageList: imagelist,
isShow:true
})
console.log(JSON.stringify(e))
},
vxml 相关代码
<view class='image-list-view'>
<view wx:if="{{isShow}}" class='line-x' bindtap='selectBottom' hover-class='white-active'>
<icon class='icontfont icon-img'></icon>
<text class="icontfont sml">上传凭证</text>
</view>
<block wx:for="{{selectImageList}}" wx:key="{{index}}" >
<view class='image-posit'>
<image src="{{item}}" class='image-list'/>
<icon class="icontfont i-smal icon-form-close" data-index="{{index}}" bindtap='closeOption'></icon>
</view>
</block>
</view>
预览的话也简单 看下官方介绍
image.png
previewImage(e) {
const { url, imagelist } = e.currentTarget.dataset;
wx.previewImage({
urls: imagelist, //预览的图片url数组
current: url, //当前的url
})
},
<image wx:for="{{item.imageList}}" wx:for-item="i" src="{{i}}" class="anser-iamge-items" bindtap='previewImage' data-url="{{i}}" data-imagelist="{{item.imageList}}"/>
image.png
微信小程序很好玩 ，体验性非常不错，开发难度也不大。爱上她了。
