（乾貨）微信小程序之轉發好友

今天簡單地說下微信小程序的轉發功能，爲何要簡單的說下呢，由於主要講的就是轉發給好友或者羣組，還有一種是分享到朋友圈，這種就比較複雜一點了，先稍微透漏一點，分享到朋友圈主要是兩種方法，一種是後臺直接生成海報圖，一種是前端經過canvas生成海報。之後有機會再詳細說，好了，言歸正傳繼續說咱們的轉發好友。

首先介紹一個微信小程序的API：onShareAppMessage(options)

在 Page 中定義 onShareAppMessage 函數，設置該頁面的轉發信息。

• 只有定義了此事件處理函數，右上角菜單纔會顯示 「轉發」 按鈕
• 用戶點擊轉發按鈕的時候會調用
• 此事件須要 return 一個 Object，用於自定義轉發內容

options 參數說明

參數	類型	說明	最低版本
from	String	轉發事件來源。button：頁面內轉發按鈕；menu：右上角轉發菜單	1.2.4
target	Object	若是 from 值是 button，則 target 是觸發此次轉發事件的 button，不然爲 undefined	1.2.4

自定義轉發字段

 

字段	說明	默認值	最低版本
title	轉發標題	當前小程序名稱
path	轉發路徑	當前頁面 path ，必須是以 / 開頭的完整路徑
imageUrl	自定義圖片路徑，能夠是本地文件路徑、代碼包文件路徑或者網絡圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認截圖。顯示圖片長寬比是 5:4		1.5.0
success	轉發成功的回調函數		1.1.0
fail	轉發失敗的回調函數		1.1.0
complete	轉發結束的回調函數（轉發成功、失敗都會執行		1.1.0

 

還有一個值那就是shareTickets他是轉發成功返回的，而且是個數組，每一項是一個 shareTicket ，對應一個轉發對象

API先說到這，接下來就是轉發的實現

先看圖：

首先要在onLoad中配置wx.showShareMenu

  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目標信息
      withShareTicket: true
    }); 
  },

而後再配置onShareAppMessage

/* 轉發*/
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(ops.target)
    }
    return {
      title: '轉發dom',
      path: `pages/index/index`,
      success: function (res) {
        // 轉發成功
        console.log("轉發成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //能夠獲取羣組信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 轉發失敗
        console.log("轉發失敗:" + JSON.stringify(res));
      }
    }
  },

我解釋一下wx.getShareInfo這個能夠獲取到獲取轉發詳細信息

完整js代碼就是

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
  },
  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目標信息
      withShareTicket: true
    }); 
  },
  /* 轉發*/
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(ops.target)
    }
    return {
      title: '轉發dom',
      path: `pages/index/index`,
      success: function (res) {
        // 轉發成功
        console.log("轉發成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //能夠獲取羣組信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 轉發失敗
        console.log("轉發失敗:" + JSON.stringify(res));
      }
    }
  },
})

聰明的同窗就該知道接下來該是wxml代碼

<view class="container">
  <view class="userinfo">
   <button open-type="share">分享好友</button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

友情提示一下若是點擊按鈕分享的話，button必定要設置open-type="share"不然不起做用。

若是以爲文章還不錯並對你有幫助的話，請分享給你的小夥伴，並點贊，有什麼不懂得能夠在底下留言哦。

若是想看源碼的話能夠去個人github上下載，歡迎star，github： https://github.com/Mr-MengBo/wx-share