微信小程序“頁面內發起轉發”開發問題彙總

最新更新時間：2019年12月25日22:34:21

《猛戳-查看我的博客地圖-總有你意想不到的驚喜》

本文內容：微信小程序通過轉發，將小程序以消息卡片的形式發送給好友，好友點擊聊天記錄中的消息卡片，可以進入這個小程序。

轉發

轉發，是指小程序界面右上角三個點調起底部彈框選擇器，其中有一個轉發按鈕，會將這個小程序以消息卡片的形式發送給好友

• 不自定義轉發圖片的情況下，默認會取當前頁面，從頂部開始，高度爲 80% 屏幕寬度的圖像作爲轉發圖片
• 自定義轉發圖片需要在Page.onShareAppMessage事件中返回圖片地址

如果覺得小程序原生的轉發交互太複雜，可以在頁面自定義轉發按鈕，通過給 button 組件設置屬性 open-type="share"，可以在用戶點擊按鈕後觸發 Page.onShareAppMessage 事件，如下：

<button open-type="share">這是一個自定義的轉發按鈕</button>

轉發按鈕，旨在幫助用戶更流暢地與好友分享內容和服務。轉發，應是用戶自發的行爲，且在需要時觸手可及

A用戶轉發給B用戶的方案

假如在pages/me/share.js頁面開啓轉發功能，需要對onShareAppMessage方法進行重寫，轉發卡片消息的自定義參數shareInfo(這個字符串可以隨意起名)配置如下：

onShareAppMessage: function() {
    let obj = {a:1,b:2};
    return {
      title: “標題”,
      path: `/pages/index/index?shareInfo=${JSON.stringify(obj)}`,
      imageUrl: ''
    }
  }

B用戶打開好友A消息卡片獲取參數的三種方案

• 在 App 的 onLaunch 和 onShow中通過options.query.shareInfo獲取到參數”{“a”:1,”b”:2}”
• 在/pages/index/index.js的 onLoad中通過options.shareInfo獲取到參數”{“a”:1,”b”:2}”
• 在同步方法wx.getLaunchOptionsSync中獲取上述場景值。

備註：wx.getLaunchOptionsSync()獲取小程序啓動時的參數。與 App.onLaunch 的回調參數一致。

通過微信開發者工具來測試轉發功能的方案

自定義編譯模式：

• 模式名稱：自定義
• 啓動頁面：自定義
• 啓動參數：shareInfo={“a”,1"b",2}
• 進入場景選擇 1007：單人聊天會話中的小程序消息卡片

• 自定義編譯模式設置好，開發者工具會自動存儲，設置數據如下圖：
  
• 啓動參數的獲取，同上面B用戶打開好友A消息卡片獲取參數的三種方案

轉發功能的開啓和關閉

只有定義了onShareAppMessage(Object object)事件處理函數，右上角菜單纔會顯示“轉發”按鈕；
也就是說，如果手動添加了Page.onShareAppMessage事件，即使函數內容爲空，用戶點擊右上角三個點，底部彈框選擇器會出現分享按鈕，此時分享的是當前這個頁面。相反，頁面沒有聲明Page.onShareAppMessage函數，點擊右上角三個點，底部彈框選擇器不會出現分享按鈕；

參考資料

• onShareAppMessage(Object object)
• 轉發
• wx.getLaunchOptionsSync
• 場景值
• 場景值列表

感謝閱讀，歡迎評論^-^

打賞我吧^-^