<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>最近菜鸟做项目，需要做<strong>简单的数据埋点</strong>，不是企业级的，反正看渡一的视频，企业级特别复杂，包括但不限于：错误收集、点击地方、用户行为……</p> 讯享网
菜鸟的需求就是简单收集一下用户的ip、地址、每个界面的访问时间，而且面向的是全球用户，所以自己简单写了。
这里菜鸟最开始想到的就是高德、腾讯地图这样的平台，里面都是有ip逆向解析的，但是菜鸟一看高德的api，发现不支持国外！！！
讯享网
然后百度虽然支持，但是也不是很准确，最重要的一点是总是提示我跨域了，不知道咋解决！！！
所以菜鸟就在网上找到一个免费且比较准确的
https://ipinfo.io/account/profile
反正电脑不是手机，定位确实不好搞，反正菜鸟感觉定位的地方就是离你最近的转发基站的位置，而不是你本来的位置！
希望有知道可以精确定位的读者可以 指点江山，激扬文字！
这里菜鸟最开始想的是 vue3 的 mixins，发现 vue3 不推荐 mixins，但是可以直接使用组合式 API 的组合式函数，就相当于把mixins当函数提出去，然后需要用到的时候直接引入就行！
讯享网
结果压根不靠谱，这样发送给后端的是跳转后的界面，而不是跳转前的，所以每次都是把上一个界面的访问时间和新跳转的界面发送过去了！！！而且还有一个bug 就是别人不切换界面，那我就不知道别人上一个界面访问了多久，且当别人访问一个界面后，直接点击关闭标签，也无法知道这个界面访问了多久！
接下来一个一个解决！
但是菜鸟一想，不对呀，全部和路由相关，直接写路由里面不好吗？这样写成mixins还要每个界面都这这样引入！
讯享网
注意：
上面的 localStorage.setItem(“lastPageTime”, startTime); 是后续做 解决监听不到关闭网页的问题 的时候加上的！
在app.vue里面加上监听页面关闭事件，这个必须用原生js，vue 的 onBeforeUnmount 根本不能在界面标签关闭时做操作！
讯享网
注意：
1、这里 mainStore.routeObj 和上面的 _routeObj 是同一个东西，但是不能直接在 route/index.js 中使用 pinia，会报错，搜索是因为在 pinia 挂载之前使用了，具体怎么解决不知道！！！望读者 指点江山，激扬文字！！！
2、为什么使用delete event[“returnValue”] ？ 参考：MDN - beforeunload
最近菜鸟看MDN，发现这个 beforeunload、unload 事件并不被推荐了，具体见：
pagehide见：
visibilitychange见：
所以最好是使用 visibilitychange 事件，如果浏览器不支持，才使用 pagehide，所以菜鸟改了代码，但是没对pagehide做兼容，大家可以自行加上，修改后的代码为：
DataburialpointApi代码
讯享网
关于 navigator.sendBeacon 这里菜鸟介绍一下
到这里，菜鸟的需求就结束了，但是菜鸟拓展了一下，其实这个也很简单，就是每个按钮点击请求的时候，让后端统计一下，或者前端请求一下后端的某个接口就行！当然如果能直接封装成 自定义指令 就最好了！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/200237.html