天天看點

小程式二維碼和小程式帶參數二維碼生成

本文主要講解小程式二維碼的基本概念,幫助開發和營運人員更好的掌握小程式參數二維碼,同時也包含小程式二維碼官方文檔解讀,更好的掌握小程式參數二維碼在業務中的使用

一,小程式二維碼小白介紹

二,小程式二維碼開發介紹

三,小程式二維碼生成介紹

四,小程式二維碼官方文檔解讀

一,小程式參數二維碼小白篇

介紹參數二維碼的基礎知識,讓開發者和營運者知道什麼是參數二維碼

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,場景參數二維碼**

小程式二維碼和小程式帶參數二維碼生成