Skip to content

Latest commit

 

History

History
66 lines (39 loc) · 5.41 KB

taro-track.md

File metadata and controls

66 lines (39 loc) · 5.41 KB
Raw

微信小程序的用户行为上报SDK：taro-track

背景

由于微信小程序的运行环境与web端有许多的差异，目前现有方案无法直接搬到小程序中实现用户行为上报功能。因此启动了此项目，目的是基于taro框架针对微信小程序特有的运行环境实现用户行为数据上报功能，达到直接import我们的sdk指定模块或整个sdk，便可轻松便捷的实现用户行为上报、数据埋点、错误日志上报等功能

环境

  • NODE
    • 12.16.1
  • NPM
    • 6.13.4
  • Taro
    • 👽 Taro v2.1.5

注: 以上为本人运行taro-track时的实验室环境，目前仅针对以上环境进行测试，如需使用本项目，请确定自己的项目是否能够接受以上环境运行，或者如果你有能力，可以基于本项目改造出一个新的库，实现适合自己项目的库。

此外，本项目尚处于试验优化阶段，本人不确保项目的稳定性，目前仅供参考。

研究过程中遇到的问题及解决方案

已实现功能：[×] 未实现功能[ ] 开发中功能[o]

  • [ × ] 微信小程序有自己的异步数据请求方案wx.request，因此，上报通道transporter需根据wx.request进行重构
  • [ × ] 微信小程序除了正常的异步请求之外，还有wx.upload和wx.download两种方式可以实现异步上传于下载文件，也需要对这两个api进行监控
  • [ × ] 若使用Taro框架进行开发，由于Taro中没有使用微信小程序的Page，而是所有页面都使用的是Component,因此在Taro中不能通过代理微信的Page对象实现对Page生命周期的监听。因此，针对这种情况，添加配置项，当用户明确基础框架为Taro时，则采用代理Component的方式来实现对页面组件的监听
  • [ × ] 由于在sdk开发阶段可能进行不断的调试，而我们很多功能都极度依赖微信小程序的运行环境才能运行，如果采用频繁发布npm包的形式不太现实，因此，提供了使用webpack将整个SDK打包成一个taro-track.min.js,我们在开发阶段可以直接在微信小程序中引入这个js调试，测试没问题之后发布npm包后，可以通过安装npm包的形式使用sdk
  • [ × ] 微信小程序没有类似web端的document.documentElement.addEventListener方法可以全局捕获事件进行监听，因此我们选择采用的方案如下：
    • 采用编译的手段，在所有页面的最外层包裹一个wrapper ，并在这个wrapper上绑定带监听事件，当用户触发页面上某个元素的指定事件时，根据元素的class获取元素坐标并判断用户点击或聚焦的位置来定位目标元素，从而获取目标元素的相关信息进行统一事件上报
    • 我们需要获取目标元素的坐标就需要获取页面上的所有元素，在微信小程序中无法通过通配符方式选择所有的标签，因此考虑通过编译的手段，在所有的标签的classList中插入指定的className
  • [ × ] 由于微信小程序中的PerformanceObserver 只有在微信SDK版本为：2.11.0 以上的版本才支持，而目前就算是微信开发者工具，2.11.0都还处于灰度阶段，微信客户端更是不支持，因此无法实现通过PerformanceObserver对图片加载的监听，因此考虑采用以下方案解决：
    • 采用编译手段，通过在image标签插入onload的函数（如image本身已经有了onload函数，则定义一个包装函数进行监听，并在包装函数中调用已经定义的监听函数）

已实现功能

[ × ] 实现一个统一入口entry,导出initDolphin方法可以快速初始化taro-track并使用默认的方案对项目进行监控

[ × ] 在entry中导出initAppletLifecycleListener方法，执行可以快速初始化页面生命周期行为上报处理逻辑

[ × ] 在entry中导出initTransporter方法，根据环境快速创建上报通道，用于在页面自定义事件埋点上报

[ × ] 将于微信有关的api抽离到单独的wx-tools.ts文件中进行二次封装，为以后可能接入百度、头条等小程序时预留跨平台api调度方案

[ × ] 实现自动埋点功能

[ × ] 实现图片资源加载监听

[ × ] 编写一个编译器实现对wxml、wxss和js的注入，实现在Taro编译后对文件的侵入式调整

[ × ] csspath生成md5，并加入到class中，方便通过该class在调试器上定位元素

[ × ] 为了方便定位查找元素，需根据元素位置在页面上生成一个元素定位框，并将页面滚动到该元素所在的位置

     - wx.TaroTrack.showViewBySelector(".md5-71dfd94e5b6be8040bacb4098be239e4");

下阶段目标

  • 对整个SDK整体结构进行进行优化
  • 在真实项目中使用SDK，收集并解决遇到的问题
  • 由于taro给我们传递的抽象语法树没有文档参考，由于时间关系，目前对源码的分析仍停留在使用正则表达式对源代码进行解析，下一步需要对taro的抽象语法树的进行分析并对当前项目进行一定的重构。
  • 基于TaroTrackPlugin，其实我们可以开发出各种各样在编译时对微信小程序源代码进行处理的plugin出来，最后成为一个插件库的生态，开发者可以根据自己的需要不断的扩充新的插件以满足自己的需求，因此，下一阶段要考虑对各种第三方接入插件的兼容。