时间:2021-05-18
微信小程序 本地图片按照屏幕尺寸处理
前言:
个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图。
1、本地图片导入
步骤一:选择最左侧的菜单中的项目
步骤二:选择打开后将图片直接拷贝到新建的image文件夹下
图片导入完成后,项目的整体目录结构如下图所示,
2、按屏幕尺寸自适应图片宽和高
步骤一:编写工具函数,返回封装后的屏幕高度和宽度
打开根目录下的utils文件夹下的utils.js文件,个人感觉这个类似Java里面的工具类,具体代码如下:
步骤二:编辑脚本文件
打开index文件夹下的index.js文件,将原有的内容全部删除,并将下列代码直接复制,首先调用require函数将工具类进行实例化,其中data里面设置的是我们在index.wxml文件中需要读取的变量,imageLoad函数将绑定图片加载事件bindLoad, imageUtil.getViewWHInfo(e)该句调用了上面自定义的函数。
步骤三:编辑图片标签
打开index文件夹下的index.wxml文件,删除原有的全部内容,将下面的图片插入代码直接复制粘贴,其中style表示的是标签的样式,width:{{viewWidth}}表示图片的宽度是取index.js文件中所赋的值,height和src同理,bindload事件表示该图片加载的时候绑定了index.js文件imageLoad函数,并且在图片加载时执行该函数。
最后效果图:
以上就是微信小程序 本地图片按照屏幕尺寸处理的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序实现图片轮播及文件上传刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传。图片轮播:index.jsvarapp=getApp(
在微信小程序中,要显示一张图片,有两种图片加载方式:加载本地图片加载网络图片加载本地图片src="/image/arrowright.png"这句就是加载本地图
微信小程序最近火了,大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢,面对不同的手机屏幕,微信rpx单位是微信小程序中css的尺寸单位,rpx可
微信小程序实战项目:简易新闻制作先看下效果:实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的个人开发者,无法认证;toolbar四个现象:新闻,笑
本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下效果图原理使用wx.chooseImage选择本地图片;使用wx.previewIma