帶參數分享是微信小程序經常需要用到的功能,但官方文檔介紹的并不夠詳細,本文主要介紹兩種常用的分享模式:掃描或識別二維碼,消息卡片。
一、掃描或識別二維碼
在掃描二維碼之前,先說說生成二維碼。通常二維碼是從后臺請求到的(微信不允許前臺直接生成),以下是官方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"}
至此,參數已獲取到,可以進行下一步操作了。