了解微信小程序 Taro 的自动埋点（微信小 程序）

了解微信小程序 Taro 的自动埋点（微信小 程序）

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

相关学习推荐：小程序开发教程

现状

在多端统一的Taro中，我们不再能看到显式的 Page 调用，甚至 Taro 打包之后的代码里也不再存在任何 Page 的迹象，取而代之的则是小程序原生的 Component(这一点大家通过观察打包后的内容可以得知)，所以为了实现微信小程序在Taro中的自动埋点，我们需要换一个策略：重写Component。

基本的重写

在微信小程序中，其暴露的Component 和 Page 能够直接被重写并进行赋值：

const _originalComponent = Component;const wrappedComponent = function (options) { ...do something before real Component return _originalComponent(options);}复制代码-

这样可以很快的解决问题，但是当我们在另一个小程序做这件事情的时候，我们就又需要手动做一次这些处理，难免有些麻烦，为什么不找一个更通用的方案，我们只用关注我们需要关注的业务（埋点）就行了呢？

解决方案

重中之重，从零开始思考，掌握真正问题，接近问题本质

根问题

在解决问题之前，不如让我们先看看这个问题的本质是什么。想在小程序中进行自动的埋点，其实要做的就是在小程序指定的生命周期里做一些固定的处理，所以我们自动埋点的问题实际上是如何劫持小程序的生命周期，而要劫持小程序的生命周期，我们需要做的就是去重写options。

如何解决

在解决这个问题之前，我们要把自己需要解决的问题拆分出来：

应该怎么重写 options应该重写哪些 options怎样把自己的业务注入到监听的生命周期中。

我们在上面的基础解决办法对如何重写options就已经有了答案，我们只需要在原小程序提供的方法外再包裹一层即可解决，同时为了保证我们的解决方案能适用于原生小程序和Taro这种多端统一的小程序方案，我们应该同时支持重写Component和Page，而对于最后一个问题，我们可以思考一下js中的事件系统，相似的我们也可以实现一套发布订阅的逻辑，只需要定制触发事件（生命周期）和listeners，再针对生命周期原有逻辑进行包装即可；

step 1

首先我们在重写Component和Page之前应当保存原始的方法，避免原始方法被污染我们无法回退，这之后再去将小程序中的所有生命周期进行枚举生成一个默认的事件对象中，保证我们在注册了对应生命周期的listeners后能通过寻址找到并对原生命周期方法进行重写。

export const ProxyLifecycle = { ON_READY: 'onReady', ON_SHOW: 'onShow', ON_HIDE: 'onHide', ON_LOAD: 'onLoad', ON_UNLOAD: 'onUnload', CREATED: 'created', ATTACHED: 'attached', READY: 'ready', MOVED: 'moved', DETACHED: 'detached', SHOW: 'show', HIDE: 'hide', RESIZE: 'resize',};public constructor() { this.initLifecycleHooks(); this.wechatOriginalPage = getWxPage(); this.wechatOriginalComponent = getWxComponent();}// 初始化所有生命周期的钩子函数private initLifecycleHooks(): void { this.lifecycleHooks = Object.keys(ProxyLifecycle).reduce((res, cur: keyof typeof ProxyLifecycle) => { res[ProxyLifecycle[cur]] = [] as WeappLifecycleHook[]; return res; }, {} as Record);}复制代码-

step 2

