微信小程序开发问题之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 相关文章推荐
js数组Array sort方法使用深入分析
Feb 21 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
Require.js的基本用法详解
Jul 03 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
微信小程序使用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初学者最感迷茫的问题小结
2010/03/27 PHP
有关php运算符的知识大全
2011/11/03 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
开启PHP的伪静态模式
2015/12/31 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
浅析Python多线程下的变量问题
2015/04/28 Python
python3 读写文件换行符的方法
2018/04/09 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
wxPython实现带颜色的进度条
2019/11/19 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python要安装在哪个盘
2020/06/15 Python
python把一个字符串切开的实例方法
2020/09/27 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
工作证明格式范文
2015/06/15 职场文书
简历自我评价范文
2019/04/24 职场文书