微信小程序中wx.previewImage的示例分析

这篇文章主要为大家展示了“微信小程序中wx.previewImage的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序中wx.previewImage的示例分析”这篇文章吧。

小知识

wx.previewImage是微信小程序官方提供的预览图片功能的api。

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

那么他有哪些坑呢？

我遇到的问题藏得比较深，我是在使用wxParse解析富文本时发现的。wxParse在解析img时会给它加上点击事件，那么这个点击事件是什么呢？

图在下面：

从中可以看到是微信的图片预览功能。其中that.setData({isPreview:true})是我加上去用来判断是否点击了图片，本身是没有的，此时先忽略掉。

首先，点击图片预览时，会终止页面一切正在执行的操作，这是为什么呢？我猜测是触发了页面的onHide函数，我在onHide中打log时果不其然，验证了我是正确的。

当你再次点击图片回去时，会再次触发页面的onShow事件。所以，当你在onHide或者onShow函数里有执行的操作的时候就要注意了，这两个函数都会被触发，所以这时候就需要判断，这两个函数被触发是来源于正常的页面加载隐藏还是来源于点击图片预览，于是便有了我上面在wxParse的源码wxParse.js里的wxParseImgTap里加了一句that.setData({isPreview:true}) ，而后我们可以用isPreview来判断onShow和onHide是否是被预览图片触发的。

此时我们并没有解决页面事件被终止的事实，因为线程被终止了。因为js里是单线程的，预览图片时会向服务器请求图片src,所以此时其他的异步操作便被停止，因为预览图片是一个同步操作，所以当你点击图片时，图片预览优先级最高，其他动作暂停，当你再次点击图片回到原样时，图片预览完成，在开发者工具里会自动继续之前页面被暂停的动作，但是真机调试却不会。

以上是“微信小程序中wx.previewImage的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！