微信小程式 本地圖片按照螢幕尺寸處理，微信小程式螢幕尺寸

小程式 本地圖片按照螢幕尺寸處理，小程式螢幕尺寸

小程式 本地圖片按照螢幕尺寸處理

前言：

個人感覺小程式的IDE用起來有時候不太方便，可能是之前用慣了Eclipse的原因吧。小程式的開發工具不支援直接將檔案拷貝到目錄下，所以首先要將圖片檔案匯入到本地目錄下，然後編寫工具類擷取螢幕的寬度和高度，具體步驟如。

1、本地圖片匯入

步驟一：選擇最左側的菜單中的項目

步驟二：選擇開啟後將圖片直接拷貝到建立的image檔案夾下

圖片匯入完成後，項目的整體目錄結構如所示，

2、按螢幕尺寸自適應圖片寬和高

步驟一：編寫工具函數，返回封裝後的螢幕高度和寬度

開啟根目錄下的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> 

最後：

以上就是小程式 本地圖片按照螢幕尺寸處理的執行個體詳解，如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！