用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-11-7 00:02

需要对小程序的页面访问进行统计,但小程序并没有页面或者路由拦截,如果要重写page或者写mixs函数太麻烦,所以希望有个之后扩展方便,改动成本低的方式进行页面埋点统计。思路埋点页面中的请求方法我们知道在不同页 ...

需要对小程序的页面访问进行统计,但小程序并没有页面或者路由拦截,如果要重写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简直难过,所以一开始听到这个需求是有点想哭的。当任务真砸到头上,还是能想出办法的。怎么说呢,开发原则大概就是,避免去戳页面和糟糕的重复代码,实在要重复,就尽量抽出公共部分把之后更改的时候的工作量降低扒。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 普通人A 来自: 掘金