uniapp,通过 mixin 统一设置页面的分享 onShareAppMessage

in Stduy with 0 comment

最近在通过uniapp 写小程序,接口来自 www.alapi.cn 的数据,因为设置分享的话,要每个页面都写一个 onShareAppMessage
这样太麻烦了,就查了下资料,通过 mixins 可以设置一个全局的分享

混入 (mixin)

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

from:https://cn.vuejs.org/v2/guide/mixins.html

代码

创建一个 mixins ,我的文件路径为 : static/js/mixins/base.js

export default{
    data(){
        return {
                       //设置默认的分享参数
            share:{
                title:'ALAPI',
                path:'/pages/index/index',
                imageUrl:'',
                desc:'',
                content:''
            }
        }
    },
    onShareAppMessage(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失败',
                    icon:'none'
                })
            }
        }
    }
}

全局使用, 在 main.js 里面 添加全局的 mixin

import mixin from '@/static/js/mixins/base.js'

Vue.mixin(mixin)

这样设置后,每个页面都会有分享按钮了,在页面的 data 里面设置和 mixin 一样的参数就可以修改分享的参数了

export default {
data(){
        return {
                       //设置默认的分享参数
            share:{
                title:'ALAPI',
                path:'/pages/index/index',
                imageUrl:'',
                desc:'',
                content:''
            }
        }
    },
}
Responses