脚本之家

微信小程序单图片的自适应计算

上一篇
wxDiscode-微信小程序特殊字符转义符转化工具类
下一篇
WxEmojiView-微信小程序Emoji展示输入组件alpha 0.1

有话说

如果你已经看过一段时间的微信小程序后,你会发现,小程序中的图片虽然给了很多种mode,但是在你使用过程中,会出现很尴尬的问题。
比如: 图片很高,但是在显示的时候,只能看到小的缩略图,且如不指定宽高,则在默认渲染中,则宽高都为320,240.

在视觉设计上会有一定的麻烦。

在实际开发中,也有很多人问过我这个问题,今天说一下单图片的适配,多图片我目前还没有找到合适的处理方案,等有了再说。

简单的github库

https://github.com/icindy/WxAutoImage145

通过image的bindload来计算自适应宽高

微信小程序中image暴漏的函数比较少,但是bindload十分有用。

官方说明: 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

这里的height:'图片高度px', width:'图片宽度px'都是原始宽高,这就给了我们可以计算的余地!

思路

获取图片原始宽高

获取系统屏宽

以原始宽与系统屏宽对比大小,以大者为基准缩放

实现函数

我在主要函数中,加入了少量注释。

/***
 * wxAutoImageCal 计算宽高
 * 
 * 参数 e: iamge load函数的取得的值
 * 返回计算后的图片宽高
 * {
 *  imageWidth: 100px;
 *  imageHeight: 100px;
 * }
 */function wxAutoImageCal(e){    console.dir(e);    //获取图片的原始长宽
    var originalWidth = e.detail.width;    var originalHeight = e.detail.height;    var windowWidth = 0,windowHeight = 0;    var autoWidth = 0,autoHeight = 0;    var results= {};
    wx.getSystemInfo({
      success: function(res) {        console.dir(res);
        windowWidth = res.windowWidth;
        windowHeight = res.windowHeight;        //判断按照那种方式进行缩放
        console.log("windowWidth"+windowWidth);        if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候
          autoWidth = windowWidth;          console.log("autoWidth"+autoWidth);
          autoHeight = (autoWidth*originalHeight)/originalWidth;          console.log("autoHeight"+autoHeight);
          results.imageWidth = autoWidth;
          results.imageheight = autoHeight;
        }else{//否则展示原来的数据
          results.imageWidth = originalWidth;
          results.imageheight = originalHeight;
        }
      }
    })    return results;

  }

使用

1.在image属性绑定函数和动态style

<image bindload="cusImageLoad" src="https://dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" style="width:{{imageWidth}}px;height:{{imageheight}}px"/>

2.在load函数中引入计算

//index.js//获取应用实例var WxAutoImage = require('../../WxAutoImage/WxAutoImage.js');var app = getApp()
Page({
  data: {
    
  },
  onLoad: function () {    console.log('onLoad')    var that = this
  },
  cusImageLoad: function (e){    var that = this;    //这里看你在wxml中绑定的数据格式 单独取出自己绑定即可
    that.setData(WxAutoImage.wxAutoImageCal(e));
  }
})

问题

目前这种操作比较负责,暂时没有想到多图片的解决方案。

希望有更好的解决方案的朋友指正批评。

来源:微信小程序开发论坛


以上就是微信小程序单图片的自适应计算的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

微信小程序单图片的自适应计算 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
wxDiscode-微信小程序特殊字符转义符转化工具类
下一篇
WxEmojiView-微信小程序Emoji展示输入组件alpha 0.1

您可能感兴趣的小程序组件教程

小程序组件

微信小程序中使用redux

当然小程序中使用redux不是必须的,如果你的程序逻辑不是很复杂,无需用这个东西,redux就是管理全局状态的,如果你刚好很熟悉redux,并且很有必要使用这东西的话,那就非常好可以使用,作者集成插件到微信小程序中的