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


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

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

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

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

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

 

一,小程序參數二維碼小白篇
介紹參數二維碼的基礎知識,讓開發者和運營者知道什么是參數二維碼

1. 首先我們要了解,什么是小程序的二維碼?

  以下是小程序二維碼

            小程序的菊花碼                                     普通的小程序二維碼    

2. 為什么小程序碼是圓的放射型,也稱為菊花碼

 小程序最開始使用的是常規方形的二維碼,后面微信專門為此設計了一套菊花碼,也就是圖二,為什么要專門搞一套小程序特有的編碼呢,估計是

 (1)專利原因

    方形二維碼的專利屬於別人,微信沒有專利。

 (2)區分普通二維碼,減少用戶掃碼額疑慮

     將小程序和普通的二維碼進行區分,現在大家看到二維碼,都不敢隨便掃,但是如果提前知道二維碼屬於哪一類,對手機有沒有危害性,這樣就會減少掃碼人的顧慮,大家看方形的二維碼中間那   塊還是圓的,就是為了,讓大家知道這個是小程序,而且微信生成的二維碼里,還有一句提示,明確的告之用戶,這是小程序,可以放心使用 

   更多小程序的菊花碼故事,請跳轉到這里  https://www.qcloud.com/community/article/347791     

3. 什么是小程序帶參數的二維碼

   小程序的帶參數的二維碼,顧名思義。就是就將參數帶入小程序內,當然參數這個,是明顯偏技術類的一個名稱。 我們來舉2個例子

  播放視頻例子

  比如打開一個網頁,播放視頻

  https://v.qq.com?play=湖人隊比賽

  當你打開網頁的時候,網站知道你想要打開看的是湖人對的比賽,而參數名是play,參數值是湖人隊比賽,那么網站就直接打開這個頁面給您,而不是進入網站的首頁。

  同樣的道理,當我掃碼二維碼打開小程序的時候,我希望能夠直接找到對應的內容,而不是進入首頁,一個一個去瀏覽。

   衣服購買例子

我掃碼二維碼后,希望進入衣服的購買介紹頁面,而不是小程序的首頁,這樣節省時間。

 共享單車例子

 再比如摩拜單車,每掃一個二維碼,就直接對應的是這輛車,進入摩拜的小程序,摩拜是知道

        

    圖中的編號02110015717 就傳遞到摩拜小程序了,摩拜小程序就知道你想打開哪輛車了(妹子和本文無關,不是我女朋友)。

    所以帶參數二維碼,就是將數據直接帶入小程序,小程序知道用戶是掃哪個二維碼過來的,參數是什么,用戶希望做什么

    所以帶參數二維碼,就是通過參數直達小程序的內容頁面。參數二維碼還有哪些場景呢?

    小程序帶參數二維碼場景舉例

       醫院場景:比如每個醫生一個id,通過帶參數二維碼,掃碼二維碼就直接進入小程序醫生頁面

       餐廳場景:比如每個菜一個二維碼,通過掃碼這個菜的二維碼,進入小程序后,可以直接點這道菜,而不是要找菜鋪。

       電商場景:掃碼二維碼帶參數,進入小程序直接購買,比如通過公眾號,通過帶參數二維碼,用戶長按識別,直接進入服裝的購買頁面,提高購買轉換。

       音樂場景:掃碼某個帶參數二維碼,直接打開播放某個固定的歌曲

       推廣場景:

           線上推廣

          比如我同樣的一件衣服,放在A公眾號推廣,有多少人購買了,放在B公眾號有多少人購買了,怎么區分和統計呢?

          那就增加一個參數兩個二維碼,增加一個參數,A公眾號設置qudao=A  B公眾號設置參數qudao=B,那么我們小程序就知道同樣的一件衣服,是哪個公眾號購買的

          線下推廣:

     通過帶參數的二維碼,商家將這些獨一無二的小程序碼配置在不同的物料上,開發者通過追蹤到用戶都是從哪兒識別進入到小程序,讓商家清楚了解到各物料的投放效果。

這樣,我們就知道哪邊的推廣效果好。

到這里小程序的參數二維碼的具體用戶我們大致是知道了。

 

二,小程序參數二維碼開發篇
介紹如何開發小程序參數二維碼,如何在開發模擬小程序參數二維碼,以及代碼里如何獲取小程序參數碼的值

 

1. 自定義編譯條件

 

2. 在代理的onLoad里獲取參數值

Page({
  onLoad: function(options) {
    // options 中的 scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時傳入的 scene
    var scene = decodeURIComponent(options.scene)
    //
    var query = options.query.dentistId // 3736
  }
})

我們通過onLoad 的options的參數,可以很方便的獲取小程序帶參數二維碼傳遞過來的參數,以及場景參數二維碼的值

 

三,小程序參數二維碼生成篇

   當小程序審核通過后,那么線上的小程序二維碼是如何生成呢?芝麻小程序碼提供了程序二維碼生成工具。

   網址如下 https://weixin.hotapp.cn 

 

芝麻小程序碼的特色

(1)支持小程序路徑帶參數,自定義帶參數

(2)小程序碼,方形小程序碼,以及小程序碼的美化

(3)支持創建帶場景值的二維碼

(4)支持小程序參數二維碼的統計,統計掃碼人數,掃碼次數

 

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

    小程序二維碼生成官方文檔鏈接 https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html

    接口A:生成普通菊花小程序帶參數二維碼,適用於需要的碼數量較少的業務場景,通過該接口生成的小程序碼,永久有效,用戶掃描該碼進入小程序后,將直接進入 path 對應的頁面。

              數量限制是10萬個

  接口地址:https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

 

    接口A的的生成二維碼,如何生成,二維碼樣式,選擇普通的菊花碼

    

 



  接口B:生成場景小程序參數二維碼
  通過該接口生成的小程序碼,永久有效,數量不限制,用戶掃描該碼進入小程序后,將直接進入 path 對應的頁面。

   接口地址:https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

用戶掃描該碼進入小程序后,開發者需在對應頁面獲取的碼中 scene 字段的值,再做處理邏輯。使用如下代碼可以獲取到二維碼中的 scene 字段的值。調試階段可以使用開發工具的條件編譯自定義參數 scene=xxxx 進行模擬,開發工具模擬時的 scene 的參數值需要進行 urlencode

 

// 這是首頁的 js
Page({
  onLoad: function(options) {
    // options 中的 scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時傳入的 scene
    var scene = decodeURIComponent(options.scene)
  }
})

產品發布后,場景小程序碼的生成方法

 

 接口C:普通方形二維碼,適用於需要的碼數量較少的業務場景,接口C和接口A的二維碼總數量是10萬個。如果數量比較多。需要用接口B,場景參數二維碼

接口地址:https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

 

 

 

小程序二維碼生成工具:芝麻小程序碼 https://weixin.hotapp.cn


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM