【微信公众号开发】七、微信JS需要注意的坑

在使用微信js时,往往会遇到各种各样奇葩的问题,本文对其部分问题给出了解决方案,希望对你有所帮助。

【微信公众号开发】七、微信JS需要注意的坑

by img MicroAnswer Create at:Jul 5, 2019 11:07:50 AM 

Tags: 微信js wxjs

在使用微信js时,往往会遇到各种各样奇葩的问题,本文对其部分问题给出了解决方案,希望对你有所帮助。


重要声明:本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

目录

本系列博文还包含了下面的博客:

  1. 【微信公众号开发】一、运作及配置流程简介
  2. 【微信公众号开发】二、解析微信请求及响应消息
  3. 【微信公众号开发】三、解析微信事件XML数据消息及响应
  4. 【微信公众号开发】四、公众号按钮设置及自己的微信按钮编辑器
  5. 【微信公众号开发】五、微信网页授权获取用户openId
  6. 【微信公众号开发】六、微信JS的使用
  7. 【微信公众号开发】七、微信JS需要注意的坑(本文)
  8. 【微信公众号开发】八、微信JS发起支付

一、正文

本文是承接上文《【微信公众号开发】六、微信JS的使用》,进行编写的,如果对上文内容还没有了解,建议先阅读上文。

微信js在使用中常常会出现各种各样的奇葩问题,并且这些问题最常发生于单页面应用中。现在移动端web应用越来越多的是使用单页面应用完成开发,其效率提升了许多,并且源代码的模块化为后续的维护也带来了极大的便利。不过正是由于单页面的页面各个子页面是通过js路由进行管理的,所以导致了各种问题的发生。

1、微信js在单页面中配置问题

在以往,一个界面还是一个html时,界面上使用config进行配置后,就可以无忧的使用微信js方法了。但是现在,单页面应用的出现,不再是一个页面一个html了,而是一个html里面由js路由管理了许许多多个页面。这时候微信配置该放在哪个地方就变得模糊起来。

对于单页面应用,要根据路由模式的不同采用不同的配置方案。通常,单页面应用的路由模式有 historyhash 模式两种,它们的区别也是一个url上没有#号,一个url上带有#号。这两种模式就决定了他们在使用微信js时配置方案是不一样的。

对于 history 模式: 这种模式给用户的感觉完全就不像是单页面,就好像真正的一个路径对应一个html,这十分有利于用户体验,但是在配置微信js这个问题上,由于它每个页面有自己完整独立的url地址,因此,每次页面跳转你都必须重新进行微信配置 wx.config(option) 。并且,每次的配置参数都得是请求后台接口获取到的最新的参数,即option参数每次都必须是后台返回的。这样,才能在每个界面下正常使用微信js方法。

对于 hash 模式: 这种模式会在url上添加一个#号,每个页面的跳转都是通过 # 号后面的路径来确定的。稍微懂点前端技术的伙伴们就一眼看穿这是单页面应用了。不过你要大喜大贺你没有使用 history 模式,因为hash模式对于url实质上是没有改变的,有效url永远都是 # 号前面部分,而这部分不会改变。因此,如果使用 hash 模式的单页面应用,只需要在首次进行微信js配置的时候获取一次后台接口提供的配置参数,以后跳转其他页面的时候,你依然要在每次跳转的时候调用 wx.config(option) 方法,但其中 option 参数是第一次请求时获取到的,你需要在第一次请求拿到 option 时将其保存下来,下次切换页面进行配置时,可以还使用这个参数。这样,每次切换页面后你就可以正常的使用微信js了。

这两种配置方式有一个共同点,那就是每一个页面进行跳转的时候,都要进行wx.config(option)配置。不同点则是使用history模式需要每次获取option参数,而 hash 模式只需第一次获取,以后使用第一次获取到的值即可。

2、微信js方法-批量隐藏\显示菜单时灵时不灵问题

有时候出现此问题的可能原因是上面一小节提到的问题导致的,但不一定所有出现此问题的原因都是这个。这里我简述一下我遇到的现象及解决方案。

微信提供的批量隐藏菜单按钮的方法是:wx.hideMenuItems();批量显示菜单按钮的方法是:wx.showMenuItems;其实这两个方法本身没有什么问题。但是这两个方法再配上单页面应用,再配上Android和IOS不同的操作系统,事情就开始变得有趣起来:

Android系统:当你调用 wx.hideMenuItems()时,微信会把你决定隐藏的按钮进行隐藏,你没有要求隐藏的按钮不会受影响,界面跳转后(也就是重新调用wx.config后),你的隐藏了的按钮又会被重新显示出来,你需要再次调用隐藏按钮方法,将你要隐藏的按钮隐藏。

IOS系统:当你调用 wx.hideMenuItems()时,微信也会把你决定隐藏的按钮进行隐藏,不隐藏的不受影响。但是和android系统不一样的是,IOS系统在界面跳转后(也就是重新调用wx.config方法后),微信会保持之前的按钮隐藏行为,不会像Android那样重新全部显示出来。如果你上一个界面是隐藏了【A按钮】下一个界面又想显示【A按钮】,在IOS上,你还得显示的调用 wx.showMenuItems() 方法去设置要显示出来的按钮,才能实现这个需求。

这两种不同的操作系统在按钮隐藏和显示这件事情上本身没问题,但是区别就在于:Android上每次调用config会将之前的隐藏按钮行为全部取消,而IOS每次调用config不会清除之前的隐藏按钮行为。

后续

目前没有遇到其他问题,类似分享失败、设置分享图片失败这些,明白了上面的问题原理,或多或少能解决部分问题,但如果并没有解决,通常是由于接口调用开发者本身的问题,而不属于“坑”类型的问题。如果你遇到了什么奇葩“坑”可以评论下来哦。

Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.

Comments (0 Comments)