今天嘗試了微信小程序的圖片功能,選擇圖片和預覽圖片,開發工具是最新版哈。
具體以下:
wxml文件:小程序
<view class='loadpic' bindtap='chooseImage'>選擇圖片</view> <view class='showPic'> <view wx:for="{{imagesList}}" wx:for-item="image" wx:key="index" class="previewimg"> <image class='image' src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image> </view> </view>
js文件:微信小程序
data: { imagesList: [] }, chooseImage: function () { var that = this wx.chooseImage({ count: 9, // 默認9 sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖,默認兩者都有 sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機,默認兩者都有 success: function (res) { console.log(res) // 返回選定照片的本地文件路徑列表,tempFilePath能夠做爲img標籤的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths that.setData({ imagesList: tempFilePaths }) console.log(tempFilePaths) } }) }, previewImage: function (e) { var current = e.target.dataset.src; wx.previewImage({ current: current, // 當前顯示圖片的http連接 urls: this.data.imagesList // 須要預覽的圖片http連接列表 }) },
wxss文件:微信
.loadpic{ margin: 20px auto; width: 500rpx; height: 80rpx; background: #d34c17; text-align: center; color: white; line-height: 80rpx; } .previewimg{ padding: 10rpx; float: left; } .image{ display: block; width: 200rpx; height: 200rpx; } .showPic{ margin: 0 auto; width: 90%; } 不管本地仍是真機測試均可以哈!!!開始在網上找資料,找了好多都不成功,最後本身慢慢調試成功了!!!哭一個!!