最近在為聯想開發一個博客論壇類的小程序，剛剛開發做了幾個小功能記錄下來。本次記錄發布心願功能基本和我們發布朋友圈差不多。點擊加+ 。拍照或者從文件里選擇圖片上傳。
wxml里的代碼如下：
<view>
<view class='topWrap'>
<text class='Close'>X</text>
<text class='releaseBtn'>發布心願</text>
</view>
<view style='margin:20rpx 10rpx;'>
<!-- 判斷chooseImageUrl如果沒有就不加載本模塊，這是前面顯示上傳的圖片的模塊。 -->
<view wx:for="{{chooseImageUrl}}" wx:key="{{key}}" class='chooseImageWrap'>
<image class='chooseImage' src='{{item}}' ></image>
<text class='chooseImageClose' data-index="{{index}}" bindtap='Close'> X</text>
<!-- data-index="{{index}}"之定義屬性，后面刪除圖片的時候需要用到它 -->
</view>
<!-- 加號的框 chooseImageUrl.length當超過九張的時候就不在顯示 -->
<view wx:if='{{chooseImageUrl.length<9}}' class="ax" style="cursor: pointer;" bindtap='paizhao'>
<image class="img" src="../../images/DottedLine.png" ></image>
<view class='Plus'>+</view>
</view>
</view>
<input placeholder="心願標題" class='wishTitle'></input>
<textarea class='wishcontent' maxlength='-1' placeholder="心願內容"></textarea>
</view>
js 部分：
// 因為wx.chooseImage api只是簡單地拍照或者選擇圖片所以為了達到發布朋友全的效果需要在回調里進行操作
var imgArr = [];//這個數組用來臨時存儲圖片數據
Page({
data:{
latitude:'',
chooseImageUrl:[],//綁定到頁面的數據
imgCount: 0,//圖片的張數
},
paizhao:function(){
var that = this
var attach = []
//wx.chooseImage 不多介紹看文檔
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 9,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
var len = that.data.imgCount + tempFilePaths.length
//len 是此時已有的張數和本次上傳的張數的和，也就是本次操作完成頁面應該有的張數，因為用戶可能會多次選擇圖片，所以每一次的都要記錄下來。
if (len > 9) {
wx.showToast({
title: '最大數量為9',
icon: 'loading',
duration: 1000
})
//超過結束
return false
}
for (var i = 0; i < tempFilePaths.length;i++){
//將api 返回的圖片數組push進一開始的imgArr，一定要循環一個個添加，因為用戶上傳多張圖直接push就會多個路徑在imgArr的同一個元素里。報錯
imgArr.push(tempFilePaths[i]);
}
//將此時的圖片長度和存放路徑的數組加到要渲染的數據中
that.setData({
imgCount: len,
chooseImageUrl: imgArr
})
}
})
},
//點關閉按鍵
Close:function(e){
var mylen = this.data.chooseImageUrl.length;//當前渲染的數組長度
var myindex = e.currentTarget.dataset.index;//當前點擊的是第幾張圖片 data-index
imgArr.splice(myindex,1)//將這張圖充存放圖片的數組中刪除
this.setData({
imgCount: mylen - 1,//長度減一
chooseImageUrl: imgArr//將刪除圖片后的數組賦給要渲染的數組
})
}
})