用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    877

    主题

    2066

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2016-11-16 11:28:54 zhichi_admin 管理员 楼主 126621
    如果你已经看过一段时间的微信小程序后,你会发现,小程序中的图片虽然给了很多种mode,但是在你使用过程中,会出现很尴尬的问题。 比如: 图片很高,但是在显示的时候,只能看到小的缩略图,且如不指定宽高,则在默认渲染中,则宽高都为320,240.
    在视觉设计上会有一定的麻烦。
    在实际开发中,也有很多人问过我这个问题,今天说一下单图片的适配,多图片我目前还没有找到合适的处理方案,等有了再说。
    通过image的bindload来计算自适应宽高
    微信小程序中image暴漏的函数比较少,但是bindload十分有用。
    官方说明: 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}
    ⚠️: 这里的height:'图片高度px', width:'图片宽度px'都是原始宽高,这就给了我们可以计算的余地
    • 思路

      • 获取图片原始宽高
      • 获取系统屏宽
      • 以原始宽与系统屏宽对比大小,以大者为基准缩放
    • 实现函数
      我在主要函数中,加入了少量注释。

    1. /***
    2. * wxAutoImageCal 计算宽高
    3. *
    4. * 参数 e: iamge load函数的取得的值
    5. * 返回计算后的图片宽高
    6. * {
    7. *  imageWidth: 100px;
    8. *  imageHeight: 100px;
    9. * }
    10. */
    11. function wxAutoImageCal(e){
    12.     console.dir(e);
    13.     //获取图片的原始长宽
    14.     var originalWidth = e.detail.width;
    15.     var originalHeight = e.detail.height;
    16.     var windowWidth = 0,windowHeight = 0;
    17.     var autoWidth = 0,autoHeight = 0;
    18.     var results= {};
    19.     wx.getSystemInfo({
    20.       success: function(res) {
    21.         console.dir(res);
    22.         windowWidth = res.windowWidth;
    23.         windowHeight = res.windowHeight;
    24.         //判断按照那种方式进行缩放
    25.         console.log("windowWidth"+windowWidth);
    26.         if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候
    27.           autoWidth = windowWidth;
    28.           console.log("autoWidth"+autoWidth);
    29.           autoHeight = (autoWidth*originalHeight)/originalWidth;
    30.           console.log("autoHeight"+autoHeight);
    31.           results.imageWidth = autoWidth;
    32.           results.imageheight = autoHeight;
    33.         }else{//否则展示原来的数据
    34.           results.imageWidth = originalWidth;
    35.           results.imageheight = originalHeight;
    36.         }
    37.       }
    38.     })

    39.     return results;

    40.   }
    复制代码
    使用
    • 1.在image属性绑定函数和动态style
      1. <image bindload="cusImageLoad" src="https://dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" style="width:{{imageWidth}}px;height:{{imageheight}}px"/>
      复制代码

    • 2.在load函数中引入计算

    1. //index.js
    2. //获取应用实例
    3. var WxAutoImage = require('../../WxAutoImage/WxAutoImage.js');
    4. var app = getApp()
    5. Page({
    6.   data: {

    7.   },
    8.   onLoad: function () {
    9.     console.log('onLoad')
    10.     var that = this
    11.   },
    12.   cusImageLoad: function (e){
    13.     var that = this;
    14.     //这里看你在wxml中绑定的数据格式 单独取出自己绑定即可
    15.     that.setData(WxAutoImage.wxAutoImageCal(e));
    16.   }
    17. })
    复制代码

    问题
    目前这种操作比较负责,暂时没有想到多图片的解决方案。
    希望有更好的解决方案的朋友指正批评。




    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    正需要,支持楼主大人了!
    富文本字段里的图片如何做自适应!!!!
    确实是难得好帖啊,顶先
    dddddddddddddddddddddddd

    确实是难得好帖啊,顶先
    好帖,顶顶顶顶顶
    好帖,顶顶顶顶顶
    666666666666666666666666666666666666666666

    正需要,支持楼主大人了!
    12下一页
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略