介绍
这篇文章主要介绍了微信小程序怎样处理本地图片按照屏幕尺寸,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
<强>微信小程序本地图片按照屏幕尺寸处理
<强>前言:
个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图。
<强> 1,本地图片导入
步骤一:选择最左侧的菜单中的项目
<强> 2,按屏幕尺寸自适应图片宽和高
步骤一:编写工具函数,返回封装后的屏幕高度和宽度
打开根目录下的跑龙套文件夹下的跑龙套。js文件,个人感觉这个类似Java里面的工具类,具体代码如下:
/* *,
,*获取移动端显示屏的宽和高,,
*大敌;参数:e,,
,* return viewSize (包含显示屏的宽和高),
,*/function getViewWHInfo (e) {,
var 才能;viewSize={},,
var 才能;originalWidth =, e.detail.width;//图片原始宽,,
var 才能;originalHeight =, e.detail.height;//图片原始高,,
,wx.getSystemInfo({大敌;
,,,成功:function (res), {,,
,,,//读取系统宽度和高度,
,,,var viewWidth =, res.windowWidth;,
,,,var viewHeight =, res.windowHeight;,,
,,,console.log(时间+ originalWidth “,“, +, originalHeight),,
,,,console.log(“宽:“,+,viewWidth +,“高“,+,viewHeight),,
,,,viewSize.width =, viewWidth;,
,,,viewSize.height =, viewHeight;,
,,},
,,});
viewSize; return 才能;
},//导出接口,必须要写,=,{module.exports
,getViewWHInfo: getViewWHInfo
} <>强步骤二:编辑脚本文件
打开索引文件夹下的index.js文件,将原有的内容全部删除,并将下列代码直接复制,首先调用要求函数将工具类进行实例化,其中数据里面设置的是我们在索引。wxml文件中需要读取的变量,imageLoad函数将绑定图片加载事件bindLoad, imageUtil.getViewWHInfo (e)该句调用了上面自定义的函数。
//index.js //获取应用实例,//获取工具类的应用实例,,
var imageUtil =,要求(& # 39;. ./. ./跑龙套util.js& # 39;);,,
var app =, getApp (),
页面({,
数据:{大敌;
imageUrl才能:“. ./图像/1. jpg",,
viewHeigh才能:““,,
viewWidth才能:““,
},大敌;
,onLoad: function (), {,
},大敌;
imageLoad:函数(e){大敌;;
var 才能;viewSize =, imageUtil.getViewWHInfo (e),,//console.log才能(viewSize.heigh);,
,this.setData({大敌;
,,,viewHeigh: viewSize.height,,
,,,viewWidth: viewSize.width
,,});
,,
}大敌;
}) <>强步骤三:编辑图片标签
打开索引文件夹下的index.wxml文件,删除原有的全部内容,将下面的图片插入代码直接复制粘贴,其中样式表示的是标签的样式,宽度:{{viewWidth}}表示图片的宽度是取index.js文件中所赋的值,高度和src同理,bindload事件表示该图片加载的时候绑定了索引。js文件imageLoad函数,并且在图片加载时执行该函数。
& lt; image ,
风格=翱矶?{{viewWidth}} px;,高度:,{{viewHeigh}} px;“, src=https://www.yisu.com/zixun/" {{imageUrl}} " bindload=" imageLoad ">
最后效果图:
感谢你能够认真阅读完这篇文章,希望小编分享微信小程序怎样处理本地图片按照屏幕尺寸内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
