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

 

 

封装：根目录下新建文件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,
        }
    },
    onLoad() {
        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,
            }
        },

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