今天簡單地說下微信小程序的轉發(fā)功能尾组，為什么要簡單的說下呢忙芒，因為主要講的就是轉發(fā)給好友或者群組示弓，還有一種是分享到朋友圈，這種就比較復雜一點了呵萨，先稍微透漏一點奏属，分享到朋友圈主要是兩種方法，一種是后臺直接生成海報圖潮峦，一種是前端通過canvas生成海報囱皿。以后有機會再詳細說勇婴，好了，言歸正傳繼續(xù)說我們的轉發(fā)好友嘱腥。
首先介紹一個微信小程序的API：onShareAppMessage(options)
在 Page 中定義 onShareAppMessage 函數(shù)耕渴，設置該頁面的轉發(fā)信息。
- 只有定義了此事件處理函數(shù)齿兔，右上角菜單才會顯示 “轉發(fā)” 按鈕
- 用戶點擊轉發(fā)按鈕的時候會調用
- 此事件需要 return 一個 Object橱脸，用于自定義轉發(fā)內容
options 參數(shù)說明
自定義轉發(fā)字段
還有一個值那就是shareTickets他是轉發(fā)成功返回的，并且是個數(shù)組分苇，每一項是一個 shareTicket 添诉，對應一個轉發(fā)對象
API先說到這，接下來就是轉發(fā)的實現(xiàn)
先看圖：
image
首先要在onLoad中配置wx.showShareMenu
onLoad: function (e) {
wx.showShareMenu({
// 要求小程序返回分享目標信息
withShareTicket: true
});
},
然后再配置onShareAppMessage
/* 轉發(fā)*/
onShareAppMessage: function (ops) {
if (ops.from === 'button') {
// 來自頁面內轉發(fā)按鈕
console.log(ops.target)
}
return {
title: '轉發(fā)dom',
path: `pages/index/index`,
success: function (res) {
// 轉發(fā)成功
console.log("轉發(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) {
// 轉發(fā)失敗
console.log("轉發(fā)失敗:" + JSON.stringify(res));
}
}
},
我解釋一下wx.getShareInfo這個可以獲取到獲取轉發(fā)詳細信息
完整js代碼就是
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
motto: 'Hello World',
},
onLoad: function (e) {
wx.showShareMenu({
// 要求小程序返回分享目標信息
withShareTicket: true
});
},
/* 轉發(fā)*/
onShareAppMessage: function (ops) {
if (ops.from === 'button') {
// 來自頁面內轉發(fā)按鈕
console.log(ops.target)
}
return {
title: '轉發(fā)dom',
path: `pages/index/index`,
success: function (res) {
// 轉發(fā)成功
console.log("轉發(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) {
// 轉發(fā)失敗
console.log("轉發(fā)失敗:" + 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：github.com/Mr-MengBo/w…
作者：碼農界段子手
鏈接：（干貨）微信小程序轉發(fā)好友-教程-小程序社區(qū)-微信小程序-微信小程序開發(fā)社區(qū)-小程序開發(fā)論壇-微信小程序聯(lián)盟
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權事扭，非商業(yè)轉載請注明出處捎稚。
