這篇文章給大家分享的是有關微信小程序怎樣實現轉發好友的功能的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
今天簡單地說下微信小程序的轉發功能,為什么要簡單的說下呢,因為主要講的就是轉發給好友或者群組,還有一種是分享到朋友圈,這種就比較復雜一點了,先稍微透漏一點,分享到朋友圈主要是兩種方法,一種是后臺直接生成海報圖,一種是前端通過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"否則不起作用。
感謝各位的閱讀!關于“微信小程序怎樣實現轉發好友的功能”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。