记录H5二次开发添加个推功能

记录H5二次开发添加个推功能：

项目中运用的是h5+app+unipush实现个推功能，比较简陋只有前端代码且目前只实现安卓个推，ios无效果希望各位能够指正

基于 MUI 和 unipush 实现

一、前期准备：

1、在 Hbuidex 中新建一个项目，项目类型选择 h5+app

2、把多余的文件内容删除，仅留 unpackage 文件 把 vue 项目打包生成的dist文件全部复制在新建项目中

3、在 manifest 中配置：

4、在官网新建一个项目，应用名称和包名于hbuilder中保持一致，建立连接，并把相关配置发送给后台服务端建立连接

二、前端代码

1、登录时获取每部手机的 CID 方便指定推送（根据cid）并传给后台服务端

2、在 main.js 中添加代码用于监听通知栏推送消息的点击事件触发跳转，且这里用的

router.push() ，msg 为后台传来的值，通过 query 传参，

// test
// 监听离线点击消息事件
if (window.plus) {
  plusReadys()
} else {
    // document.addEventListener("click", plusReadys)
  document.addEventListener("plusready", plusReadys, false)
}
//  监听消息栏点击消息事件
function plusReadys() {
  plus.push.addEventListener("click", (msg) => {
      var data = JSON.stringify(msg)
      var all = JSON.parse(data)
      var id = all.payload.patrol_id // 文章id
      var type = all.payload.type // 类型
      var project_id = all.payload.project_id // 项目id
      store.commit('HANDLE_SIGN', 1)
      router.push({
        path: all.payload.url,
        query: {
          type: type,
          patrol_id: id,
          project_id: project_id
        }
      })
  },false)
}

3、事件处理

created () {
    // 判断是否有内容传输，有则跳
    this.$route.query.patrol_id && this.test()
  },

// 点击通知栏跳转，触发 test 事件
test() {
      let id = this.$route.query.patrol_id
      let project_id = this.$route.query.project_id
      if (id) {
        this.$api.getsafePatrolDetail(id).then(res => {
          this.lookFun(res.result, project_id, id)
        })
      }
    },