uniapp埋点 app/小步调
实现1 uniapp 路由监听跳转,共同获取当前vue页面实例实现页面停留监控
2 获取当前页面实例并代理指定函数实现函数监控
3 埋点配置文件上传到oss实现在线配置 监控页面/函数
涉及到的uniapp和微信api
实现页面监控
//微信小程序监听路由跳转
wx.onBeforeAppRoute(page => { }); // 页面跳转前
wx.onAppRoute(page => { }); // 页面跳转后
//app监听路由跳转
uni.addInterceptor(key,{
invoke(){
//页面跳转前
},
returnValue(){
// 页面跳转后
}
});
//获取当前vue页面实例
getCurrentPages()
完全可以依靠上面的api联合你们的业务逻辑实现页面监控
注 onBeforeAppRoute 大概会有微信版本不支持 有兼容问题
实现函数监控
主要实现逻辑 是通过监听路由跳转并且获取到当前页面实例，然后劫持监听指定函数。
涉及到的api uniapp的getCurrentPages 和 js的api Proxy
let pages = getCurrentPages();
//防止重复代理 this key是函数名称 ，this指向当前页面实例可以在pages中获取pages.$vm
if (this && !this?.isProxy) {
this = new Proxy(this, {
get: (target, prop) = >{
if (prop == 'isProxy') {
return true
} else {
return target;
}
},
apply: function(target, thisArg, argumentsList) {
const result = target.apply(thisArg, argumentsList);
//监听到函数执行 下面写你的业务代码
return result;
}
});
this.$forceUpdate(); // 不能去掉!!! 小程序没问题 但是app你代理之后不会改变的 需要强制刷新一下
我自己的在线配置json
我是通过这个文件 联合的上面的代码 在存储埋点数据之前获取一下配置文件 实现具体的业务逻辑 你们可以根据你们自己的业务逻辑自己界说
pageQuery是需要获取页面跳通报的参数 需要获取页面路径并截取 getCurrentPages().$page.fullPath 是当前页面路径
{
"pagesGoods/details": { //需要配置的页面路径
//页面名称
"urlName": "商品详情",
// 需要截取并上传的字段 支持字段映射 [['productListId','id']] 将获取到的productListId转为id字段上传
"pageQuery": ["productListId"],
//需要劫持监听函数
"burialPointFns": {
"loginOut": { //函数名
"name": "退出登录" //函数名重命名字段
}
}
}
}
接待参加群一起交流
页:
[1]