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)
2. 配合使用wx.getImageInfo(OBJECT)接口来获取图片宽高，结果失败。
这适用于宽高比不一致的图片，比如商品详情图，需要用以上接口适配。
对每个图片都绑定一个高度
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绑定序列，给予填充高度就可以了。
完善下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的方式。
此接口是-12-22微信团队在原先3种缩放方式(scaleToFill、aspectFit、aspectFill)所增加的，它帮我们省去计算的过程，很实用。在原生App开发中，免不了要徒手算，尤其对于iOS只提供了以上3种同时又没有流式布局的平台来说，很是痛苦。
结论：
凡事多看文档，关注更新更不能少，官方能站在前人经验上提供这个widthFix属性，确实是意料之外。
动手实践很重要，有些接口官方暂时没有提供的情况下，还是不少了手动变相实现。
该demo源码已托管到码云：/dotton/lendoo-wx，本文涉及代码存于/pages/index/与/pages/goods/detail文件夹中。
对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】与我交流讨论，给我留言或文章评论。
如果觉得《html微信图片自适应 微信小程序实现图片高度自适应》对你有帮助，请点赞、收藏，并留下你的观点哦！
