藉助雲開發10行代碼生成小程序碼,可以微信掃碼快速進入指定小程序頁

最近老有同學問我,如何生成小程序二維碼,讓用戶掃碼後能快速進入指定頁面。經過一番研究,發現用雲開發的雲調用來實現特別方便,基本上10行代碼就可以快速的生成指定頁面的二維碼。這樣我們在做一些線下業務時就能讓用戶方便快速的進入到指定頁面了,比如我們的點餐小程序,我們可以在二維碼裏綁定桌號,這樣用戶用微信掃碼二維碼,就可以快速的進入點餐頁面了,並且可以識別到用戶當前所在的桌號。

注意事項

我們生成的小程序碼指定的頁面,必須是你小程序已經發布,如果小程序還沒有發佈,獲取小程序碼綁定的頁面不存在,掃碼後就會出現以下錯誤

所以要想使用這個功能,必須要先發布你的小程序。接下來我們就來講下具體的實現。

一,先看官方文檔

我其實說過很多遍的,官方文檔永遠是最好的老師。因爲官方文檔永遠是最標準的。所以我們實現這個功能,同樣要先去看下官方文檔。小程序碼官方文旦

看上圖的官方文檔,我們可以看出,有三種方式可以生成小程序碼。

  • A,createQRCode:生成二維碼,可接受 path 參數較長,生成個數受限,數量限制
  • B,get:生成小程序碼,可接受 path 參數較長,生成個數受限,數量限制見
  • C,getUnlimited:生成小程序碼,可接受頁面參數較短,生成個數不受限

    官方提示:

    接口只能生成已發佈的小程序的二維碼
    接口 A 加上接口 C,總共生成的碼數量限制爲 100,000,請謹慎調用。
    接口 B 調用分鐘頻率受限(5000次/分鐘),如需大量小程序碼,建議預生成
    所以我們一定要結合自己的業務場景來使用不同的方法來生成小程序碼或者二維碼。我們這裏以點餐桌號爲例。因爲我們一個餐廳也沒有多少桌,所以我們就用接口B來實現頁面和桌號的綁定。

    看官方文檔,我們可以看到,我們主要使用的還是path這個參數,這個參數用來設置頁面和參數。具體代碼如下圖。

    代碼很簡單,在第11行,我們給path參數設置了小程序頁面和參數name。這樣我們用微信掃碼後,就會打開對應的頁面,並且可以拿到name參數,

    其實到這裏我們就成功的生成小程序碼了,並且可以用微信直接掃碼進入到指定頁面,並攜帶指定參數了。
    接下來呢,我就把代碼改造成一個簡單的工具,這樣大家拿到源碼後就可以直接使用這個工具快速的生成小程序碼了。

    創建雲函數

    關於雲開發,雲函數的創建和使用,我講過很多遍了,還不知道的同學,可以去翻看下我之前的文章,或者看下我錄的雲開發視頻:5小時零基礎入門小程序雲開發
    下面我們就創建一個雲函數,並編寫雲函數,如下圖

    細心的同學應該可以看到,我這裏傳了兩個參數進來。event.path就是用來指定我們二維碼綁定的頁面和攜帶的參數,event.name就是用來給我們的二維碼圖片命名的。
    原理:我們這裏生成小程序碼的原理就是使用雲開發的雲調用,獲取二維碼,然後把二維碼存到雲存儲,這樣我們就可以拿到我們需要的二維碼了

  • 再來看下調用的方法。
  • 再來看下我們生成的小程序碼

    可以看到我們生成的1號桌對應的二維碼,這樣顧客用微信掃描一號餐桌的二維碼時,就可以直接進入對應的頁面,並且把桌號帶進去了。

    這樣你只需要改造下我index.js裏的path和name就可以生成你想要的小程序二維碼了。

    然後再到雲存儲裏獲取對應的二維碼,

    下載後打印出來,貼到對應的桌子上,就可以供用戶掃碼點餐了。還有一點要記住奧,一定是你小程序發佈後,纔可以使用這個功能奧。
    今天就到這裏把,祝大家元旦快樂,2020年學有所成,想獲取更多小程序相關的知識,請持續關注。
    視頻講解地址:https://edu.51cto.com/course/19575.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章