我们在用 uni-app 开发微信小程序时,我们有时需要分享功能,uni-app 中只要在需要分享的页面的 js 中定义了 onShareAppMessage(和 onLoad 等生命周期函数同级),就能实现 发送给朋友 微信小程序的分享功能。但是如果每个需要分享的页面都写一个 onShareAppMessage,冗余代码就太多了。本文介绍通过 mixins(混入) 的方式来实现。

如果对 mixins 不了解的,可以先看这篇文章初步了解下:vue 中 mixins 的使用

步骤1:创建一个 mixins 文件(如本例该文件 share.js 存放在在根目录下的文件夹 mixins 中)

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

    //#ifdef MP-WEIXIN
    onShareAppMessage () {
        return {
            title: this.shareData.title,
            path: this.shareData.path,
            imageUrl: this.shareData.imageUrl,
            content: this.shareData.content,
            desc: this.shareData.desc,
            success: res => {
                console.info(res)
            }
        }
    },
    //#endif

    onLoad(option) {
    }
}

步骤2:在需要分享的页面中引入这个 mixins 对象

<template>
    <view></view>
</template>

<script>
import { shareMixins} from '@/mixins/share'
export default {
    mixins: [ shareMixins],
    data() {
        return {
            shareData: {
                title: '我是分享标题',
                path: '/pages/index/index?id=1' // 分享的页面路径
            }
        }
    },
    methods: {
    }
}
</script>

官方文档:onShareAppMessage(OBJECT)

如果你的小程序所有页面都需要用到分享功能,可以通过 mixins 的全局混入来实现。具体实现方式大家可以自己动动手。