您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序怎樣處理本地圖片按照屏幕尺寸,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
微信小程序 本地圖片按照屏幕尺寸處理
前言:
個(gè)人感覺(jué)微信小程序的IDE用起來(lái)有時(shí)候不太方便,可能是之前用慣了Eclipse的原因吧。微信小程序的開(kāi)發(fā)工具不支持直接將文件拷貝到目錄下,所以首先要將圖片文件導(dǎo)入到本地目錄下,然后編寫工具類獲取屏幕的寬度和高度,具體步驟如下圖。
1、本地圖片導(dǎo)入
步驟一:選擇最左側(cè)的菜單中的項(xiàng)目
步驟二:選擇打開(kāi)后將圖片直接拷貝到新建的image文件夾下
圖片導(dǎo)入完成后,項(xiàng)目的整體目錄結(jié)構(gòu)如下圖所示,
2、按屏幕尺寸自適應(yīng)圖片寬和高
步驟一:編寫工具函數(shù),返回封裝后的屏幕高度和寬度
打開(kāi)根目錄下的utils文件夾下的utils.js文件,個(gè)人感覺(jué)這個(gè)類似Java里面的工具類,具體代碼如下:
/** * 獲取移動(dòng)端顯示屏的寬和高, * 參數(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 }
步驟二:編輯腳本文件
打開(kāi)index文件夾下的index.js文件,將原有的內(nèi)容全部刪除,并將下列代碼直接復(fù)制,首先調(diào)用require函數(shù)將工具類進(jìn)行實(shí)例化,其中data里面設(shè)置的是我們?cè)趇ndex.wxml文件中需要讀取的變量,imageLoad函數(shù)將綁定圖片加載事件bindLoad, imageUtil.getViewWHInfo(e)該句調(diào)用了上面自定義的函數(shù)。
//index.js //獲取應(yīng)用實(shí)例 //獲取工具類的應(yīng)用實(shí)例 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)簽
打開(kāi)index文件夾下的index.wxml文件,刪除原有的全部?jī)?nèi)容,將下面的圖片插入代碼直接復(fù)制粘貼,其中style表示的是標(biāo)簽的樣式,width:{{viewWidth}}表示圖片的寬度是取index.js文件中所賦的值,height和src同理,bindload事件表示該圖片加載的時(shí)候綁定了index.js文件imageLoad函數(shù),并且在圖片加載時(shí)執(zhí)行該函數(shù)。
<image style="width: {{viewWidth}}px; height: {{viewHeigh}}px;" src="{{imageUrl}}" bindload="imageLoad"> </image>
最后效果圖:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享微信小程序怎樣處理本地圖片按照屏幕尺寸內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。