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] key是函数名称 ，this指向当前页面实例  可以在pages中获取pages.$vm
if (this[key] && !this[key]?.isProxy) { 
	this[key] = new Proxy(this[key], {
		get: (target, prop) = >{
			if (prop == 'isProxy') {
				return true
			} else {
				return target[prop];
			}
		},
		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": "退出登录" //函数名重命名字段
			}
		}
	}
}

欢迎加入群一起交流 👏