在第三方頁面調用微信接口

這兩天在作一個微信上的web項目, 項目很簡單, 大部分是表單提交和驗證的代碼, 考慮到速度和基本樣式, 選擇用vue + muse-ui來作, 初稿很快就完成了, 而後到了老闆提需求的階段, 表示要在頁面上作一個和微信掃一掃同樣的功能來識別二維碼讀取二維碼信息, 主要仍是爲了讓用戶減小表單輸入的操做難度, 咋一聽這怎麼可能呢, 微信掃一掃是創建在app的基礎上的, web頁面是不管如何都沒法調取原生應用還要修改原生應用更加不可能的啊, 除非利用react native或者weex, 偶然間同事跟我提及順豐的掃一掃識別條碼的功能, 是在公衆號的web頁面上實現的, 我拿來一看, 這是調的微信掃一掃的功能啊, 難不成微信還有內部的接口, 而後下面就是翻閱微信公衆平臺文檔js-sdk的收穫和一些坑

步驟

1. 進入文檔映入眼前的及時js-sdk的文檔目錄, 包括概述, 使用步驟1234..., 調用說明等等, 很詳細有木有, 看了才知道, 首先介紹一下js-sdk

經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。

官方原文, 功能仍是很不錯的

2. 綁定域名 首先設置JS接口的安全域名, 在"公衆號設置"->"JS接口安全域名"裏能夠設置你將要調用接口的域名

3. 引入js文件 寫文章的時候, 已經更新到了1.4.0res.wx.qq.com/open/js/jwe…, 在vue中引入能夠引入它的npm包, 能夠再npm官網搜索weixin-js-sdk, 或者直接使用yarn add weixin-js-sdk下載到項目中

4. 在頁面加載時配置接口注入權限驗證

import wx from 'weixin-js-sdk';
export default {
  methods: {
    configWX() {
      this.$axios.get('api/xxx?url=' + location.href.split('#')[0])
        .then(res => {
          res = res.data
          // 配置
          wx.config({
            // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，
            // 能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            debug: true,
            appId: 'your appId', // 必填，公衆號的惟一標識
            timestamp: res.timestamp, // 必填，生成簽名的時間戳
            nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
            signature: res.signature,// 必填，簽名
            jsApiList: [ 'scanQRCode' ] // 必填，須要使用的JS接口列表
          });
        })
        .catch(err => {
          alert('error: ' + err )
        })
    }
  },
  created() {
    this.configWX();
  }
}
複製代碼

官方的步驟就是這麼下來的, 並且它用了特殊的文體敘述寫法----倒序, 我開始也對於配置文件中的字段一臉懵B, 這些東西是從哪裏來的啊, 所以, 上面代碼有幾點須要解釋一下

• 關於後臺, 後臺在用戶進入這個頁面以前, 已經經過調用微信的接口https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET獲取到了access_token, appid和secret可在"基本配置"->"公衆號開發信息"中查詢到相關信息, access_token這個字段是公衆號的全局惟一接口調用憑據，公衆號調用各接口時都需使用access_token

  參數	是否必須	說明
  grant_type	是	獲取access_token填寫client_credential
  appid	是	第三方用戶惟一憑證
  secret	是	第三方用戶惟一憑證密鑰，即appsecret

  返回的格式以下:

  {"access_token":"ACCESS_TOKEN","expires_in":7200}
  複製代碼

• 用第一步拿到的access_token 採用http GET方式請求得到jsapi_ticket（有效期7200秒，開發者必須在本身的服務全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi, 獲取jsapi_ticket時, type固定爲jsapi, 獲取到jsapi_ticket以後，就能夠生成JS-SDK權限驗證的簽名了。關於簽名算法官方有詳細文檔, 可自行查閱.

• 簽名完成以後基本就接近前端須要的數據了, 再來看一下前端須要什麼

  appId: 'your appId', // 必填，公衆號的惟一標識
  timestamp: res.timestamp, // 必填，生成簽名的時間戳
  nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
  signature: res.signature,// 必填，簽名
  複製代碼

  appId能夠在公衆號上查到, timestamp是時間戳, nonceStr是後臺設置的隨機串, signature就是簽名了, 解釋了仍是一臉懵B有木有, 一圖勝千言

  

  這下應該懂了, 後臺的簽名算法未必正確, 可使用微信JS接口簽名校驗工具檢驗.

• url參數設置爲location.href.split('#')[0]是爲了考慮vue用戶使用hash模式致使的問題, 我用的是history模式, 可是也有其餘問題, 後面會講

5. 個人項目是用戶在點擊按鈕以後才調用掃一掃接口, 然而有些功能好比獲取用戶信息可能在已進入頁面的時候就須要調用, 就會用到兩個接口, 在created鉤子中調用

wx.ready(function(){
    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，
    // 因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。
    // 對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});
wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，
    // 具體錯誤信息能夠打開config的debug模式查看，
    // 也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});
複製代碼

6. 調用掃一掃 在調用功能以前, 最好驗證一下接口的可用性

wx.checkJsApi({
  jsApiList: ['scanQRCode'], // 須要檢測的JS接口列表，
  success: function(res) {
    // 以鍵值對的形式返回，可用的api值true，不可用爲false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  }
});
複製代碼

wx.scanQRCode({
  needResult: 0, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
  scanType: ["qrCode","barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
  success: function (res) {
    var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
  }
});
複製代碼

7. 在config中將debug設置爲true, 在移動端會以彈窗形式彈出debug的信息, 我遇到過諸如簽名錯誤, 緩存問題, 兼容問題等引起的一系列問題, 這裏坑確實很多, 可是由於沒作筆記, 先前的問題大多難以還原, 這裏粗略記下兩個

• android能夠調用, ios卻調不了, 開啓debug後提示the permission value is offline verifying, 網上各類說法都有, 我不肯定正確, 但個人確實不是他們說的問題, 個人問題產生的緣由是部分ios版本不支持pushState, 而我恰巧使用了它, 彷佛牽扯到KWwebview和UIwebview, 我不是很懂, 不過官方有介紹, 我只須要把全部引入當前調用頁面的router-link所有替換成a標籤便可.
• 還有簽名錯誤問題, 配合開發是須要很大的溝通成本的, 幸虧有微信JS接口簽名校驗工具, 這個東西仍是很不錯的, 爲開發者確實解決了不少溝通問題

題外

• 還有部分ios上的兼容問題, 好比我在vue中使用scss做爲擴展語言, 在設置muse-ui的組件內樣式時, 有時會用到穿透語法/deep/, 致使個人樣式失效, 刪除/deep/就行了, 若是設置組件樣式不成功, 則新建一個.scss文件, 在main.js中導入便可

以上就是在微信公衆號上搭建一個簡單表單項目的心得, 共同進步