微信小程序的帶參數分享:識別二維碼與消息卡片

帶參數分享是微信小程序經常需要用到的功能,但官方文檔介紹的并不夠詳細,本文主要介紹兩種常用的分享模式:掃描或識別二維碼,消息卡片。


一、掃描或識別二維碼

在掃描二維碼之前,先說說生成二維碼。通常二維碼是從后臺請求到的(微信不允許前臺直接生成),以下是官方Api的“getWXACodeUnlimit”中的幾個常用參數:

1.access_token(必傳):在官方API中的接口調用憑證,有詳細介紹

2.page:掃描二維碼后跳轉的頁面,不能攜帶參數,可不傳,默認跳主頁面

3.scene(必傳):這個是重點,scene 字段的值會作為 query 參數傳遞給小程序

4.is_hyaline:是否需要透明底色,默認是false,即白色背景的二維碼

5.width:默認是430px大小,取值范圍是(280px-1280px)

下面是關于二維碼的一個示例:

在生成二維碼時,scene參數我傳了“422_1_12_32”,參數不宜過長,這幾個數字代表關鍵信息。

掃描二維碼后,在小程序的onLaunch方法中,輸出一下參數(參數名為options):

{"path":"pages/index","query":{"scene":"422_1_12_32"},"scene":1048,"referrerInfo":{}}

隨后,獲取二維碼中的參數:

if (options.query.scene) {

????let theScene = decodeURIComponent(options.query.scene)

????let params = theScene.split('_')

}

如果不希望在onLaunch中處理參數,可以在指定頁面的onLoad方法中獲取:

onLoad(options) {

????let scene = decodeURIComponent(options.scene)

}


二、消息卡片


消息卡片不同于二維碼,觸發上圖事件需要點擊按鈕:

<button open-type="share" hover-class="none" id="1"></button>

隨后調用頁面的onShareAppMessage方法:

onShareAppMessage() {

? ? ? return {

? ? ? ? title: '紅旗H5 2018款 30TD 智聯享動版',

? ? ? ? path: '/pages/cars/carDetail?id=12&name=422',

? ? ? ? imageUrl: '圖片路徑'

? ? ? }

? ?}

這里的path是指定跳轉頁面,可以傳參,

當用戶點擊消息卡片進入小程序時,在onLaunch()方法中,輸出一下參數:

{"path":"pages/cars/carDetail","query":{"id":"12","name":"422"},"scene":1007,"referrerInfo":{}}

同樣,在carDetail頁面的onLoad方法中,輸出一下參數:

{id: "12", name: "422"}

至此,參數已獲取到,可以進行下一步操作了。


?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容