mixin注入全局分享

在Vue中具有Mixin 混入属性

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
Vue官方介绍

• 示例

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

看完介绍，就进入正题，如何实现页面的全局注册分享？

此案例使用uni-app进行演示，小程序和Vue同样适用。

• 根目录main.js

• onShareAppMessage(OBJECT)

小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。
用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮；
此事件需要 return 一个Object，用于自定义分享内容。

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

// 条件编译，只有微信小程序的时候执行
// #ifdef MP-WEIXIN
Vue.mixin({
    onLoad() {
        // 挂载个分享对象，供页面具体配置,默认的分享对象。
        this.$share={
            title:'',
            patch:'',
            desc:''
        }
    },
  // 微信小程序点击分享事件
    onShareAppMessage(res) {
        if(res.from==='button')return // 判断分享来自的类型
        return {
            title:this.$share.title,
            content:this.$share.desc
        }
    }
})
// #endif
const app = new Vue({
    ...App
})
app.$mount()

简单配置以后就可以在页面直接使用。

页面使用

    onLoad() {
        this.$share.title='分享标题'
        this.$share.desc="测试分享描述"
    }

分享出去之后

分享截图.png

总结

通过Mixin一步操作就可以实现全局分享的方法，mixin还有更多用法（全局的scoket通讯等等）更多的功能等待大家一起发现。
最后，喜欢文章的别忘记点一下小心心~