了解微信小程序太郎的自动追踪点

当您开展各种业务时，您不可避免地需要在业务中嵌入积分。 这些埋点通常包括但不限于暴露。 、点击次数、花费时间、页面退出等场景。 小程序的架构与浏览器不同，导致页面监控更加困难。 通常，您将重写 Page 方法来实现小程序的原生生命周期。 窃听特工毁掉了生意，但对于太郎来说，一切都不同了。

现状

在多终端统一的Taro中，已经看不到显式的Page调用了。 Taro 打包后的代码不再包含 Page 符号。 相反，它是小程序的原生组件（通过观察打包的内容可以看到），所以你需要改变你的策略来实现微信小程序在 Taro 中的自动嵌入。 重写组件。

基础重写

微信小程序可以直接对发布的组件和页面进行重写和赋值。

const _originalComponent = Component;const WrappedComponent = function (options) { ..在实际组件 return _originalComponent(options);} 之前做一些事情

现在问题立即得到解决，但是如果您愿意的话要在另一个小程序中运行它，您必须再次手动运行它。 处理起来很麻烦。 为什么不寻找更通用的解决方案，只关注需要关注的业务（隐藏点）？

解决根本问题

在解决问题之前，我们先看看问题的本质。 如果你想在小程序中自动嵌入点，你只需要在小程序指定的生命周期中进行一些处理即可。 所以我们的自动嵌入问题实际上变成了如何劫持小程序的生命周期。 劫持小程序生命周期好吧，您所需要做的就是重写选项。

解决方案

在解决这个问题之前，需要隔离出需要解决的问题。

我们应该如何重写选项？我们应该重写哪些选项？如何在生命周期中将我们的业务注入到监听器中。

上面的基本解决方案已经给出了如何重写选项的答案。 要解决这个问题，您可以简单地在原始小程序提供的方法之外再包装一层。 同时，我们需要同时支持组件和页面重写，以保证我们的方案适用于原生For小程序和Taro多端一体化小程序解决方案。 对于你的最后一个问题，你可以思考一下js中的事件系统。 同样，您也可以实现发布和订阅集。 至于逻辑，你只需要自定义触发事件（生命周期）和监听器即可。 然后对生命周期的原始逻辑进行封装。

步骤1

首先，您需要在重写之前保存原始方法。 组件和页面。 现在已经没有回头路了，以免玷污了原来的方法。 然后枚举小程序中的所有生命周期，并生成一个默认的事件对象，以保证注册了生命周期对应的监听器后，能够通过寻址找到监听器。 重写原来的生命周期方法。

export const ProxyLifecycle = { ON_READY: 'onReady', ON_SHOW: 'onShow', ON_HIDE: 'onHide', ON_LOAD: 'onLoad', ON_UNLOAD: 'onUnload', CREATED: '创建', ATTACHED: '附加'公共构造函数（）{ this.initLifCycle hook(); 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[]; }, {} as Record);}复制代码 步骤 2

In这一步你只需要听。 在第一步中声明的事件对象中添加一个函数并执行重写过程。

