小程式掃描二維碼獲取參數

• 2019 年 11 月 5 日
• 筆記

最近開發的小程式有一個需求，當用戶通過微信掃一掃功能，掃普通鏈接二維碼打開小程式時，需要獲取這個普通鏈接中傳遞的參數,然後再做進一步的操作。

這個需求很常見，比如為某個飯店開發一個自助點餐功能，微信掃碼進入飯店的點餐頁面，頁面顯示的是所有菜品，然後用戶在菜單中去選擇，然後下單。

另外一種更加便捷的是飯店推出幾個熱門的菜，在飯店顯眼的位置放上圖片和本菜的二維碼，掃描二維碼直接進入本菜的點單頁面，這樣省去了用戶在頁面中查找的時間。

另外還有一些博物館設置的小程式自助講解功能，只需掃碼即可進入相應的展品頁面。

原理很簡單，但是因為小程式並不是完全按照web的方式去設計的，下面看看如何配置一下吧。

實現這個需求，首先要在小程式的後台控制頁面配置一下，如圖：

點擊上圖中右上角的添加按鈕去配置：

需要填寫四項內容，前綴規則默認不佔用，當我們通過二維碼工具或者qcodejs將普通鏈接轉化為二維碼後，調用微信掃一掃功能掃描此二維碼，微信就會跳轉到目標小程式的特定頁面。

但是有時候我們需要傳遞一些參數，通過上面的普通鏈接來傳遞，傳遞的方式就是在普通鏈接後面添加參數，參數格式為查詢字元串，例如 http://www.a.com?name=zs&age=18,這樣的話小程式內部如何獲取這個數據呢？觀察如下程式碼：

onLoad (option) {  console.log(option)  }

一般我們會在小程式生命周期函數onload函數中列印這個函數的默認形參option，option就是上一個頁面傳遞過來的參數，但是這裡需要注意，這是小程式內部頁面之間傳遞參數的方式，不適用於上面掃描二維獲取二維碼中的參數，好多同學在獲取二維碼中的參數時容易和頁面間傳值獲取的方式搞混。

這兩種方式傳參的方式是一樣的，都是在鏈接後面追加問號和查詢字元串，但是獲取方式不同。

掃描二維碼進入小程式並沒有發生頁面間的跳轉，所以並不能直接從option中獲取鏈接中傳遞的參數。

那我們如何獲取呢？查看官方文檔：

onload事件的默認形參option中會有一個q屬性，這個屬性需要用decodeURIComponent解碼一次，解碼後得到原二維碼的完整內容，例如：「http://www.a.com?name=zs&age=18」。得到這個完整的鏈接後，我們再提取參數，主要過程就是字元串的處理。

import qs from "qs"  onLoad (option) {    console.log(option)    if (option.q) {      let url = decodeURIComponent(option.q)      // url http://www.a.com?name=zs&age=18;      let paramstr = url.split("/?/")[1];      // name=zs&age=18;      let params = qs.parser(paramstr);      //最終結果為：params  {name:'zs',age:18}    }  }

上面我們使用了一個叫做qs的npm包，這個包專門處理查詢字元串的，我們用？分割這個字元串「http://www.a.com?name=zs&age=18」，得到「name=zs&age=18」，然後用qs的parser方法進行解析得到{name:'zs',age:18}這個對象，至此我們就得到我們通過二維碼鏈接傳遞的參數了。

關於qs這個npm包的具體使用方法，大家可以去npm官網查看相關文檔，很方便的一個類庫，大家有興趣可以去看看。