微信小程序720全景图：微信小程序图集预览器

摘要: 类似于iOS下的ZImageBrowser，Android下的com.king.photo.zoom.PhotoView

托微信宿主APP的福，小程序实现的方式有点不可思议的快速简便，真机上跑了下，自带双指缩放，标题栏显示页码指示器，长按可保存、转发与收藏。

1. wx.previewImage一个方法完成80%的工作

<swiper class="images" indicator-dots="true" autoplay="true" interval="5000" duration="1000" style="height:200px;" bindtap="previewImage"> previewImage: function () { wx.previewImage({ current: '', // 当前显示图片的http链接 urls: this.data.goods.get('images') // 需要预览的图片http链接列表 }) }

2. 确定初始展示的图片为轮播点中的那张，完成剩下的20%工作

2.1 通过<swiper>的current值来确定previewImage的current值

这是需要current来确定，从swiper传到previewImage中，比较古怪的是，current是String类型，而不是Integer类型，给出一个Index下标不是很合理吗，这让人很费解。

<swiper bindtap="previewImage" current="{{current}}" bindchange="bindchange"></swiper> previewImage: function () { wx.previewImage({ //从页面data中取出current，得到String类型的url路径 current: this.data.goods.get('images')[this.data.current], urls: this.data.goods.get('images') // 需要预览的图片http链接列表 }) }, bindchange: function (e) { //左右滑动swiper存下当前所在页面的 index this.setData({ current: e.detail.current }); }

利用current来找出当前点击的图片index，这里再次发挥出了双向数据绑定的优势。

2.2 通过<swiper-item>内嵌<image>的data-current值来确定previewImage的current值

在<swiper-item>中的<image>上绑定点击事件previewImage

<image src="{{item}}" mode="aspectFill" class="swiper-image" bindtap="previewImage" data-current="{{index}}"/>previewImage: function (e) { wx.previewImage({ //从<image>的data-current取到current，得到String类型的url路径 current: this.data.goods.get('images')[parseInt(e.currentTarget.dataset.current)], urls: this.data.goods.get('images') // 需要预览的图片http链接列表 }) }

不论是通过<swiper>还是<swiper-item>确定current值，都是达到预期效果，看哪种更顺手一些。第一种更好地利用了双向绑定，而第二种因为少一个方法bindchange与this.data.current因而更加简洁。

总结：尽管整个过程比原生开发还是简单得多，但还是再次验证了二八定律，20%的工作需要80%的时间完成。

该demo源码已托管到码云：http://git.oschina.net/dotton/lendoo-wx，本文涉及代码存于/pages/goods/detail文件夹中。

对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】与我交流讨论，给我留言或文章评论。