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

本是古典何须时尚 2022-06-11 09:27 215阅读 0赞

个人感觉[微信小程序][Link 1]的IDE用起来有时候不太方便，可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下，所以首先要将图片文件导入到本地目录下，然后编写工具类获取屏幕的宽度和高度，具体步骤如下图。

1、本地图片导入

步骤一：选择最左侧的菜单中的项目

步骤二：选择打开后将图片直接拷贝到新建的image文件夹下面

![Center][]

图片导入完成后，项目的整体目录结构如下图所示，

![Center 1][]

2、按屏幕尺寸自适应图片宽和高

步骤一：编写工具函数，返回封装后的屏幕高度和宽度

打开根目录下的utils文件夹下的utils.js文件，个人感觉这个类似Java里面的工具类，具体代码如下：

1.  `/**`
2.  `* 获取移动端显示屏的宽和高,`
3.  `* 参数：e,`
4.  `* return viewSize (包含显示屏的宽和高)`
5.  `*/`
6.  `function getViewWHInfo(e){`
7.  `var viewSize={};`
8.  `var originalWidth = e.detail.width;//图片原始宽`
9.  `var originalHeight = e.detail.height;//图片原始高`
10. `wx.getSystemInfo({`
11. `success: function (res) {`
12. `//读取系统宽度和高度`
13. `var viewWidth = res.windowWidth;`
14. `var viewHeight = res.windowHeight;`
15. `console.log(originalWidth + " " + originalHeight);`
16. `console.log("宽：" + viewWidth + "高" + viewHeight);`
17. `viewSize.width = viewWidth;`
18. `viewSize.height = viewHeight;`
19. `}`
20. `});`
21. `return viewSize;`
22. `}`
23. `//导出接口--必须要写`
24. `module.exports = {`
25. `getViewWHInfo: getViewWHInfo`
26. `}`

步骤二：编辑脚本文件

打开index文件夹下的index.js文件,将原有的内容全部删除，并将下列代码直接复制，首先调用require函数将工具类进行实例化，其中data里面设置的是我们在index.wxml文件中需要读取的变量，imageLoad函数将绑定图片加载事件bindLoad, imageUtil.getViewWHInfo(e)该句调用了上面自定义的函数。

1.  `//index.js`
2.  `//获取应用实例`
3.  `//获取工具类的应用实例`
4.  `var imageUtil = require('../../utils/util.js');`
5.  `var app = getApp()`
6.  `Page({`
7.  `data:{`
8.  `imageUrl:"../image/1.jpg",`
9.  `viewHeigh:"",`
10. `viewWidth:""`
11. `},`
12. `onLoad: function () {`
13. `},`
14. `imageLoad:function(e){`
15. `var viewSize = imageUtil.getViewWHInfo(e);`
16. `//console.log(viewSize.heigh);`
17. `this.setData({`
18. `viewHeigh: viewSize.height,`
19. `viewWidth: viewSize.width`
20. `});`
21. 
22. `}`
23. `})`

步骤三：编辑图片标签

打开index文件夹下的index.wxml文件，删除原有的全部内容，将下面的图片插入代码直接复制粘贴，其中style表示的是标签的样式，width:\{ \{viewWidth\}\}表示图片的宽度是取index.js文件中所赋的值，height和src同理，bindload事件表示该图片加载的时候绑定了index.js文件imageLoad函数，并且在图片加载时执行该函数。

1.  `<image`
2.  `style="width: { {viewWidth}}px; height: { {viewHeigh}}px;" src="{ {imageUrl}}" bindload="imageLoad">`
3.  `</image>`

[Link 1]: http://9.cn/
[Center]: /images/20220611/c4e699f50a5048948c496cadcac47ed1.png
[Center 1]: /images/20220611/3b67501ed6834d9ea1e072d94bcae4f4.png