小程序如何實現轉發功能

這篇文章主要介紹小程序如何實現轉發功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

文章背景：

在開發小程序的過程中，有時我們需要設計一個 “好友代付” 的功能。該功能的目的就是通過點擊按鈕，來引導微信用戶轉發此頁面到微信好友或微信群中，讓對方來幫你付款。

知識講解

首先，開發前的重要一步就是，閱讀小程序官方文檔 —— 小程序轉發功能對應接口

梳理講解：

1.要擁有轉發功能，必須要在當前頁面的"js"代碼中，定義"onShareAppMessage()"函數

2.要知道轉發功能的使用有兩種方式

  #其一是自定義按鈕進行點擊觸發，

  #其二就是點擊右上角菜單的那個“轉發”按鈕

3.轉發操作完成后，要進行回調函數的處理 #一般Toast提示語句即可

完整接口代碼解釋：

  /**
   * 進行頁面分享
   */
  onShareAppMessage: function (options) {
    if (options.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(options.target)
    }
    return {
	  //## 此為轉發頁面所顯示的標題
      //title: '好友代付', 
      //## 此為轉發頁面的描述性文字
      desc: '江湖救急，還請貴人伸手相助啊!', 
      //## 此為轉發給微信好友或微信群后，對方點擊后進入的頁面鏈接，可以根據自己的需求添加參數
      path: 'pages/subpayment/firpayment/index?sn=' + this.data.sn, 
      //## 轉發操作成功后的回調函數，用于對發起者的提示語句或其他邏輯處理
      success: function(res) {
	      //這是我自定義的函數，可替換自己的操作
	      util.showToast(1, '發送成功');
      },
      //## 轉發操作失敗/取消 后的回調處理，一般是個提示語句即可
      fail: function() {
	      util.showToast(0, '朋友代付轉發失敗...');
      }
    }
  },

代碼實現操作

一. 此處，實際展示一下不同轉發方式所打印的 options 參數信息

首先，在 wxml 頁面中，設計一個 open-type="share"的按鈕

<button type="warn" open-type="share" data-tag="share1" id="btn_share1">發送微信給好友</button>

那么不同的轉發發起方式，打印出的options 參數信息如下：

建議：

1. 建議不需要進行轉發操作的頁面   #（比如：個人中心，地址管理，訂單列表等）

  就不要定義"onShareAppMessage()"參數，以減少不必要的用戶操作和后續狀況處理

2. 個人推薦使用 "Button" 引導的轉發方式，如果同一個頁面有多個引導按鈕，可以根據其 "target"中的"id" 進行區分

二、實際開發效果展示

通過前面的核心代碼，我實現的效果如下：

提示：

個人發現

  在微信官方提供的開發者工具中進行測試時，可以看到自己轉發喚醒時擁有設置的描述語句(desc)，

  但是，我在真機"iphone7"手機上測試時，并不會有所顯示，可從圖片中看到 #(默認截取了我的一部分頁面)

  title 和 imageUrl 的設置是可以正常顯示的

以上是“小程序如何實現轉發功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！