Vue活动记录

[violet0sea]

1.分享组件之前都是写在各个page下面的，由于业务多次遇到，所以提取至app.vue顶层组件,使用bus自定义事件来触发显示

2.router.beforeEach(to, from ,next)可以根据逻辑控制页面路由跳转时十分有用，但在处理页面路由刷新的进入时无效，在顶层app.vue使用beforeCreate方法做逻辑判定。做到重定向！！！

3.为了保证全局共享的属性，尤其是通过接口返回的异步数据做到哦啊哥哥页面间共享，需要让初始化的接口返回后再去渲染app，涉及到异步接口执行先后的问题

[violet0sea]

vue bus 监听自定义事件时没有在beforeDestory前消除导致每次页面回退后请求+1

[violet0sea]

Vue里常常需要共享一些数据和方法，这事可以使用Vue.use()方法将其添加到Vue.prototype上

@已eventBus为例：

const eventBus = {
    install(Vue) {
        Vue.prototype.$bus = new Vue();
    }
};

Vue.use(eventBus);

使用是直接this.$bus.$emit('eventName')；

添加全局属性

const appInfo = {
    install(Vue, options) {
        Vue.prototype.$appInfo = options;
    }
};

Vue.use(appInfo, {
    deviceId: 100,
    name: 'teet',
    renamed: true,
    appVersionName: '1.17.3'
});

[violet0sea]

活动图+用户名字 生成新的图片 并实现分享，思路 1.构造用户名+活动图的展示区域，由于名字是根据用户变化导致展示结果不同 2.使用html2canvas将展示区域转变为canvas 3.使用canvas相关方法将其转化为base64 or Blob对象，本次使用Blob对象，why？服务端可以复用之前的接口 4.使用FormData的append方法读取为formdata的形式

      // TODO 获取需要上传的div区域
      const uploadDiv = document.querySelector('#app')

      html2canvas(uploadDiv).then(function(canvas) {
        canvas.toBlob(blob => {
          console.log(blob)
          const formData = new FormData()
          formData.append('file', blob)
          // TODO replace the real url
          // axios.post(<url>, formData) 
        })
      });