微信小程序本地圖片處理--按屏幕尺寸插入圖片
個人感覺微信小程序的IDE用起來有時候不太方便，可能是之前用慣了Eclipse的原因吧。微信小程序的開發(fā)工具不支持直接將文件拷貝到目錄下，所以首先要將圖片文件導(dǎo)入到本地目錄下，然后編寫工具類獲取屏幕的寬度和高度 ...
個人感覺微信小程序的IDE用起來有時候不太方便，可能是之前用慣了Eclipse的原因吧。微信小程序的開發(fā)工具不支持直接將文件拷貝到目錄下，所以首先要將圖片文件導(dǎo)入到本地目錄下，然后編寫工具類獲取屏幕的寬度和高度，具體步驟如下圖。
1、本地圖片導(dǎo)入
步驟一：選擇最左側(cè)的菜單中的項目
%7B(EC6V23L@B0]EX.png)
打開根目錄下的utils文件夾下的utils.js文件，個人感覺這個類似Java里面的工具類，具體代碼如下：
-
/** -
* 獲取移動端顯示屏的寬和高, -
* 參數(shù)：e, -
* return viewSize (包含顯示屏的寬和高) -
*/ -
function getViewWHInfo(e){ -
var viewSize={}; -
var originalWidth = e.detail.width;//圖片原始寬 -
var originalHeight = e.detail.height;//圖片原始高 -
wx.getSystemInfo({ -
success: function (res) { -
//讀取系統(tǒng)寬度和高度 -
var viewWidth = res.windowWidth; -
var viewHeight = res.windowHeight; -
console.log(originalWidth + " " + originalHeight); -
console.log("寬：" + viewWidth + "高" + viewHeight); -
viewSize.width = viewWidth; -
viewSize.height = viewHeight; -
} -
}); -
return viewSize; -
} -
//導(dǎo)出接口--必須要寫 -
module.exports = { -
getViewWHInfo: getViewWHInfo -
}
步驟二：編輯腳本文件
打開index文件夾下的index.js文件,將原有的內(nèi)容全部刪除，并將下列代碼直接復(fù)制，首先調(diào)用require函數(shù)將工具類進行實例化，其中data里面設(shè)置的是我們在index.wxml文件中需要讀取的變量，imageLoad函數(shù)將綁定圖片加載事件bindLoad, imageUtil.getViewWHInfo(e)該句調(diào)用了上面自定義的函數(shù)。
-
//index.js -
//獲取應(yīng)用實例 -
//獲取工具類的應(yīng)用實例 -
var imageUtil = require('../../utils/util.js'); -
var app = getApp() -
Page({ -
data:{ -
imageUrl:"../image/1.jpg", -
viewHeigh:"", -
viewWidth:"" -
}, -
onLoad: function () { -
}, -
imageLoad:function(e){ -
var viewSize = imageUtil.getViewWHInfo(e); -
//console.log(viewSize.heigh); -
this.setData({ -
viewHeigh: viewSize.height, -
viewWidth: viewSize.width -
}); -
} -
})
步驟三：編輯圖片標(biāo)簽
打開index文件夾下的index.wxml文件，刪除原有的全部內(nèi)容，將下面的圖片插入代碼直接復(fù)制粘貼，其中style表示的是標(biāo)簽的樣式，width:{{viewWidth}}表示圖片的寬度是取index.js文件中所賦的值，height和src同理，bindload事件表示該圖片加載的時候綁定了index.js文件imageLoad函數(shù)，并且在圖片加載時執(zhí)行該函數(shù)。
-
<image -
style="width: {{viewWidth}}px; height: {{viewHeigh}}px;" src="{{imageUrl}}" bindload="imageLoad"> -
</image>
