用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2017-8-4 00:21

个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度 ...

 个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图。

1、本地图片导入

步骤一:选择最左侧的菜单中的项目

步骤二:选择打开后将图片直接拷贝到新建的image文件夹下面
图片导入完成后,项目的整体目录结构如下图所示,

2、按屏幕尺寸自适应图片宽和高
步骤一:编写工具函数,返回封装后的屏幕高度和宽度

打开根目录下的utils文件夹下的utils.js文件,个人感觉这个类似Java里面的工具类,具体代码如下:

  1. /**
  2. * 获取移动端显示屏的宽和高,
  3. * 参数:e,
  4. * return viewSize (包含显示屏的宽和高)
  5. */
  6. function getViewWHInfo(e){
  7. var viewSize={};
  8. var originalWidth = e.detail.width;//图片原始宽
  9. var originalHeight = e.detail.height;//图片原始高
  10. wx.getSystemInfo({
  11. success: function (res) {
  12. //读取系统宽度和高度
  13. var viewWidth = res.windowWidth;
  14. var viewHeight = res.windowHeight;
  15. console.log(originalWidth + " " + originalHeight);
  16. console.log("宽:" + viewWidth + "高" + viewHeight);
  17. viewSize.width = viewWidth;
  18. viewSize.height = viewHeight;
  19. }
  20. });
  21. return viewSize;
  22. }
  23. //导出接口--必须要写
  24. module.exports = {
  25. getViewWHInfo: getViewWHInfo
  26. }

步骤二:编辑脚本文件

打开index文件夹下的index.js文件,将原有的内容全部删除,并将下列代码直接复制,首先调用require函数将工具类进行实例化,其中data里面设置的是我们在index.wxml文件中需要读取的变量,imageLoad函数将绑定图片加载事件bindLoad, imageUtil.getViewWHInfo(e)该句调用了上面自定义的函数。

  1. //index.js
  2. //获取应用实例
  3. //获取工具类的应用实例
  4. var imageUtil = require('../../utils/util.js');
  5. var app = getApp()
  6. Page({
  7. data:{
  8. imageUrl:"../image/1.jpg",
  9. viewHeigh:"",
  10. viewWidth:""
  11. },
  12. onLoad: function () {
  13. },
  14. imageLoad:function(e){
  15. var viewSize = imageUtil.getViewWHInfo(e);
  16. //console.log(viewSize.heigh);
  17. this.setData({
  18. viewHeigh: viewSize.height,
  19. viewWidth: viewSize.width
  20. });
  21. }
  22. })

步骤三:编辑图片标签

打开index文件夹下的index.wxml文件,删除原有的全部内容,将下面的图片插入代码直接复制粘贴,其中style表示的是标签的样式,width:{{viewWidth}}表示图片的宽度是取index.js文件中所赋的值,height和src同理,bindload事件表示该图片加载的时候绑定了index.js文件imageLoad函数,并且在图片加载时执行该函数。

  1. <image
  2. style="width: {{viewWidth}}px; height: {{viewHeigh}}px;" src="{{imageUrl}}" bindload="imageLoad">
  3. </image>
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: xiaoxiangshenjian 来自: csdn博客

相关阅读