微信小程式(三)自定義分享按鈕和原生分享&區分不同按鈕的分享&帶引數分享和獲取
阿新 • • 發佈:2019-02-01
官方的分享
點選右上角的三個點
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function(ops) {
wx.showShareMenu({
withShareTicket: true
})
}
自定義分享
wxml
<button open-type='share'>分享好友</button>
js
/** * 生命週期函式--監聽頁面載入 */ onLoad() { wx.showShareMenu({ // 要求小程式返回分享目標資訊 withShareTicket: true }); },
onShareAppMessage: function(ops) { if (ops.from === 'button') { // 來自頁面內轉發按鈕 console.log(ops.target) } return { title: '標題', imageUrl: `圖片地址注意符號` , desc: '描述', path: `pages/index/index`, //點選分享的圖片進到哪一個頁面 success: function (res) { // 轉發成功 console.log("轉發成功:" + JSON.stringify(res)); }, fail: function (res) { // 轉發失敗 console.log("轉發失敗:" + JSON.stringify(res)); } } }
結果
區分不同按鈕的分享
wxml
<button id='btn' open-type="share" plain='true'></button>
js
onShareAppMessage: function (res) { if (res.from === 'button') { // 來自頁面內轉發按鈕 console.log(res.target.id) console.log(res.from) //區分按鈕分享 if (res.target.id === "btn") { return { title: '求助,下面圖中是什麼菜啊?', path: '/pages/title/title', success: function (res) { // 轉發成功 }, fail: function (res) { // 轉發失敗 } } } } //右上角分享 return { title: '標題', path: `pages/index/index`, imageUrl: ``, success: function (res) { // 轉發成功 console.log("轉發成功:" + JSON.stringify(res)); }, fail: function (res) { // 轉發失敗 console.log("轉發失敗:" + JSON.stringify(res)); } } }
帶引數分享&轉發和獲取
onShareAppMessage: function (res) {
//右上角分享 this.data.id取得data裡面的資料
return {
title: '標題',
path: `pages/index/index?id=`+ this.data.id,
imageUrl: ``,
success: function (res) {
// 轉發成功
console.log("轉發成功:" + JSON.stringify(res));
},
fail: function (res) {
// 轉發失敗
console.log("轉發失敗:" + JSON.stringify(res));
}
}
}
注意除錯的時候在手機開啟除錯 頁面(自己分享自己點選)
因為是直接跳轉到index頁面所以在index.js頁面獲取
onLoad: function (options) {
//列印獲取的資料
console.log(options.id)
},
檢查是否分享成功並指定群和個人的分享
onShareAppMessage: function () {
//轉發時攜帶 shareTicket才能在回撥中獲取到shareTickets
wx.showShareMenu({
withShareTicket: true
})
return {
title: '轉發時顯示的標題',
path: '轉發的頁面路徑',
success:function(res) {
console.log('--- 轉發回撥 ---', res);
//onShareAppMessage回撥的shareTickets,如果沒有,就說明不是轉發到群聊的
console.log('--- shareTickets ---', res.shareTickets);
//轉發到群裡的才會有shareTickets
if(res.shareTickets && res.shareTickets[0]) {
//獲取轉發的詳細資訊
wx.getShareInfo({
shareTicket: res.shareTickets[0],
success:function(res) {
},
fail:function(error){
}
})
}
},
fail:function (error){
}
}
}