前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >全局分享(发送给朋友,分享到朋友圈)

全局分享(发送给朋友,分享到朋友圈)

作者头像
风花一世月
发布2024-03-19 13:35:20
690
发布2024-03-19 13:35:20
举报
文章被收录于专栏:前端前端

1、mpShare.js(uview)

代码语言:javascript
复制
module.exports = {
    onLoad() {
        // 设置默认的转发参数
        this.$u.mpShare = {
            title: 'xxx', // 默认为小程序名称
            path: '/pages/index/welcome', // 默认为当前页面路径
            imageUrl: 'xxx' // 默认为当前页面的截图
        }
    },
    onShareAppMessage() {
        return this.$u.mpShare
    },
    // #ifdef MP-WEIXIN
    onShareTimeline() {
        return this.$u.mpShare
    }
    // #endif
}

2、main.js 引入

代码语言:javascript
复制
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)

原生

1、mpShare.js

代码语言:javascript
复制
export default {
    data(){
        return {
            share:{
                title:'xxx',
                path:'/pages/index/welcome',
                imageUrl:'xxx',
                desc:'',
                content:'',
            }
        }
    },
    //分享到朋友或群
    onShareAppMessage(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失败',
                    icon:'none'
                })
            }
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res) {
                uni.showToast({
                    title: '分享成功'
                })
            },
            fail(res) {
                uni.showToast({
                    title: '分享失败',
                    icon: 'none'
                })
            }
        }
    },
}

2、main.js 引入

代码语言:javascript
复制
import mpShare from "@/static/common/js/wx/mpShare.js"
Vue.mixin(mpShare)

 里面有页面要单独设置,可以直接页面中设置覆盖

代码语言:javascript
复制
export default {
    data() {
        return {
            share:{//分享参数
                title:'分享标题',
                path:'分享地址',
                imageUrl:'分享预览图片',
                desc:'分享详情',
                content:'',
             }
        }
    },
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-07-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档