微信小程序-bug-調用wx.login()無響應的原因和解決方案

想必，最近有些小程序開發者，在調用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，不容易啊，雖然微信也脫不了干系，但是動動腳趾頭想想，我們的使用方法確實很不科學的；哈哈