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


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 相关文章推荐
裁剪字符串trim()自定义改进版
Apr 10 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
js格式化时间小结
Nov 03 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
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
php 生成饼图 三维饼图
2009/09/28 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
简单的js计算器实现
2016/10/26 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
python动态监控日志内容的示例
2014/02/16 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python 制作磁力搜索工具
2021/03/04 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
餐饮业员工工作决心书
2014/03/11 职场文书
爱心捐款倡议书
2014/04/14 职场文书
家长通知书教师评语
2014/04/17 职场文书
党校学习心得体会范文
2014/09/09 职场文书
简单租房协议书
2014/10/21 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
中班下学期个人总结
2015/02/12 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
高二数学教学反思
2016/02/18 职场文书