這篇文章主要介紹了微信小程序怎樣處理本地圖片按照屏幕尺寸，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)豐南,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

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

前言：

個(gè)人感覺微信小程序的IDE用起來有時(shí)候不太方便，可能是之前用慣了Eclipse的原因吧。微信小程序的開發(fā)工具不支持直接將文件拷貝到目錄下，所以首先要將圖片文件導(dǎo)入到本地目錄下，然后編寫工具類獲取屏幕的寬度和高度，具體步驟如下圖。

1、本地圖片導(dǎo)入

步驟一：選擇最左側(cè)的菜單中的項(xiàng)目

步驟二：選擇打開后將圖片直接拷貝到新建的image文件夾下

圖片導(dǎo)入完成后，項(xiàng)目的整體目錄結(jié)構(gòu)如下圖所示，

2、按屏幕尺寸自適應(yīng)圖片寬和高

步驟一：編寫工具函數(shù)，返回封裝后的屏幕高度和寬度

打開根目錄下的utils文件夾下的utils.js文件，個(gè)人感覺這個(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 
}

步驟二：編輯腳本文件

打開index文件夾下的index.js文件,將原有的內(nèi)容全部刪除，并將下列代碼直接復(fù)制，首先調(diào)用require函數(shù)將工具類進(jìn)行實(shí)例化，其中data里面設(shè)置的是我們在index.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)簽

打開index文件夾下的index.wxml文件，刪除原有的全部內(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)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

本文題目：微信小程序怎樣處理本地圖片按照屏幕尺寸
文章地址：http://vcdvsql.cn/article12/jhgggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、云服務(wù)器、外貿(mào)建站、搜索引擎優(yōu)化、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)