首先介紹一個(gè)微信小程序的API:onShareAppMessage(options)
在 Page 中定義 onShareAppMessage 函數(shù),設(shè)置該頁面的轉(zhuǎn)發(fā)信息。
options 參數(shù)說明
自定義轉(zhuǎn)發(fā)字段
還有一個(gè)值那就是shareTickets他是轉(zhuǎn)發(fā)成功返回的,并且是個(gè)數(shù)組,每一項(xiàng)是一個(gè) shareTicket ,對(duì)應(yīng)一個(gè)轉(zhuǎn)發(fā)對(duì)象
API先說到這,接下來就是轉(zhuǎn)發(fā)的實(shí)現(xiàn)
先看圖:
首先要在onLoad中配置wx.showShareMenu
onLoad: function (e) {
wx.showShareMenu({
// 要求小程序返回分享目標(biāo)信息
withShareTicket: true
});
},
然后再配置onShareAppMessage
/* 轉(zhuǎn)發(fā)*/
onShareAppMessage: function (ops) {
if (ops.from === 'button') {
// 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
console.log(ops.target)
}
return {
title: '轉(zhuǎn)發(fā)dom',
path: `pages/index/index`,
success: function (res) {
// 轉(zhuǎn)發(fā)成功
console.log("轉(zhuǎn)發(fā)成功:" + 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) {
// 轉(zhuǎn)發(fā)失敗
console.log("轉(zhuǎn)發(fā)失敗:" + JSON.stringify(res));
}
}
},
我解釋一下wx.getShareInfo這個(gè)可以獲取到獲取轉(zhuǎn)發(fā)詳細(xì)信息
完整js代碼就是
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
motto: 'Hello World',
},
onLoad: function (e) {
wx.showShareMenu({
// 要求小程序返回分享目標(biāo)信息
withShareTicket: true
});
},
/* 轉(zhuǎn)發(fā)*/
onShareAppMessage: function (ops) {
if (ops.from === 'button') {
// 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
console.log(ops.target)
}
return {
title: '轉(zhuǎn)發(fā)dom',
path: `pages/index/index`,
success: function (res) {
// 轉(zhuǎn)發(fā)成功
console.log("轉(zhuǎn)發(fā)成功:" + 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) {
// 轉(zhuǎn)發(fā)失敗
console.log("轉(zhuǎn)發(fā)失敗:" + JSON.stringify(res));
}
}
},
})
聰明的同學(xué)就該知道接下來該是wxml代碼
<view class="container">
<view class="userinfo">
<button open-type="share">分享好友</button>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
友情提示一下如果點(diǎn)擊按鈕分享的話,button一定要設(shè)置open-type="share"否則不起作用。