小程序页面统计埋点设计思路

背景

须要对小程序的页面访问进行统计，但小程序并无页面或者路由拦截，若是要重写page或者写mixs函数太麻烦，因此但愿有个以后扩展方便，改动成本低的方式进行页面埋点统计。

思路

埋点页面中的请求方法

咱们知道在不一样页面中写入同一功能的代码是件很烦恼的事情，重复的工做量，各个页面间的差别性处理，都很糟心。因此在小程序这资源有限的环境里，咱们但愿尽可能减小这部分的工做量，最好每一个页面的功能代码都同样，而且精。，考虑到每一个页面的差别能够用路由体现，而且能拿到当前页面的路由参数，因而采用了这个策略。

page({
    ...
    onLoad() {
        app.countViewer(this.route) //数据埋点
        ...
    }
    ...
})
复制代码

路由——页面id映射表

后端接口须要格式大概是：

{
    id: 0, // 页面id
    detailId: 255 // 具体业务状况下的id，例如商品的id、广告的id等
}
复制代码

因此咱们须要维护的映射表大概会长这样：

const RouteList = [
    {
      id: 1,
      route: 'page/index/index',
      name: '活动专题',
    },
    {
      id: 2,
      route: 'page/active/inde',
      name: '活动专题',
    },
]
复制代码

封装成个类，构造函数接受当前页的route，和具体的业务id做为参数，并向外提供得到完整RouteList的方法，和当前页面对映信息的方法：

// router.js
class Route {
    RouteList = [
    {
      id: 1,
      route: 'page/index/index',
      name: '活动专题',
    },
    {
      id: 2,
      route: 'page/active/inde',
      name: '活动专题',
    }]
    
    constructor(route, detailId) {
        const currentRoute = this.RouteList.find(item => item.route === route) || {} // 查找符合的当前route的对象， 若是没找到返回空对象，避免报错
        this.page_id = currentRoute.id
        this.page_detail_id = page_detail_id
    }
    
    getRouteList() { // 返回完成对映表
        return RouteList
    }
    
    getData() { // 返回当前对映项
        return {
          page_id: this.page_id,
          page_detail_id: this.page_detail_id
        }
    }
}

module.exports = Route

复制代码

发送方法

// countViewer.js 假设$request是已经封装好的方法

let Router = require('./router.js')

export default function countViewer(router, detailId = 0) { // 给业务id一个默认值
  const app = getApp() // 得到全局的$request封装好的小程序请求
  const params = new Router(router, detailId).getData() //得到当前路由对映的参数信息

  app.$request('countviewer', params)
}

复制代码

并将该方法绑定到全局的app实例上，页面中使用就不用引入了。页面深度不一样，小程序里引入真的很麻烦。

// app.js

import countViewer from "./utils/countViewer.js"

App({
    ...
    countViewer,
    ...
})
复制代码

结尾

很久不更新了，最近正好来了个需求，想一想以前刚接手这个小程序的时候想写个路由/页面拦截器，发现网上提供的方法都挺麻烦的，每一个页面戳进去改一大段page简直难过，因此一开始听到这个需求是有点想哭的。当任务真砸到头上，仍是能想出办法的。怎么说呢，开发原则大概就是，避免去戳页面和糟糕的重复代码，实在要重复，就尽可能抽出公共部分把以后更改的时候的工做量下降扒。