微信小程序-bug-调用wx.login()无响应的原因和解决方案

Posted 2020-12-28 狂奔的小马扎

 想必，最近有些小程序开发者，在调用wx.login()的时候，在部分ios上无响应的情况；

补充一点：在测试模式，调试模式，都是OK的，一上正式环境就GG了，百思不得其解啊！

响应结果如下：

• 在success fail的回调函数里面均未触发；
• 设置timeout后，在complate回调中可触发；

分析结果，我们知道，login接口一直处于pending状态，如果加了timeout时间后，在complate回调中可触发；

那为什么login方法一直是pending呢？？？？

看了微信的社区，也提了问题，但是微信官方回应，他们真机测试过，没这个情况发生；what fuck！！！见鬼了么

这就尴尬了，一边一个说辞，然后就继续解决呗！客户等着呢，锅甩给微信，客户也不答应啊！

捋了一遍代码，发现页面中用了新组件

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

这个组件是用来显示微信的“头像”和“昵称”的，本着“试一试，万一可以呢”的原则，果断删除了该组件，再次运行，好了，神奇了嗨！

产生bug的原因：

在调用wx.login()方法前，我先使用open-data标签渲染了“头像”和“昵称”，但是为啥先使用组件后就GG了？可能是微信渲染自带线程的吧，我的使用方法，违背了微信的渲染机制，导致了线程阻塞（我猜的哈）；

回头想想，也是哈，尚未登陆就渲染了头像和昵称，节奏不是这样的；就像警察查身份证，还没刷机器，就知道你叫啥了，住哪里，不科学了对吧。

所以，要显示头像和昵称的open-type组件，必须在调用wx.login()的API后，再行渲染；

解决方案：

知道了原因，解决起来就很简单了，定义一个变量isLogin，用来记录wx.login()是否已调用

let isLogin = false
wx.login({
  success: function(res) {
    if (res.code) {
      //发起网络请求
      isLogin = true;
    }
  }
});

然后将isLogin绑定在页面的data对象中，我就不写了哈，然后在页面中，用wx:if判断就可以了

<open-data wx:if=‘{{isLogin}}‘ type="userAvatarUrl"></open-data>
<open-data wx:if=‘{{isLogin}}‘ type="userNickName"></open-data>

 

我既然写了这么牛逼的bug，不容易啊，虽然微信也脱不了干系，但是动动脚趾头想想，我们的使用方法确实很不科学的；哈哈