微信小程序 本地圖片按照屏幕尺寸處理
微信小程序 本地圖片按照屏幕尺寸處理
前言：
個人感覺微信小程序的IDE用起來有時候不太方便，可能是之前用慣了Eclipse的原因吧。微信小程序的開發(fā)工具不支持直接將文件拷貝到目錄下，所以首先要將圖片文件導(dǎo)入到本地目錄下，然后編寫工具類獲取屏幕的寬度和高度，具體步驟如下圖。
1、本地圖片導(dǎo)入
步驟一：選擇最左側(cè)的菜單中的項目
步驟二：選擇打開后將圖片直接拷貝到新建的image文件夾下
圖片導(dǎo)入完成后，項目的整體目錄結(jié)構(gòu)如下圖所示，
2、按屏幕尺寸自適應(yīng)圖片寬和高
步驟一：編寫工具函數(shù)，返回封裝后的屏幕高度和寬度
打開根目錄下的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>
最后效果圖：
以上就是微信小程序 本地圖片按照屏幕尺寸處理的實例詳解，如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
jQuery幻燈片插件owlcarousel參數(shù)說明中文文檔
jQuery幻燈片插件owlcarousel是一個小巧強大兼容性強的幻燈片插件，兼容IE6以上所有瀏覽器，本文主要介紹了字的使用方法與中文參數(shù)與API說明2018-02-02
這篇文章主要介紹了微信小程序 后臺登錄（非微信賬號）實例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了微信小程序 下拉菜單簡單實例的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Javascript閉包的使用場景， 由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁,下面一起進入文化在哪個了解文章內(nèi)容2021-11-11
這篇文章主要為大家介紹了前端JS實現(xiàn)太極圖案圖文示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 新建登錄頁并實現(xiàn)tabBar隱藏的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序中用WebStorm使用LESS的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了微信小程序與php 實現(xiàn)微信支付的簡單實例的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了可視化埋點元素圈選器實現(xiàn)源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了js作用域及作用域鏈工作引擎，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07