工作总结

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

2022-05-17  本文已影响0人  轩轩小王子

那些你应该知道的事

支付宝小程序 默认每个页面都有分享
微信小程序默认是没有分享的
支付宝小程序 设置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
上一篇下一篇

猜你喜欢

热点阅读