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

Alone88

发布于 2020-06-11 11:28:48

3.5K0

发布于 2020-06-11 11:28:48

文章被收录于专栏：Alone88Alone88

小程序 vue uniapp

最近在通过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:''
            }
        }
    },
}

本文由 Alone88 创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间为: Oct 28, 2019 at 04:11 pm

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

面向对象编程