全局分享/自定义分享

55 阅读1分钟

share.js

export default {
    data() {
        return {
            // 默认的全局分享内容
            share: {
                title: '',
                path: '/pages/index/index', // 全局分享的路径
                imageUrl: '', // 全局分享的图片(可本地可网络)
            }
        }
    },
    // 定义全局分享
    // 1.发送给朋友
    onShareAppMessage(res) {
        return {
            title: this.share.title,
            path: this.share.path,
            imageUrl: this.share.imageUrl,
        }
    },
    //2.分享到朋友圈
    onShareTimeline(res) {
        return {
            title: this.share.title,
            path: this.share.path,
            imageUrl: this.share.imageUrl,
        }
    },
    onShow() {
        // 微信分享的路径 修改为 当前页面的路径
        let routes = getCurrentPages() // 获取当前打开过的页面路由数组
        if (routes.length > 0) {
            let curRoute = routes[routes.length - 1] // 获取当前页面路由,也就是最后一个打开的页面路由
            this.share.path = curRoute.$page.fullPath
            // console.log('当前分享路径', this.share.path);
        }
    }
}

main.js

// 导入并挂载全局的分享方法
import share from './common/share.js'
Vue.mixin(share)

某个页面自定义分享并携带参数

data() {
    return {
        share: { // 分享配置
            path: '',
        },
        shareCid: '', // 分享传递的参数
    }
},
watch: {
    // 给混入中的分享路径拼接参数
    cid(val) {
        this.share.path = '/subpackage/vidTut/index?cid=' + val
        console.log('携带参数的分享路径', this.share.path);
    }
},
onLoad(options) {
	// 接收分享的参数
    if ('cid' in options) {
        this.shareCid = options.cid
    }
},