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


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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
深入理解javascript变量声明
Nov 20 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
jquery实现拖动效果
2016/08/10 Javascript
js实现下一页页码效果
2017/03/07 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
VsCode与Node.js知识点详解
2019/09/05 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python魔术方法详解
2015/02/14 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
高中毕业自我鉴定
2013/12/22 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
环保倡议书400字
2014/05/15 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers