当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序 本地图片按照屏幕尺寸处理

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

前言：

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

1、本地图片导入

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


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

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

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

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

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

/** 
 * 获取移动端显示屏的宽和高, 
 * 参数：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文件夹下的index.js文件,将原有的内容全部删除，并将下列代码直接复制，首先调用require函数将工具类进行实例化，其中data里面设置的是我们在index.wxml文件中需要读取的变量，imageload函数将绑定图片加载事件bindload, imageutil.getviewwhinfo(e)该句调用了上面自定义的函数。

//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 
  }); 
   
 } 
})

步骤三：编辑图片标签

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

<image  
style="width: {{viewwidth}}px; height: {{viewheigh}}px;" src="{{imageurl}}" bindload="imageload"> 
</image>

最后效果图：

以上就是微信小程序 本地图片按照屏幕尺寸处理的实例详解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网