小程式webview呼叫微信掃一掃的“曲折”思路

TSY發表於2018-09-29
WebView

自上一篇遇到webview中沒有返回按鈕之後，雖然跳出坑了。解決方案：《小程式webview跳轉頁面後沒有返回按鈕完美解決方案》 但是，小程式踩坑之路並沒有結束。在公眾號網頁中通過配置APPID和appsecret可以正常調起微信掃一掃，但是，如何在小程式webview中呼叫掃一掃？掃描之後資料如何處理？小程式頁面處理？還是傳遞給H5頁面處理？ 做為一名面向搜尋引擎開發的我，遇到問題的第一件事，當然是百度啊，Google啊！可是這種在過去都是無往不利的方法，突然失效了！翻遍整個瀏覽器，並且把整個網際網路都翻了個底朝天，竟然“找不到”解決方案（很有可能是我搜尋水平太差，沒有精通面向搜尋引擎開發這項技能）！

其實也不算是沒有找到，只是找到的不適合我，並沒有解決我的問題，例如下面這篇（還有幾篇廣告文就不提了）： 《微信小程式webview直接呼叫微信掃一掃相關功能》 文中提到，直接使用小程式的APPID和appsecret，替換公眾號的APPID和appsecret就可以了。但是這我這始終都沒法用，難道是騰訊覺得我帥，起了妒忌之心，故意針對我嗎？或者說是寫後臺的哥們把邏輯搞錯了？（嗯，實力甩鍋）反正就是沒法用，報錯Invalid signature。

無奈之下，只得另尋他法。我在上一篇文章中提到過，可以在H5頁面使用wx.miniProgram.navigateTo方法跳轉到小程式頁面。所以，得好好的利用這個方法，搞點事情。

想想看，既然能跳轉到小程式，而小程式本身呼叫掃一掃是非常方便的，只需要使用wx.scanCode即可。那麼也就是說，當使用者點選掃碼操作的時候。我們可以先跳轉到小程式頁面，在頁面onload的時候，立馬呼叫wx.scanCode，也就達到了點選H5頁面按鈕喚起掃碼功能的效果。然後把掃碼結果，通過設定webview的url引數的形式返回給H5頁面，最後在H5頁面處理掃碼結果。整個流程分析下來，可以說是天衣無縫，非常完美，理論上來說，是完全成立的。接下來，【擼碼--執行--看效果】一條龍服務。點贊手勢準備好，我怕看完我接下來的操作，你們沉浸在其中，無法自拔而忘記點讚了。

1、H5頁面跳小程式

openScanCode() { //開啟微信掃一掃
     isMiniProgram(wx, (res)=>{//是否為小程式環境
          if (res) {//小程式環境
               wx.miniProgram.navigateTo({url: '../scanCode/scanCode'});//跳轉到小程式呼叫微信掃一掃頁面
           } else {//非小程式環境（公眾號環境）
               //通過jssdk方法呼叫微信掃一掃，程式碼忽略
          }
       })
},
isMiniProgram(callback) { //是否為小程式環境
      //是否在微信環境
      if (!isWeixin()) {
          callback(false);
      } else {
           //微信API獲取當前執行環境
           wx.miniProgram.getEnv((res) => {
               if (res.miniprogram) {//小程式環境
                   callback(true);
               } else {
                   callback(false);
               }
          })
      }
}
複製程式碼

2、小程式頁面喚起掃一掃，並對掃碼結果進行返回 特別注意setTimeout函式，如果不使用該方法進行延遲呼叫，在IOS系統中100%無法調起掃一掃，應該算是微信小程式的BUG，至於延遲多少，就自行測試了，這邊延遲500ms。

2.1、掃碼成功的回撥處理：重定向到頁面中，並且攜帶miniType引數和result引數

miniType：用於區分是否為掃碼返回，如果url有該引數則獲取result結果，如果url沒有該引數，則不做任何操作。result：掃碼返回結果

2.2、掃碼失敗的回撥處理：直接重定向到頁面，並且不帶任何引數

/**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    //相容ios微信無法立即調起掃一掃
    setTimeout(function () {
      wx.scanCode({//呼叫掃一掃
        success: function (res) {//掃碼成功的回撥函式
          wx.redirectTo({//失敗的話，重定向到頁面中，並且攜帶miniType引數和result引數
            url: '../index/index?url=https://www.hxkj.vip?miniType=mini&result=' + res
          })
        },
        error: function (err) {//掃碼失敗的回撥函式
          console.log('err');
          wx.redirectTo({//失敗的話，直接重定向到頁面，並且不帶任何引數
            url: '../index/index?url=https://www.hxkj.vip/'
          })
        }
      })
    }, 500)
  },
複製程式碼

3、H5頁面接收掃碼結果，並對其進行處理

this.isMiniProgram((res)=>{//判斷是否是小程式頁面的回撥函式
        if (res) {//小程式頁面
             let miniType = this.$route.query.miniType;
             let result = this.$route.query.result;
             if (miniType && miniType === 'mini') {
                 this.scanResult(result);//處理掃碼結果
            }
        } 
      })
複製程式碼

經過以上的曲折解決辦法，已經實現了在小程式webview呼叫微信掃一掃的功能。然而還有個坑，那就是，當使用者調起掃一掃時，什麼也沒幹，直接返回！！！然後他將會看到一個空白的頁面，這個頁面就是呼叫掃一掃的小程式頁面，因為我們在這個頁面什麼都沒加，當然就空白了。目前我是在這個頁面也加一個webview，webview的url就是呼叫掃碼H5頁面的連結，這樣的話，就不會有空白一片了。

轉載請註明出處：www.jianshu.com/p/2129d498d… 作者：TSY

喜歡的話，可以關注下我的微信公眾號

微信公眾號

相關文章