微信小程序 本地圖片按照屏幕尺寸處理
微信小程序 本地圖片按照屏幕尺寸處理
前言：
個(gè)人感覺(jué)微信小程序的IDE用起來(lái)有時(shí)候不太方便，可能是之前用慣了Eclipse的原因吧。微信小程序的開(kāi)發(fā)工具不支持直接將文件拷貝到目錄下，所以首先要將圖片文件導(dǎo)入到本地目錄下，然后編寫(xiě)工具類獲取屏幕的寬度和高度，具體步驟如下圖。
1、本地圖片導(dǎo)入
步驟一：選擇最左側(cè)的菜單中的項(xiàng)目
步驟二：選擇打開(kāi)后將圖片直接拷貝到新建的image文件夾下
圖片導(dǎo)入完成后，項(xiàng)目的整體目錄結(jié)構(gòu)如下圖所示，
2、按屏幕尺寸自適應(yīng)圖片寬和高
步驟一：編寫(xiě)工具函數(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)出接口--必須要寫(xiě)
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>
最后效果圖：
以上就是微信小程序 本地圖片按照屏幕尺寸處理的實(shí)例詳解，如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- 微信小程序 地圖定位簡(jiǎn)單實(shí)例
- 微信小程序 地圖（map）實(shí)例詳解
- 微信小程序 使用騰訊地圖SDK詳解及實(shí)現(xiàn)步驟
- 微信小程序 高德地圖SDK詳解及簡(jiǎn)單實(shí)例（源碼下載）
- 微信小程序 地圖map詳解及簡(jiǎn)單實(shí)例
- 微信小程序中進(jìn)行地圖導(dǎo)航功能的實(shí)現(xiàn)方法
- 微信小程序開(kāi)發(fā)之map地圖實(shí)現(xiàn)教程
- 微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
- 微信小程序之獲取當(dāng)前位置經(jīng)緯度以及地圖顯示詳解
- 一次微信小程序內(nèi)地圖的使用實(shí)戰(zhàn)記錄
相關(guān)文章
JavaScript的function函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript的function函數(shù)詳細(xì),而我們的JavaScript腳本語(yǔ)言比較特殊,相對(duì)于C語(yǔ)言,它的參數(shù)是不需要數(shù)據(jù)類型加持的。返回值return,我就不過(guò)多描述，他是和 C語(yǔ)言通的，如果沒(méi)寫(xiě)他就會(huì)自動(dòng)返回undefined,下面一起來(lái)看看文章內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了WebWorker 封裝 JavaScript 沙箱，在前文 quickjs 封裝 JavaScript 沙箱詳情 已經(jīng)基于 quickjs 實(shí)現(xiàn)了一個(gè)沙箱，今天這篇文章再基于 web worker 實(shí)現(xiàn)備用方案,需要的朋友可以參考一下2021-10-10
微信小程序網(wǎng)絡(luò)請(qǐng)求wx.request詳解及實(shí)例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求wx.request詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序navigator組件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序scroll-view組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
使用HTTP?Referer實(shí)現(xiàn)圖片防盜圖文示例詳解
這篇文章主要為大家介紹了使用HTTP?Referer實(shí)現(xiàn)圖片防盜圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在計(jì)算機(jī)安全中,沙箱（Sandbox）是一種用于隔離正在運(yùn)行程序的安全機(jī)制,通常用于執(zhí)行未經(jīng)測(cè)試或不受信任的程序或代碼,它會(huì) 為待執(zhí)行的程序創(chuàng)建一個(gè)獨(dú)立的執(zhí)行環(huán)境,內(nèi)部程序的執(zhí)行不會(huì)影響到外部程序的運(yùn)行,下文我們來(lái)介紹一個(gè)“瀏覽器世界”的沙箱2021-10-10
這篇文章主要介紹了微信小程序的生命周期的詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 location API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
超越Node.js的JavaScript運(yùn)行環(huán)境Bun.js功能特性詳解
這篇文章主要為大家介紹了超越Node.js的JavaScript運(yùn)行環(huán)境Bun.js功能特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09