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

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

前言：

1、本地图片导入

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

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

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

/**    * 获取移动端显示屏的宽和高,    * 参数：e,    * return viewSize (包含显示屏的宽和高)    */   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;   }   //导出接口--必须要写   module.exports = {    getViewWHInfo: getViewWHInfo   }

步骤二：编辑脚本文件

//index.js   //获取应用实例   //获取工具类的应用实例    var imageUtil = require('../../utils/util.js');    var app = getApp()   Page({    data:{     imageUrl:"../image/1.jpg",     viewHeigh:"",     viewWidth:""    },    onLoad: function () {    },    imageLoad:function(e){     var viewSize = imageUtil.getViewWHInfo(e);     //console.log(viewSize.heigh);     this.setData({      viewHeigh: viewSize.height,      viewWidth: viewSize.width     });         }   })

步骤三：编辑图片标签

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

最后效果图：

以上就是微信小程序如何处理本地图片按照屏幕尺寸的方法介绍的详细内容，更多内容请关注技术你好其它相关文章！