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


Posted in Javascript onDecember 25, 2018

小知识

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

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

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

那么他有哪些坑呢?

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

图在下面:

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

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

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

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

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

总结

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

Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
微信小程序使用for循环动态渲染页面操作示例
Dec 25 #Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 #Javascript
使用gulp构建前端自动化的方法示例
Dec 25 #Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 #Javascript
详解vuex commit保存数据技巧
Dec 25 #Javascript
bootstrap table实现合并单元格效果
Dec 24 #Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 #Javascript
You might like
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP数组操作类实例
2015/07/11 PHP
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
深入理解python中的atexit模块
2017/03/07 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python post请求实现代码实例
2020/02/28 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
公司门卫岗位职责范本
2014/07/08 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
小学校园广播稿
2015/08/18 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers