背景
需要对小程序的页面访问进行统计，但小程序并没有页面或者路由拦截，如果要重写page太麻烦，所以希望有个之后扩展方便，改动成本低的方式进行页面埋点统计。
思路
埋点页面中的请求方法
我们知道在不同页面中写入同一功能的代码是件很烦恼的事情，重复的工作量，各个页面间的差异性处理，都很糟心。所以在小程序这资源有限的环境里，我们希望尽量减少这部分的工作量，最好每个页面的功能代码都一样，并且精简。考虑到每个页面的差异可以用路由体现，并且能拿到当前页面的路由参数，于是采用了这个策略。
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实例上，页面中使用就不用引入了。页面深度不同，小程序里引入真的很麻烦。不过这里有个问题，由于countViewer是app实例上的一个方法，而this在实例里的优先级比call、aplly绑定的要高，因此在app.countViewer函数中的this是指向app这个实例的，如要该函数中希望对页面进行操作拓展，将要在方法里增添参数传入当前页面的this。
// app.js
import countViewer from "./utils/countViewer.js"
App({
...
countViewer,
...
})
结尾
好久不更新了，最近正好来了个需求，想想之前刚接手这个小程序的时候想写个路由/页面拦截器，发现网上提供的方法都挺麻烦的，每个页面戳进去改一大段page简直难过，所以一开始听到这个需求是有点想哭的。当任务真砸到头上，还是能想出办法的。怎么说呢，开发原则大概就是，避免去戳页面和糟糕的重复代码，实在要重复，就尽量抽出公共部分把之后更改的时候的工作量降低扒。
