![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiETPwJWZ3ZCMwcTP39zZuBnLENTJENTJ3pVdC5GTwUERPNTQq1UMJpnT0lFVPhXW61kMVRlT4FEVNdXRq5EeBpWT01EVPRTQq5UM4MUT4lFVNdXS6xkerR0T3lFVOZ3YyI2cKJDT0ljMZVXTzold41WW15UbMFTRE1UeNhlWuZ0ViBXO5xkNNh0YwIFSh9CXt92YuM3YltWas5iclN3Ztl2Lc9CX6MHc0RHaiojIsJye.png)
選擇圖檔時可設定圖檔是否是原圖,圖檔來源。這用的也挺常見的,比如個人中心中設定頭像,可以與wx.upLoadFile()API使用
主要方法:
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)
這又是一個奇葩API真實搞不懂怎麼用這個。先模仿下官方咋使用但是沒有效果,搞懂了在補充下自己的使用
wxml
<!--圖檔預覽-->
<button type="primary" bindtap="listenerButtonPreviewImage">展示圖檔</button>
js
var app = getApp()
Page({
data: {
banner:[\'../images/big.png\', \'../images/big.png\', \'../images/big.png\'],
modalHidden: true
},
tapMove:function(e){
this.setData({
num: e.detail.current+1
})
},
/**
* 預覽圖檔
*/
listenerButtonPreviewImage: function() {
wx.previewImage({
current: \'../images/big.png\',
//這根本就不走
success: function(res) {
console.log(res);
},
//也根本不走
fail: function() {
console.log(\'fail\')
},
complete:function(){
console.log(\'complete\')
}
})
},
onLoad: function () {
var that = this;
that.setData({
num:1,
count:that.data.banner.length
})
}
})
預覽圖檔圖檔中有一些問題,請高手多多指點點,