public addLifecycleListener(lifeTimeOrLifecycle: string,listener: WeappLifecycleHook): OverrideWechatPage { // 为指定周期定义一个钩子 this.lifecycleHooks[lifeTimeOrLifecycle ].push(listener); const _Page = this.wechatOriginalPage; .wechatOriginalComponent; const self = this; const WrapMode = this.checkMode(lifeTimeOrLifecycle);tcomponentNeedWrap = ['component', 'pageLifetimes'].includes(wrapMode); constwrapper = function WrapFunc(options: IOverrideWechatPageInitOptions): string | void { const optionsKey = WrapMode === 'pageLifetimes' : '' ; options = self.findHooksAndWrap(lifeTimeOrLifecycle, optionsKey, options); const res = componentNeedWrap ? _component(可选) : _page(可选); options.__router__ = (可选包装器).__route__ = res; }; (任何包装器).__route__ = ''; if (componentNeedWrap) { overrideWxComponent(wrapper); } else { overrideWxPage(wrapper); } return this;}/** * 必须拦截相应的生命周期重写选项Lifecycle * @param optionsKey optionsKey 必须被覆盖，并在生命周期模式下使用 * @param options 必需的选项覆盖 * @returns {IOverrideWechatPageInitOptions} 覆盖选项 */private findHooksAndWrap = ( proxyLifecycleOrTime: string, optionsKey = '', options: IOverrideWechatPageInitOptions,): IOverrideWechatPageInitOptions => { let requestOptions = { ...options }; const hooks = this.lifecycleHooks[proxyLifecycleOrTime ] ; options = OverrideWechatPage.wrapLifecycleOptions(proxyLifecycleOrTime, hook, optionsKey, options); return requestOptions;};/** * 覆盖 options * @paramlifecycle 需要重写的生命周期 * @param hook 添加到生命周期 Function 的钩子 * @ param optionsKey 必须重写的选项键，仅在生命周期模式下使用 * @param 必须重写的可选配置项 * @returns {IOverrideWechatPageInitOptions} 需要重写的选项 */private static WrapLifecycleOptions = (lifecycle: string, hooks: WeappLifecycleHook[] , optionsKey = '', 选项: IOverrideWechatPageInitOptions,): IOverrideWechatPageInitOptions => { let currentOptions = { ...options }; constoriginalMethod = optionsKey ? (currentOptions[optionsKey] || {})[lifecycle] : currentOptions[lifecycle]; const runLifecycleHooks = (): void => { hook . forEach((hook) => { if (currentOptions.__isPage__) { hook(currentOptions); } }); const warpMethod = runFunctionWithAop([runLifecycleHooks],originalMethod); currentOptions = optionsKey ? , }; return currentOptions;};复制代码

经过上述两步，你就可以劫持指定的生命周期并注入你自己的监听器了。 自动使用重写的组件或页面自动触发这些监听器。

weapp-lifecycle-hook-plugin

为了方便直接实现微信小程序原生环境和Taro等多终端集成方案的通用方案，我们实现了这个解决问题的插件（自利）

安装 npm install weapp-lifecycle-hook-plugin 或 Yarn add weapp-lifecycle-hook-plugin 。 复制代码，导入 OverrideWechatPage, { setupLifecycleListeners, ProxyLifecycle } from 'weapp-lifecycle-hook-plugin';// setupLifecycleListeners 使用的钩子函数接受一个参数，当前是可选函数。 组件/页面 simpleReportGoPage(options: any): void { console.log('goPage', options);}// setupListenersclass App extends Component { constructor(props) { super(props); // .. . // 手动创建的实例和使用 setupLifecycleListener 创建的实例不一样，所以如果需要销毁，必须单独销毁 // 直接调用实例方法 const instance = new OverrideWechatPage(this.config.pages); //通过直接调用实例的addListener方法来全局添加监听函数。Chainable 调用 instance.addLifecycleListener(ProxyLifecycle.SHOW, simpleReportGoPage); // 使用 setupListeners setupLifecycleListeners(ProxyLifecycle.SHOW, [simpleReportGoPage], this.config.pages); >一个简单的设置就解决了很多以前必须手动编写的重写逻辑。

下载微信应用

微信是一款移动通讯软件，支持通过手机网络发送语音消息、视频、照片和文字。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 当时微信小程序模仿了网易云音乐的实时搜索功能（微信小程序歌曲播放列表）。
• 实用---微信小程序Webpack工程考察（微信小程序开发工具需要哪些步骤？）
• 如何为微信小程序设置页面(如何为微信小程序设置页面背景)
• 为什么我开发微信小程序只使用upData？
• 微信小程序开发笔记，收藏！！(微信小程序笔记怎么做)

本文由主机参考刊发，转载请注明：了解微信小程序太郎的自动追踪点 https://zhujicankao.com/123199.html