微信小程序本地图片处理--按屏幕尺寸插入图片
来源:互联网 发布:怎么做淘宝生意好起来 编辑:程序博客网 时间:2024/05/18 02:37
个人感觉微信小程序的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>
阅读全文
0 0
- 微信小程序本地图片处理--按屏幕尺寸插入图片
- 微信小程序之一本地图片处理--按屏幕尺寸插入图片
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- MarkDown插入本地图片
- markdownPad2插入本地图片
- android 大尺寸图片处理
- 网络图片不能自适应屏幕尺寸
- 图片与屏幕尺寸不匹配
- POI插入图片的尺寸计算
- ABAP屏幕开发-屏幕插入图片
- markdown本地图片插入文本
- oa Markdown 插入本地图片
- 微信小程序中的图片处理
- 屏幕分辨率、屏幕尺寸以及屏幕适配和图片分辨率
- 微信小程序如何加载本地图片
- 医疗设备上会用到的小容量存储芯片
- selenium操作隐藏的元素
- NYOJ 2 括号配对问题
- 公众号,求关注
- effective c++ item2总结:以编译器替换预处理器
- 微信小程序本地图片处理--按屏幕尺寸插入图片
- rgb和raw rgb的区别
- Python:functools partial详解
- 编译好FFmpeg后如何使用
- Iaas、Paas、Saas之间的区别
- idea结合git使用
- Android开发常用的开源库
- OS中常用的调度算法总结
- selenium处理select标签的下拉框