public addLifecycleListener(lifeTimeOrLifecycle: string, listener: WeappLifecycleHook): OverrideWechatPage { // 针对指定周期定义Hooks this.lifecycleHooks[lifeTimeOrLifecycle].push(listener); const _Page = this.wechatOriginalPage; const _Component = this.wechatOriginalComponent; const self = this; const wrapMode = this.checkMode(lifeTimeOrLifecycle); const componentNeedWrap = ['component', 'pageLifetimes'].includes(wrapMode); const wrapper = function wrapFunc(options: IOverrideWechatPageInitOptions): string | void { const optionsKey = wrapMode === 'pageLifetimes' ? 'pageLifetimes' : ''; options = self.findHooksAndWrap(lifeTimeOrLifecycle, optionsKey, options); const res = componentNeedWrap ? _Component(options) : _Page(options); options.__router__ = (wrapper as any).__route__ = res; return res; }; (wrapper as any).__route__ = ''; if (componentNeedWrap) { overrideWxComponent(wrapper); } else { overrideWxPage(wrapper); } return this;}/** * 为对应的生命周期重写options * @param proxyLifecycleOrTime 需要拦截的生命周期 * @param optionsKey 需要重写的 optionsKey，此处用于 lifetime 模式 * @param options 需要被重写的 options * @returns {IOverrideWechatPageInitOptions} 被重写的options */private findHooksAndWrap = ( proxyLifecycleOrTime: string, optionsKey = '', options: IOverrideWechatPageInitOptions,): IOverrideWechatPageInitOptions => { let processedOptions = { ...options }; const hooks = this.lifecycleHooks[proxyLifecycleOrTime]; processedOptions = OverrideWechatPage.wrapLifecycleOptions(proxyLifecycleOrTime, hooks, optionsKey, options); return processedOptions;};/** * 重写options * @param lifecycle 需要被重写的生命周期 * @param hooks 为生命周期添加的钩子函数 * @param optionsKey 需要被重写的optionsKey，仅用于 lifetime 模式 * @param options 需要被重写的配置项 * @returns {IOverrideWechatPageInitOptions} 被重写的options */private static wrapLifecycleOptions = ( lifecycle: string, hooks: WeappLifecycleHook[], optionsKey = '', options: IOverrideWechatPageInitOptions,): IOverrideWechatPageInitOptions => { let currentOptions = { ...options }; const originalMethod = optionsKey ? (currentOptions[optionsKey] || {})[lifecycle] : currentOptions[lifecycle]; const runLifecycleHooks = (): void => { hooks.forEach((hook) => { if (currentOptions.__isPage__) { hook(currentOptions); } }); }; const warpMethod = runFunctionWithAop([runLifecycleHooks], originalMethod); currentOptions = optionsKey ? { ...currentOptions, [optionsKey]: { ...options[optionsKey], ...(currentOptions[optionsKey] || {}), [lifecycle]: warpMethod, }, } : { ...currentOptions, [lifecycle]: warpMethod, }; return currentOptions;};复制代码-

经过如上两步，我们就能对指定的生命周期进行劫持并注入我们自己的listeners，使用被重写过Component或者Page就会自动触发这些 listeners。

weapp-lifecycle-hook-plugin

为了方便直接对微信小程序原生环境和Taro等多端统一方案进行这一套通用的解决方案，我实现了一个插件来解决这个问题（私心安利）

安装

npm install weapp-lifecycle-hook-plugin或者yarn add weapp-lifecycle-hook-plugin复制代码-

使用

import OverrideWechatPage, { setupLifecycleListeners, ProxyLifecycle } from 'weapp-lifecycle-hook-plugin';// 供 setupLifecycleListeners 使用的 hook 函数，接受一个参数，为当前组件/页面的optionsfunction simpleReportGoPage(options: any): void { console.log('goPage', options);}// setupListenersclass App extends Component { constructor(props) { super(props); } componentWillMount() { // ... // 手动创建的实例和使用 setupLifecycleListeners 创建的实例不是同一个，所以需要销毁时需要单独对其进行销毁 // 直接调用实例方式 const instance = new OverrideWechatPage(this.config.pages); // 直接调用实例上的 addListener 方法在全局增加监听函数，可链式调用 instance.addLifecycleListener(ProxyLifecycle.SHOW, simpleReportGoPage); // setupListeners 的使用 setupLifecycleListeners(ProxyLifecycle.SHOW, [simpleReportGoPage], this.config.pages); // ... } // ...}复制代码-

只需要通过简单地 setup 就能解决以前需要手动书写一大堆的重写逻辑，何乐而不为呢

想了解更多编程学习，敬请关注php培训栏目！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。