在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通讯等等）更多的功能等待大家一起发现。
最后，喜欢文章的别忘记点一下小心心~
