微信小程序本地图片按屏幕尺寸处理方法介绍

这篇文章主要介绍了微信小程序本地图片按屏幕尺寸处理方法介绍的相关资料,这里提供具体实现步骤，需要的朋友可以参考下

微信小程序 本地图片按照屏幕尺寸处理

前言：

个人感觉微信小程序的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函数，并且在图片加载时执行该函数。

最后效果图：

以上就是微信小程序本地图片按屏幕尺寸处理方法介绍的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。