当前位置: 首页 > 编程笔记 >

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

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

总结

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

 类似资料:
  • 本文向大家介绍微信小程序开发之IOS和Android兼容的问题,包括了微信小程序开发之IOS和Android兼容的问题的使用技巧和注意事项,需要的朋友参考一下 微信小程序开发之IOS和Android兼容的问题 一、时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如

  • 本文向大家介绍微信小程序开发教程之增加mixin扩展,包括了微信小程序开发教程之增加mixin扩展的使用技巧和注意事项,需要的朋友参考一下 Mixin简介 Mixin(织入)模式并不是GOF的《设计模式》归纳中的一种,但是在各种语言以及框架都会发现该模式(或者思想)的一些应用。简单来说,Mixin是带有全部实现或者部分实现的接口,其主要作用是更好的代码复用。 Mixin这个概念在React, Vu

  • 本文向大家介绍微信小程序云开发之云函数详解,包括了微信小程序云开发之云函数详解的使用技巧和注意事项,需要的朋友参考一下 在上一章我们已经配好了环境,这章我们按照模板的顺序去执行提供的案例,对官方文档进行一个实践操作。 首先我们点击”点击获取 openid “文字,发现控制台报错: 云函数 调用失败 Error: errCode: -404011 cloud function execution e

  • 本文向大家介绍微信小程序云开发之使用云存储,包括了微信小程序云开发之使用云存储的使用技巧和注意事项,需要的朋友参考一下 上一节为大家介绍了下云开发的搭建,接下来为大家介绍下怎么使用云存储,顾名思义,云存储当然就是我们平常所说的百度网盘用来存储自己的资源,当然我们这里的云存储不仅可以存储自己的素材还可以在云数据库调用自己云存储的数据,这既是云开发的一大特色之处吧,话不多说直接说下周末操作吧。 【步骤

  • 本文向大家介绍微信小程序云开发之使用云函数,包括了微信小程序云开发之使用云函数的使用技巧和注意事项,需要的朋友参考一下 在之前的几篇文章里面介绍了下云开发中的云数据库、云存储: 微信小程序如何使用云开发 微信小程序之使用云存储 微信小程序之使用云数据库 接下来的这篇文章主要介绍下云函数,介绍这个云函数的主要用途是因为要解决从云数据库查询数据最多显示20条的限制,而使用到云函数可以解决这种限制,使用

  • 本文向大家介绍微信小程序开发(一) 微信登录流程详解,包括了微信小程序开发(一) 微信登录流程详解的使用技巧和注意事项,需要的朋友参考一下 最近在研究微信小程序开发,非常有意思的一个东西。花了一点时间写了一个微信的登录流程,包括后端接口和小程序代码。 做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了