微信掃普通鏈接二維碼進入小程序

微信小程序在當前的技術環境中佔據了大量市場。

此次接到客戶需求，需求的描述很簡潔：通過微信掃碼，進入小程序並繼續完成業務操作

問題分析：

1.通過微信掃碼進入到小程序

2.進入小程序後需要引導用戶進行業務操作

• 開發配置

首先，如果生成一個微信能識別的二維碼（可以使用草料二維碼生成器https://cli.im生成二維碼）

我們可以根據微信的開發文檔（可以搜索普通鏈接二維碼到文檔頁面）https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

讓運維同學進行協助處理，將校驗文件添加到指定位置

例如，醫網信的鏈接前綴定義的是：https://www.xxx.com/miniprogram/business，則檢驗文件需要放到https://www.xxx.com/miniprogram目錄下，不是business目錄

配置好二維碼規則以及小程序功能頁面後可以保存併發布（配置該頁面，在微信掃碼後會進入到onLoad函數中，且會將二維碼內容通過參數傳遞過來）

配置路徑：登錄後臺->開發（左側）→開發設置→ 掃普通鏈接二維碼打開小程序 （滑動到底部）

  

• 通過二維碼鏈接傳遞參數

在二維碼前綴後通過?方式拼接，像get請求地址一樣，示例一個二維碼鏈接爲：www.xxx.com/miniprogram/business?qrEntryType=sign&uniqueId=11111

在onLoad函數中對數據進行處理（官方文檔中有說明）

原則上，二維碼的內容主要有兩個：業務類型qrEntryType、業務唯一標識uniqueId，後續邏輯都在內部處理

onLoad (options) {
  let query = options.q
  let params = this.getQueryParams(query)
  // todo 業務流轉
},
// ... more
 
getQueryParams (queryString) {
    // 微信掃碼得到的內容進行了一次編碼，所以官方要求需要進行decodeURIComponent一次
    queryString = decodeURIComponent(queryString)
    let params = {}
    if (queryString) {
      let queryArray = queryString.split('?')
      if (queryArray.length > 1) {
        let query = queryArray[1]
        let array = query.split('&')
        array.map((value) => {
          let valueArray = value.split('=')
          if (valueArray.length > 1) {
            // 還需要對value進行解碼（可能涉及到在value爲中文字符，在賦值到二維碼前進行了encodeURI編碼）
            Object.assign(params, { [valueArray[0]]: decodeURI(valueArray[1]) })
          }
        })
      }
    }
    return params
}

• 通過微信掃碼進入小程序體驗版本

在配置普通鏈接二維碼的頁面中可以添加測試鏈接

敲黑板：如果需要跳轉到體驗版本，二維碼的內容一定需要配置在測試鏈接中，一個標點都不能有差別，否則，微信掃碼後會跳轉到正式版本