uniapp埋点 app/小步调

实现

1 uniapp 路由监听跳转,共同获取当前vue页面实例实现页面停留监控
2 获取当前页面实例并代理指定函数实现函数监控
3 埋点配置文件上传到oss实现在线配置 监控页面/函数
涉及到的uniapp和微信api

实现页面监控

1. //微信小程序监听路由跳转
2. wx.onBeforeAppRoute(page => { }); // 页面跳转前
3. wx.onAppRoute(page => { }); // 页面跳转后
4. //app监听路由跳转
5. uni.addInterceptor(key,{
6. invoke(){
7. //页面跳转前
8. },
9. returnValue(){
10. // 页面跳转后
11. }
12. });
13. //获取当前vue页面实例
14. getCurrentPages()

复制代码

完全可以依靠上面的api联合你们的业务逻辑实现页面监控
注 onBeforeAppRoute 大概会有微信版本不支持 有兼容问题
实现函数监控

主要实现逻辑 是通过监听路由跳转并且获取到当前页面实例，然后劫持监听指定函数。
涉及到的api uniapp的getCurrentPages 和 js的api Proxy

1. let pages = getCurrentPages();
2. //防止重复代理 this[key] key是函数名称 ，this指向当前页面实例  可以在pages中获取pages.$vm
3. if (this[key] && !this[key]?.isProxy) {
4.         this[key] = new Proxy(this[key], {
5.                 get: (target, prop) = >{
6.                         if (prop == 'isProxy') {
7.                                 return true
8.                         } else {
9.                                 return target[prop];
10.                         }
11.                 },
12.                 apply: function(target, thisArg, argumentsList) {
13.                         const result = target.apply(thisArg, argumentsList);
14.                         //监听到函数执行 下面写你的业务代码
15.                         return result;
16.                 }
17.         });
18.         this.$forceUpdate(); // 不能去掉!!! 小程序没问题 但是app你代理之后不会改变的 需要强制刷新一下

复制代码

我自己的在线配置json

我是通过这个文件 联合的上面的代码 在存储埋点数据之前获取一下配置文件 实现具体的业务逻辑 你们可以根据你们自己的业务逻辑自己界说
pageQuery是需要获取页面跳通报的参数 需要获取页面路径并截取 getCurrentPages().$page.fullPath 是当前页面路径

1. {
2.         "pagesGoods/details": { //需要配置的页面路径
3.                 //页面名称
4.                 "urlName": "商品详情",
5.                 // 需要截取并上传的字段 支持字段映射 [['productListId','id']] 将获取到的productListId转为id字段上传
6.                 "pageQuery": ["productListId"],
7.                 //需要劫持监听函数
8.                 "burialPointFns": {
9.                         "loginOut": { //函数名
10.                                 "name": "退出登录" //函数名重命名字段
11.                         }
12.                 }
13.         }
14. }

复制代码

接待参加群一起交流