用uniapp開發微信小程序時,有一個需求是分享罐表詳情頁面給其它用戶,其它用戶(在已經登錄的狀態下)點擊分享卡片可以直接跳轉到該罐表詳情頁,且能顯示自己是否已經收藏該罐表(收藏狀態由用戶uid和罐表id共同確定)。
基本思路是用 微信原生的 onShareAppMessage(OBJECT) 實現,uniapp文檔:https://uniapp.dcloud.net.cn/api/plugins/share?id=onshareappmessage,微信小程序文檔:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object 。
path 是其它用戶點擊分享卡片直接進入的頁面,不寫默認是分享的當前頁面。
在 onShareAppMessage 的path中傳遞的參數,由下一頁面的onLoad(option)接收。
以上是微信小程序實現頁面分享的基礎功能。
遇到的一個bug是:其它用戶點擊分享卡片第一次不能正確獲取uid、第二次進入小程序才能正確獲取uid時。
第一次進入小程序:
第二次進入小程序:
解決辦法:在罐表詳情頁面的分享設置path為home(而不是當前頁面),然后從home跳轉到罐表詳情,這樣就可以正確顯示頁面數據了。丹尼斯小程序就是這樣實現的。丹尼斯小程序效果如下:
罐表詳情.vue
onShareAppMessage(options) { var msg = "我給你分享了一個罐表,快來點擊查看吧"; return { title: msg, // 轉發后 所顯示的title path: '/pages/home/home?id=' + this.id } },
home.vue
onLoad(option) { var scene = wx.getLaunchOptionsSync().scene; //獲取場景值,判斷是用哪種方式進入的小程序 if (scene == 1007 || scene == 1008 || scene == 1044) { //從分享進入 if (option.id) { uni.navigateTo({ url: '../subpage/tableMarket/marketSeeTable/marketSeeTable?id=' + option.id }) } } }
場景值介紹:https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html