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


Posted in Javascript onAugust 04, 2017

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

前言:

个人感觉微信小程序的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>

最后效果图:

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

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

Javascript 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
vue-cli常用设置总结
Feb 24 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
js实现简单扫雷
Nov 27 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Javascript实现跨域后台设置拦截的方法详解
Aug 04 #Javascript
微信小程序 五星评分的实现实例
Aug 04 #Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 #Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 #Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 #Javascript
Angular实现响应式表单
Aug 04 #Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP 基本语法格式
2009/12/15 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
图解js图片轮播效果
2015/12/20 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
行政专员的岗位职责
2014/03/10 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
公司员工体检通知
2015/04/21 职场文书
开除通知书范本
2015/04/25 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
环境卫生整治简报
2015/07/20 职场文书
大学生受助感言
2015/08/01 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python