美文网首页工作总结
uniapp 微信小程序、支付宝小程序 转发给好友、分享到朋友圈

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

作者: 轩轩小王子 | 来源:发表于2022-05-17 19:34 被阅读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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/immhurtx.html