本文主要講解小程式二維碼的基本概念,幫助開發和營運人員更好的掌握小程式參數二維碼,同時也包含小程式二維碼官方文檔解讀,更好的掌握小程式參數二維碼在業務中的使用
一,小程式二維碼小白介紹
二,小程式二維碼開發介紹
三,小程式二維碼生成介紹
四,小程式二維碼官方文檔解讀
一,小程式參數二維碼小白篇
介紹參數二維碼的基礎知識,讓開發者和營運者知道什麼是參數二維碼
1. 首先我們要了解,什麼是小程式的二維碼?
2. 為什麼小程式碼是圓的放射型,也稱為菊花碼
小程式最開始使用的是正常方形的二維碼,後面微信專門為此設計了一套菊花碼,也就是圖二,為什麼要專門搞一套小程式特有的編碼呢,估計是
(1)專利原因
(2)區分普通二維碼,減少使用者掃碼額疑慮
更多小程式的菊花碼故事,請跳轉到這裡 https://www.qcloud.com/community/article/347791
3. 什麼是小程式帶參數的二維碼
小程式的帶參數的二維碼,顧名思義。就是就将參數帶入小程式内,當然參數這個,是明顯偏技術類的一個名稱。 我們來舉2個例子
播放視訊例子
比如打開一個網頁,播放視訊
https://v.qq.com?play=湖人隊比賽
當你打開網頁的時候,網站知道你想要打開看的是湖人對的比賽,而參數名是play,參數值是湖人隊比賽,那麼網站就直接打開這個頁面給您,而不是進入網站的首頁。
同樣的道理,當我掃碼二維碼打開小程式的時候,我希望能夠直接找到對應的内容,而不是進入首頁,一個一個去浏覽。
衣服購買例子

我掃碼二維碼後,希望進入衣服的購買介紹頁面,而不是小程式的首頁,這樣節省時間。
共享單車例子
再比如摩拜單車,每掃一個二維碼,就直接對應的是這輛車,進入摩拜的小程式,摩拜是知道
小程式帶參數二維碼場景舉例
醫院場景:比如每個醫生一個id,通過帶參數二維碼,掃碼二維碼就直接進入小程式醫生頁面
** 餐廳場景**:比如每個菜一個二維碼,通過掃碼這個菜的二維碼,進入小程式後,可以直接點這道菜,而不是要找菜鋪。
電商場景:掃碼二維碼帶參數,進入小程式直接購買,比如通過公衆号,通過帶參數二維碼,使用者長按識别,直接進入服裝的購買頁面,提高購買轉換。
音樂場景:掃碼某個帶參數二維碼,直接打開播放某個固定的歌曲
推廣場景:
線上推廣
線下推廣:
這樣,我們就知道哪邊的推廣效果好。
到這裡小程式的參數二維碼的具體使用者我們大緻是知道了。
二,小程式參數二維碼開發篇
介紹如何開發小程式參數二維碼,如何在開發模拟小程式參數二維碼,以及代碼裡如何擷取小程式參數位的值
1. 自定義編譯條件
2. 在代理的onLoad裡擷取參數值
我們通過onLoad 的options的參數,可以很友善的擷取小程式帶參數二維碼傳遞過來的參數,以及場景參數二維碼的值
三,小程式參數二維碼生成篇
當小程式稽核通過後,那麼線上的小程式二維碼是如何生成呢?芝麻小程式碼提供了程式二維碼生成工具。
網址如下 https://weixin.hotapp.cn
芝麻小程式碼的特色
(1)支援小程式路徑帶參數,自定義帶參數
(2)小程式碼,方形小程式碼,以及小程式碼的美化
(3)支援建立帶場景值的二維碼
(4)支援小程式參數二維碼的統計,統計掃碼人數,掃碼次數
接口B:生成場景小程式參數二維碼
通過該接口生成的小程式碼,永久有效,數量不限制,使用者掃描該碼進入小程式後,将直接進入 path 對應的頁面。
接口位址:https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
使用者掃描該碼進入小程式後,開發者需在對應頁面擷取的碼中 scene 字段的值,再做處理邏輯。使用如下代碼可以擷取到二維碼中的 scene 字段的值。調試階段可以使用開發工具的條件編譯自定義參數 scene=xxxx 進行模拟,開發工具模拟時的 scene 的參數值需要進行 urlencode
<code>// 這是首頁的 js</code>
<code>Page({</code>
<code>onLoad: function(options) {</code>
<code>// options 中的 scene 需要使用 decodeURIComponent 才能擷取到生成二維碼時傳入的 scene</code>
<code>var</code> <code>scene = decodeURIComponent(options.scene)</code>
<code>}</code>
<code>})</code>
産品釋出後,場景小程式碼的生成方法
** 接口C:普通方形二維碼,适用于需要的碼數量較少的業務場景,接口C和接口A的二維碼總數量是10萬個。如果數量比較多。需要用接口B,場景參數二維碼**