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

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

這個需求很常見寂恬，比如為某個飯店開發(fā)一個自助點餐功能续誉，微信掃碼進入飯店的點餐頁面，頁面顯示的是所有菜品初肉，然后用戶在菜單中去選擇酷鸦，然后下單。

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

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

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

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

image.png

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

image.png

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

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

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

一般我們會在小程序生命周期函數onload函數中打印這個函數的默認形參option莺丑，option就是上一個頁面?zhèn)鬟f過來的參數著蟹，

但是這里需要注意，

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

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

掃描二維碼進入小程序并沒有發(fā)生頁面間的跳轉轻局，所以并不能直接從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)
    }
}

?著作權歸作者所有,轉載或內容合作請聯系作者