uni-app（右上角菜单）分享好友和朋友圈

2022-08-11 14:00:17 阅读：191 来源： 互联网

标签：title shareData res app 朋友圈 path uni 分享页面

封装：根目录下新建文件mixins/share.js

export const shareMixins = {
    data() {
        return {
            shareData: {
                title: '',
                path: '/pages/index/index',
                imageUrl: '',
                content: '',
                desc: '',
            },
        }
    },

    //#ifdef MP-WEIXIN
    onShareAppMessage(res) {
        console.log('onShareAppMessage_res',res);
        if (res.from === 'button') {// 来自页面内分享按钮
        　　console.log('分享参数',res.target)
        uni.showToast({
            title:JSON.stringify(res.target),
            icon:"none",
            duration:200000000
        })
        }
        return {
            title: this.shareData.title,
            path: this.shareData.path,
            imageUrl: this.shareData.imageUrl,
            content: this.shareData.content,
            desc: this.shareData.desc,
            user_id: this.shareData.user_id,
            success: res => {
            }
        }
    },
    //#endif
    /* 分享到微信好友 */
    onShareAppMessage(res) {
        let _this = this;
        console.log('onShareAppMessage_res==',res);
        const promise = new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    title: _this.shareData.title,
                    path: _this.shareData.path,
                })
            }, 2000)
        })
        return {
            title: this.shareData.title,
            path: '',
            promise
        }
    },
    
    // 分享到朋友圈-这里封装不够，在页面还要声明一次，否则是拿不到参数的，被分享者在朋友圈打开链接是空的
    onShareTimeline: function() {
        return {
            title:  this.shareData.title,
            query: '001',
            imageUrl: this.shareData.imageUrl,
        }
    },
    onl oad() {
        let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
        let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由(分销思路，分享者点开使用的小程序将获取到分享者的id)
        let _userInfo = this.checkLogin();
        if(_userInfo.id){
            this.shareData.path= currentRoute + '?isShare=true' + '&userId='+_userInfo.id;
        }else{
            this.shareData.path= currentRoute + '?isShare=true';
        }
    },
    methods:{
        
    }
}

使用：直接应用封装好的share

demo.vue页面

import {
        shareMixins
    } from '@/mixins/share'

data(){

shareData:{
　　path:'' // 分享的路径需要带上参数，否则当被分享者打开这个链接将无法看到这个页面的数据
}


},

onload(){
 　　this.shareData.path = this.shareData.path + '&id='+option.id + '&type='+option.type;  //参数直接拼接即可
}

// 分享到朋友圈-页面再声明一次，并且赋值title，否则朋友圈点开链接没有参数，页面是空的
        onShareTimeline: function() {
            return {
                title:  this.shareData.title,
                imageUrl: this.shareData.imageUrl,
            }
        },

分享好友只需要封装一次，拼接分享链接即可，若是再声明一次则没办法截取当前页面，分享的时候也是空的--左边的图是页面也加上分享好友的效果，右边图是只封装一次，页面不加分享好友代码的效果。

标签：title,shareData,res,app,朋友圈,path,uni,分享,页面
来源： https://www.cnblogs.com/LindaBlog/p/16575792.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uni-app（右上角菜单）分享好友和朋友圈