微信小程序本地图片处理--按屏幕尺寸插入图片
个人感觉微信小程序的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>
微信小程序本地图片处理--按屏幕尺寸插入图片相关推荐
- 微信小程序之一本地图片处理--按屏幕尺寸插入图片
个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的 ...
- 微信小程序根据wx.getSystemInfo获取屏幕尺寸,并动态改变元素宽高尺寸,示例
通过js获取屏幕尺寸,并改变元素尺寸 效果图 index.wxml <view class="body-view" style="width:{{wWidth}}r ...
- 微信小程序本地存储存储_如何利用本地存储构建快速的应用程序
微信小程序本地存储存储 by Nikita Kozlov 由Nikita Kozlov 如何利用本地存储构建快速的应用程序 (How to leverage Local Storage to buil ...
- 微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片 能做到这里 说明你已经可以发送普通文本了 如果没有的话可以看一下我的上一篇文章 有完整的讲解 效果图 语音聊天 发送图片 传送 → 发送图片 发送语音 ** ...
- 微信小程序—本地存储
微信小程序-本地存储 作者:邱名涛 撰写时间:2019 年10 月24日 技术要点:在没有服务器的情况下,将数据存储到本地-wx.setStorageSync --这次我要实现点击收藏按钮把对应的文章 ...
- 微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法 小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
- 微信小程序设置高度占满屏幕
因为有个页面需要改变背景颜色,所以要高度占满. 微信小程序设置高度占满屏幕: /*设置根节点,高度占满整个屏幕 */ page{height: 100%; } /*然后设置子节点高度100%*/ .c ...
- 微信小程序本地图片在开发工具显示手机预览不显示
微信小程序在设置背景图片时,使用本地路径,手机预览无法显示. 首先检查图片的路径,是否有中文,都没有问题的时候,看插入背景图片格式采用background-image: 即: <view cla ...
- 微信小程序本地图片安卓手机不显示而苹果手机显示问题
关于微信小程序不显示图片 通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问 本地图片:确定相对路径或者绝对路径正确 微信小程序图 ...
最新文章
- 运行ORB-SLAM笔记_编译篇(一)
- 影响线型缩聚物分子量的因素_【CRPS】通过硼烷引发剂实现氧气引发的超高分子量聚合物的可控合成...
- Canvas 渐变 图像组合效果 颜色翻转
- 【转】 java自定义注解
- mysql u0019_mysql服务无法启动
- 心疼还在用Facebook的你一秒,Snapchat才是未来
- 黑马程序员-JavaAPI-17天-4(Arrays)
- Selenium自动化程序被检测为爬虫,怎么屏蔽和绕过
- Java 文件操作#常用io流方法解读
- C语言程序设计课程学习总结与反思
- 二等水准数据平差_二等水准测量方法与步骤
- realme真我笔记本Air官宣发布时间 将于7月12日发布
- switch的优缺点
- 最小费用最大流之 zkw费用流与普通费用流
- Hadoop流程---从tpch到hive
- JEC-QA:A Legal-Domain Question Answering Dataset 论文阅读
- 大集中系统的个人所得税解决方案
- Ubuntu修改ssh登录欢迎信息
- vue项目部署服务器两个域名,Vue项目服务器部署之子目录部署方法_飛雲_前端开发者...
- 智能家居视觉信息安全
热门文章
- 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- FLV(ACC+H264)文件格式分析
- PLC通讯实现-C#实现西门子PLC串口通讯W95_S7(四)
- 数组统计问题(统计各学生的优秀率及格率)C语言
- MyBatisPlus 开启事务并交由 Springboot 管理
- 至高荣誉:WPS制作荣誉证书(转)
- 虚拟机终端输入sudo的密码时,无法输入密码
- [LOJ]#6515. 「雅礼集训 2018 Day10」贪玩蓝月
- TearDrop拒绝服务攻击
- js教程实践(JS基础)