微信小程序开发问题之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.navigateTo页面不跳转问题的解决方法
- 微信小程序 wx.login解密出现乱码的问题解决办法
- 微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
- 微信小程序 常见问题总结（4058，40013）及解决办法
- 微信小程序遇到修改数据后页面不渲染的问题解决
- 微信小程序搭建及解决登录失败问题
- 微信小程序request出现400的问题解决办法
- 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
- 解决微信小程序防止无法回到主页的问题
- 微信小程序录音文件格式silk遇到的问题及解决方法
- 微信小程序出现wx.getLocation再次授权问题的解决方法分析
相关文章
这篇文章主要介绍了electron 引入node服务的操作方法,引入node服务很简单,直接在electron的主体中引入就可以了,对electron 引入node服务感兴趣的朋友一起看看吧2024-03-03
这篇文章主要为大家详细介绍了JavaScript图片懒加载的优化方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家详细介绍了6种JavaScript判断对象自身为空的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
本文为大家介绍下使用js实现的map方法，具体示例如下，喜欢的朋友可以了解下2014-01-01
uniapp自定义tabbar的方法(支持中间凸起、角标、动态隐藏tab和全端适用)
一个项目有多个角色,比如医生和患者,tabBar跳转的路径不一样,但是在pages.json中无法配置多个tabBar,这时候就要自定义tabBar了,下面这篇文章主要给大家介绍了关于uniapp自定义tabbar(支持中间凸起、角标、动态隐藏tab和全端适用)的相关资料,需要的朋友可以参考下2023-04-04
js通过var定义全局变量与在window对象上直接定义属性的区别说明
这篇文章主要介绍了js通过var定义全局变量与在window对象上直接定义属性的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了JavaScript实现仿网易通行证表单验证，十分的实用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要为大家介绍了JavaScript分水岭CommonJS对比ES模块分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了JS数组方法slice()用法,结合实例形式分析了JavaScript数组slice()方法具体功能、用法及相关操作注意事项,需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了JavaScript实现点击图片翻转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论