mixin注入全局分享-CFANZ编程社区

mixin注入全局分享

在Vue中具有Mixin 混入属性

示例

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

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

根目录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="测试分享描述"
    }

分享出去之后

总结

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

0 条评论