微信小程序开发问题之wx.previewImage

更新时间：2018年12月25日 11:50:11 作者：心中有一海

这篇文章主要给大家介绍了关于微信小程序开发问题之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,所以此时其他的异步操作便被停止，因为预览图片是一个同步操作，所以当你点击图片时，图片预览优先级最高，其他动作暂停，当你再次点击图片回到原样时，图片预览完成，在开发者工具里会自动继续之前页面被暂停的动作，但是真机调试却不会。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

JS hashMap实例详解
这篇文章主要介绍了JS hashMap实例详解的相关资料，包括删除键值、获取键值的相关知识，非常不错具有参考借鉴价值,需要的朋友一起看看吧
2016-05-05
基于纯JS实现多张图片的懒加载Lazy过程解析
这篇文章主要介绍了基于纯JS实现多张图片的懒加载Lazy过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
JavaScript 类型转换的详细实现
本文主要介绍了JavaScript 类型转换的详细实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
详解webpack打包第三方类库的正确姿势
这篇文章主要介绍了详解webpack打包第三方类库的正确姿，我们主要介绍了webpack.optimize.CommonsChunkPlu，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
一个简单的Node.js异步操作管理器分享
这篇文章主要介绍了一个简单的Node.js异步操作管理器分享,需要的朋友可以参考下
2014-04-04
ionic中的$ionicPlatform.ready事件中的通用设置
$ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件，相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理
2017-06-06
JavaScript实现解析INI文件内容的方法
这篇文章主要介绍了JavaScript实现解析INI文件内容的方法,结合实例形式分析了javascript通过自定义函数实现针对ini文件解析操作的相关处理技巧,需要的朋友可以参考下
2016-11-11
关于meta viewport中target-densitydpi属性详解（推荐）
这篇文章主要介绍了关于meta viewport中target-densitydpi属性详解，通过不同的缩放比例实现了不同的预览效果，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
BootStrap 导航条实例代码
本文通过实例代码给大家介绍了bootstrap导航条效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-05-05
JavaScript可迭代对象详细介绍
ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for...of循环，Map(iterable)构造器，展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
2022-06-06