小程序掃描二維碼獲取參數--填坑

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

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

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

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

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

實現這個需求,首先要在小程序的后臺控制頁面配置一下,如圖:

image.png

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

image.png

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

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

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

一般我們會在小程序生命周期函數onload函數中打印這個函數的默認形參option,option就是上一個頁面傳遞過來的參數,

但是這里需要注意,

這是小程序內部頁面之間傳遞參數的方式,不適用于上面掃描二維獲取二維碼中的參數,好多同學在獲取二維碼中的參數時容易和頁面間傳值獲取的方式搞混。

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

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

那我們如何獲取呢?查看官方文檔 https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E5%8F%91%E5%B8%83

image.png

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

 onLoad: function (options) {
  
    console.log(options);
    var scene = options.generalizeid;
    if (options.q) {
     
      // 提取 url中的參數
      let str = decodeURIComponent(options.q)
    //// url http://www.a.com?age=18;
      //獲取“=”的下標
      let index = str.indexOf("=");
      //index是“=”的下標,index + 1就是“=”后一位數字(id的值就是10)
      var scene = str.substring(index + 1, index + 10);
//scene  == 18
      console.log(scene)
    }
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。