微信小程序本地圖片處理--按屏幕尺寸插入圖片

我的感受微信小程序的IDE用起來有時候不太方便，多是以前用慣了Eclipse的緣由吧。微信小程序的開發工具不支持直接將文件拷貝到目錄下，因此首先要將圖片文件導入到本地目錄下，而後編寫工具類獲取屏幕的寬度和高度，具體步驟以下圖。 一、本地圖片導入 步驟一：選擇最左側的菜單中的項目 步驟二：選擇打開後將圖片直接拷貝到新建的image文件夾下面 圖片導入完成後，項目的總體目錄結構以下圖所示， 二、按屏幕尺寸自適應圖片寬和高 步驟一：編寫工具函數，返回封裝後的屏幕高度和寬度 打開根目錄下的utils文件夾下的utils.js文件，我的感受這個相似Java裏面的工具類，具體代碼以下：   /** * 獲取移動端顯示屏的寬和高, * 參數：e, * return viewSize (包含顯示屏的寬和高) */ function getViewWHInfo(e){ var viewSize={}; var originalWidth = e.detail.width;//圖片原始寬 var originalHeight = e.detail.height;//圖片原始高 wx.getSystemInfo({ success: function (res) { //讀取系統寬度和高度 var viewWidth = res.windowWidth; var viewHeight = res.windowHeight; console.log(originalWidth + " " + originalHeight); console.log("寬：" + viewWidth + "高" + viewHeight); viewSize.width = viewWidth; viewSize.height = viewHeight; } }); return viewSize; } //導出接口--必需要寫 module.exports = { getViewWHInfo: getViewWHInfo } 步驟二：編輯腳本文件 打開index文件夾下的index.js文件,將原有的內容所有刪除，並將下列代碼直接複製，首先調用require函數將工具類進行實例化，其中data裏面設置的是咱們在index.wxml文件中須要讀取的變量，imageLoad函數將綁定圖片加載事件bindLoad, imageUtil.getViewWHInfo(e)該句調用了上面自定義的函數。   //index.js //獲取應用實例 //獲取工具類的應用實例 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 });   } }) 步驟三：編輯圖片標籤 打開index文件夾下的index.wxml文件，刪除原有的所有內容，將下面的圖片插入代碼直接複製粘貼，其中style表示的是標籤的樣式，width:{{viewWidth}}表示圖片的寬度是取index.js文件中所賦的值，height和src同理，bindload事件表示該圖片加載的時候綁定了index.js文件imageLoad函數，而且在圖片加載時執行該函數。   <image style="width: {{viewWidth}}px; height: {{viewHeigh}}px;" src="{{imageUrl}}" bindload="imageLoad"> </image>