uniapp 微信小程序、支付宝小程序 转发给好友、分享到朋友圈封装

那些你应该知道的事

支付宝小程序 默认每个页面都有分享

微信小程序默认是没有分享的

支付宝小程序 设置imageUrl 无效

分享到朋友圈功能目前只支持安卓，还是beta版 ，并不会真正打开小程序，而是进入一个“小程序单页模式”的页面

页面无登录态，与登录相关的接口，如 wx.login 均不可用；我在项目中就是针对从朋友圈进来的对页面展示做了特殊处理

该封装的优点：

1. 微信小程序 转发给好友、分享到朋友圈 每个页面都要写一次，所以封装成一个minxins 这样需要分享的页面引用一下即可，减少代码冗余

2. 分享内容需要自定义设置哪个，就在用到分享的页面自定义哪个 否则就用默认的

export const shareMixins = {
    data() {
        return {
            // 转发给好友 
            shareAppMsg: {
                title: 'xxx', // 分享标题
                path: '/pages/xxx', // 页面 path，必须是以 / 开头的完整路径
                imageUrl: `xxx`, // 分享图标
                content: '', // 支付宝小程序表现为：吱口令文案
                desc: '' // 支付宝小程序表现为：自定义分享描述 
            },
            // 转发给好友 项目中默认设置的，跟小程序的默认分享可能不同
            defaultShareAppMsg: {
                title: 'xxx',
                path: '/pages/xxx',
                imageUrl: `xxx`, // 分享图标
                content: '',
                desc: '' 
            },
            // 分享到朋友圈 
            shareTimeline: {
                title: 'xxx', // 分享标题
                imageUrl: `xxx`, // 分享图标
                query: 'fromShare=1' // 微信小程序 分享到朋友圈需要这样传参，不是对象 当然你也可以自定义参数
            },
            // 分享到朋友圈 项目中默认设置的，跟小程序的默认分享可能不同
            defaultShareTimeline: {
                title: 'xxx',
                query: 'fromShare=1'
                imageUrl: `xxx`
            }
        }
    },
    onLoad() {
        uni.showShareMenu({
            // 小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
            menus:["shareAppMessage","shareTimeline"] // 不设置默认发送给朋友
        })
    },
    // 转发给好友
    onShareAppMessage () {
        // || 短路操作 前一个如果为true, 后面就不执行 
        return {
            title: this.shareAppMsg.title || this.defaultShareAppMsg.title,
            path: `${this.shareAppMsg.path}` || `${this.defaultShareAppMsg.path}`,
            imageUrl: this.shareAppMsg.imageUrl || this.defaultShareAppMsg.imageUrl,
            content: this.shareAppMsg.content || this.defaultShareAppMsg.content,
            desc: this.shareAppMsg.desc || this.defaultShareAppMsg.desc
        }
    },
    //分享到朋友圈
    onShareTimeline() {
        return {
            title: this.shareTimeline.title || this.defaultShareTimeline.title,
            query: this.shareTimeline.query || this.defaultShareTimeline.query, 
            imageUrl: this.shareTimeline.imageUrl || this.defaultShareTimeline.imageUrl
        }
    }
}

看了这么久，累了吧，关注一下吧

image.png