小程序的分享相对于微信H5的分享就很简单了。只要在
page
的onShareAppMessage
方法里面把需要分享的配置返回出下面的数据结构。
{
title: '', // 默认分享,6字 后面变成省略号
imageUrl: '', // 分享封面。必须是URL地址。URL地址记得是否添加了安全域名
path: '/pages/landing/index', // 分享的后,其他用户点击进来的路径
query: { // 分享传递的参数
type: 'share',
}
}
如果是在原生小程序开发下,只要在页面里面加入如下方法
Page({
data: {
},
onShareAppMessage(options) {
if (options && options.from == 'button') {
// 来自页面内的转发按钮
// 页面内的触发分享需要在 wxml文件里面加入 <button open-type="share"></button>
} else {
// 点击微信右上角的分享按钮
}
return {
title: '', // 默认分享,6字 后面变成省略号
imageUrl: '', // 分享封面。必须是URL地址。URL地址记得是否添加了安全域名
path: '/pages/landing/index', // 分享的后,其他用户点击进来的路径
query: { // 分享传递的参数
type: 'share',
}
}
},
// onShareTimeline() {
// // 分享到朋友圈
// return {
// title: ''", // 默认分享
// query: {}, // 分享传递的参数
// imageUrl: "", // 分享封面。
// }
// },
})
小程序在很早以前,就把分享后的
complete
回调方法给抹掉。然而很多项目中,我们都需要小程序的分享完成回调方法。(其实不是分享完成回调,是否真正分享完成我们是监听不到,只能判断用户是否分享成功或者是点击了分享的关闭按钮)好在小程序分分享是唤起一个新的页面,则页面会走onHide
和onShow
的方法。按照分享的流程是这样走的。
- 用户点击按钮的分享或者是右上角的分享
- 小程序调用改页面的
onShareAppMessage
获取到分享的配置。 - 小程序唤起分享的页面。这时候走页面的
onHide
方法。 - 用户分享成功或者取消分享。这时候走页面的
onShow
。
依据这个流程,我们可以写一个伪分享
complete
方法。
let isShareComplete = false;
Page({
onShow() {
if (isShareComplete) {
isShareComplete = false;
this.isShareComplete();
}
},
shareComplete() {
console.log('分享完成');
},
onShareAppMessage() {
isShareComplete = true;
return {
title: "分享标题",
imageUrl: "分享图片",
path: '/pages/landing/index',
query: {
type: 'share',
}
}
}
})
如果是用
uniapp
或者是mpvue
的话,可以用mixin
方法,将分享的方法封装一起,项目中其实很多页面都是需要做分享。具体页面在重写或者修改onShareAppMessage
的返回值。
网友评论