小程序分享设置

小程序的分享相对于微信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的返回值。