微信小程序小技巧《十九》实现图片高度自适应，带参数分享 ... ... ...

发布者: mrzhangdong | 发布时间: 2018-2-25 14:57| 查看数: 4990| 评论数: 1|帖子模式

本文作者：秀杰，来自他的博客

一：实现图片高度自适应

1. swiper轮播海报通过wx.getSystemInfo接口获取屏幕高度，高度依据图片宽高等比缩放

文档出处：

运行于app.js，全局保存

// 设备信息
wx.getSystemInfo({
    success: function(res) {
        that.screenWidth = res.windowWidth;
    }
});

page前端调用

bannerHeight: Math.ceil(290.0 / 750.0 * getApp().screenWidth)
<swiper style="height:{{bannerHeight}}px;"></swiper>

2. 配合使用wx.getImageInfo(OBJECT)接口来获取图片宽高，结果失败。

这适用于宽高比不一致的图片，比如商品详情图，需要用以上接口适配。

文档出处：

对每个图片都绑定一个高度

<image wx:for="{{goods.detail}}" src="{{item}}" wx:key="" mode="aspectFill" style="height:{{detailImagesHeight[index]}}rpx;"></image>

js实现获取高度

    getDetailImageHeight: function (imagesUrl) {
        var that = this;
        var detailImagesHeight = [];
        for (var i = 0; i < imagesUrl.length; i++) {
            // detailImagesHeight[i] = 300 * i;
            wx.getImageInfo({
                src: imagesUrl[i],
                success: function (res) {
                    detailImagesHeight[i] = res.height;
                    console.log(res.height);
                }
            });
        }
        that.setData({
            detailImagesHeight: detailImagesHeight
        });
    },

这种方式不可靠，网络请求线程不安全，取到的值是会重复与丢失。

更要命的是数组不能存入：console.log("detailImagesHeight:" + detailImagesHeight);打印结果为"detailImagesHeight:"，数组是空的！

总结：此接口适用于非循环遍历的情况，即针对单一图而不是图组时适用。

3. 使用标签的bindload获取图片高度，结果证明是有效的。

第二种方法失效，只得作罢，去翻看标签的文档

发现还提供了另一个bindload事件，可以从event.detail.height去获取高度。

手动实践下

    bindImageLoad: function (e) {
        var height = e.detail.height;
        console.log(height);
    },

发现取到的高度值是可靠的。

那剩下的来的工作是使用data-index绑定序列，给予填充高度就可以了。

<!--mode可以无视，因为反正是手算，什么值都不会变形-->
<image wx:for="{{goods.detail}}" src="{{item}}" wx:key="" mode="" bindload="bindImageLoad" data-index="{{index}}" style="height: {{detailImagesHeight[index]}}px;"></image>

完善下bindImageLoad方法：

    bindImageLoad: function (e) {
        // 取出当前图片的下标
        var index = parseInt(e.currentTarget.dataset.index);
        // 先读取本地detailImagesHeight原值
        var detailImagesHeight = this.data.detailImagesHeight;
        // 相当地存入对应图片的高度，根据图片宽高比与屏幕尺寸换算得出
        detailImagesHeight[index] = getApp().screenWidth / (e.detail.width / e.detail.height);
        this.setData({
            detailImagesHeight: detailImagesHeight
        });
    },

效果图：

4. 使用的mode为widthFix，零js代码解决

这种方式多快好省，推荐这种方式代替上述bindload去e.detail.height的方式。

<view class="detail">
    <image wx:for="{{goods.detail}}" src="{{item}}" wx:key="" mode="widthFix"></image>
</view>

此接口是2016-12-22微信团队在原先3种缩放方式（scaleToFill、aspectFit、aspectFill）所增加的，它帮我们省去计算的过程，很实用。在原生App开发中，免不了要徒手算，尤其对于iOS只提供了以上3种同时又没有流式布局的平台来说，很是痛苦。

详情：

结论：

凡事多看文档，关注更新更不能少，官方能站在前人经验上提供这个widthFix属性，确实是意料之外。
动手实践很重要，有些接口官方暂时没有提供的情况下，还是不少了手动变相实现。

该demo源码已托管到码云：，本文涉及代码存于/pages/index/与/pages/goods/detail文件夹中。

源码下载：dotton-lendoo-wx-master.zip

二：微信小程序带参数分享

摘要: 通过onShareAppMessage实现带参分享

文档出处：

    onLoad: function (options) {
        this.getInviteCode(options);
    },
    getInviteCode: function (options) {
        if (options.uid != undefined) {
            wx.showToast({
              title: '来自用户:' + options.uid + '的分享',
              icon: 'success',
              duration: 2000
            })
        }
    },

实现了onShareAppMessage方法，才会出现分享按钮

    onLoad: function (options) {
        this.getInviteCode(options);
    },
    getInviteCode: function (options) {
        if (options.uid != undefined) {
            wx.showToast({
              title: '来自用户:' + options.uid + '的分享',
              icon: 'success',
              duration: 2000
            })
        }
    },

这时弹出一个toast，显示来自用户:XXX的分享

源码下载：，本文涉及代码存于/pages/index/文件夹中。

源码下载：dotton-lendoo-wx-master.zip

微信公众账号

收藏0

微信小程序小技巧《十九》实现图片高度自适应，带参数分享 ... ... ...

1. swiper轮播海报通过wx.getSystemInfo接口获取屏幕高度，高度依据图片宽高等比缩放

2. 配合使用wx.getImageInfo(OBJECT)接口来获取图片宽高，结果失败。

3. 使用标签的bindload获取图片高度，结果证明是有效的。

4. 使用的mode为widthFix，零js代码解决

最新评论

浏览过的版块

轻源码让程序更轻更快