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

微信小程序本地图片处理与屏幕尺寸适配攻略

在微信小程序开发中，处理本地图片并使其适应不同屏幕尺寸是一个常见的需求。下面，我将为你详细介绍实现这一功能的步骤。

一、本地图片导入

1. 在微信小程序开发工具中，选择项目菜单，并打开文件目录。

2. 将图片文件直接拷贝到新建的image文件夹下。

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

为了让图片在不同屏幕尺寸下都能正常显示，我们需要编写一些代码来实现屏幕宽高的获取和图片的适配。

1. 编写工具函数：

打开根目录下的utils文件夹下的utils.js文件，编写一个名为getViewWHInfo的函数，用于获取移动端显示屏的宽和高。具体代码如下：

```javascript

function getViewWHInfo(e) {

var viewSize = {};

var originalWidth = e.detail.width; // 图片原始宽

var originalHeight = e.detail.height; // 图片原始高

wx.getSystemInfo({

success: function(res) {

// 读取系统宽度和高度

var viewWidth = res.windowWidth;

var viewHeight = res.windowHeight;

console.log("原始宽高：" + originalWidth + " " + originalHeight);

console.log("屏幕宽高：" + viewWidth + " " + viewHeight);

viewSize.width = viewWidth;

viewSize.height = viewHeight;

return viewSize;

}

});

}

```

2. 导出接口：在utils.js文件的末尾，添加module.exports语句，将getViewWHInfo函数导出，以便在其他文件中使用。

3. 编辑脚本文件：打开index文件夹下的index.js文件，调用上面编写的工具函数。在data里面设置我们需要在index.wxml文件中读取的变量，然后在imageLoad函数中绑定图片加载事件，并调用imageUtil.getViewWHInfo(e)来获取屏幕宽度和高度。

微信小程序：本地图片按屏幕尺寸自适应的实例详解

在小程序开发中，我们经常面临一个问题：如何确保图片在不同屏幕尺寸的设备上都能完美展示？本文将带你了解微信小程序中如何处理本地图片，使其根据屏幕尺寸自适应。

一、引入应用实例与工具类

我们需要获取应用实例以及一个工具类应用实例。通过引入`util.js`文件中的`imageUtil`工具类，我们可以轻松获取图片的视图尺寸。通过`getApp()`方法获取应用实例。

二、页面数据初始化

在页面的`data`中，我们初始化图片的URL、视图高度和宽度。其中，`imageUrl`指定了图片的本地路径。

三、图片加载处理

我们定义一个`imageLoad`方法，当图片加载时，通过调用`imageUtil.getViewWHInfo(e)`获取图片的视图尺寸。该方法返回包含图片高度和宽度的对象，我们将这些值存储到页面的数据中。

四、编辑图片标签

```html

style="width: {{viewWidth}}px; height: {{viewHeigh}}px;"

src="{{imageUrl}}"

bindload="imageLoad">

```

这里的`style`属性定义了图片的宽度和高度，其值取自`index.js`文件中赋的值。通过`src`属性指定图片源。`bindload`事件表示图片加载时绑定`imageLoad`方法，以确保在图片加载时执行相应的操作。

五、效果展示

通过以上步骤，我们就完成了微信小程序中本地图片按屏幕尺寸处理的实例。当在不同屏幕尺寸的设备上加载该小程序时，图片将自动适应屏幕大小，保证良好的展示效果。

如有疑问，请留言或到社区交流讨论。感谢阅读，希望能对大家有所帮助，感谢支持！

通过`cambrian.render('body')`渲染页面内容，展示给用户。这样，用户就可以在小程序上看到我们处理过的本地图片了。