在Vue中具有Mixin 混入屬性
mixins 選項接收一個混入對象的數(shù)組权均。這些混入對象可以像正常的實例對象一樣包含實例選項纸镊，這些選項將會被合并到最終的選項中暂筝，使用的是和 Vue.extend() 一樣的選項合并邏輯拂共。也就是說紊馏，如果你的混入包含一個 created 鉤子料饥，而創(chuàng)建組件本身也有一個，那么兩個函數(shù)都會被調用朱监。
Mixin 鉤子按照傳入順序依次調用岸啡，并在調用組件自身的鉤子之前被調用。
Vue官方介紹
- 示例
var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin]
})
// => 1
// => 2
看完介紹赫编，就進入正題巡蘸，如何實現(xiàn)頁面的全局注冊分享？
此案例使用uni-app進行演示擂送，小程序和Vue同樣適用悦荒。
- 根目錄main.js
-
onShareAppMessage(OBJECT)
小程序中用戶點擊分享后，在 js 中定義 onShareAppMessage 處理函數(shù)（和 onLoad 等生命周期函數(shù)同級）嘹吨，設置該頁面的分享信息搬味。
用戶點擊分享按鈕的時候會調用。這個分享按鈕可能是小程序右上角原生菜單自帶的分享按鈕蟀拷，也可能是開發(fā)者在頁面中放置的分享按鈕碰纬；
此事件需要 return 一個Object，用于自定義分享內容问芬。
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
// 條件編譯悦析，只有微信小程序的時候執(zhí)行
// #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一步操作就可以實現(xiàn)全局分享的方法，mixin還有更多用法（全局的scoket通訊等等）更多的功能等待大家一起發(fā)現(xiàn)挡鞍。
最后骑歹，喜歡文章的別忘記點一下小心心~
