uni-app 微信小程序实现“发送给朋友”分享功能

我们在用 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 的全局混入来实现。具体实现方式大家可以自己动动手。

版权属于：瞭月

本文链接：https://www.lervor.com/archives/176/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。