了解微信小程序Taro的自动嵌入点

在做各种业务时，我们不可避免地需要在业务中埋点，这通常包括但不限于曝光、点击、停留时间、离开页面等场景。但是，在小程序中，由于其架构与浏览器不同，因此更难监控页面。通常，我们会通过重写页面的方法来截取小程序的原始生命周期，从而将点埋在业务中，但在Taro中，这一切都不同。

目前，在多端统一的Taro中，我们已经看不到显式的Page调用，甚至在Taro打包后的代码中没有Page的迹象。相反，它是小程序的原生组件（通过观察打包的内容可以知道），因此为了实现微信小程序在Taro中的自动嵌入，我们需要改变一个策略:重写组件。

基本的重写在微信小程序中，可以直接重写和分配暴露的组件和页面:

const _ original Component = Component；const wrapped component = function（options ）{...在real Component return _ original Component（options）之前做一些事情；复制代码可以快速解决问题，但当我们在另一个小程序中执行时，我们需要再次手动执行这些过程，这是不可避免的。为什么不找到一个更通用的解决方案，只关注我们需要关注的业务（埋藏点）？

解决根源问题在解决问题之前，我们先来看看这个问题的本质。如果你想在小程序中自动埋点，你实际需要做的是在小程序指定的生命周期中做一些固定的处理。因此，自动埋点的问题实际上是如何劫持小程序的生命周期，而要劫持小程序的生命周期，我们需要做的就是重写选项。

如何解决这个问题在解决这个问题之前，我们应该把我们需要解决的问题分开:

如何重写选项，哪些选项应该重写，以及如何将您的业务注入监控的生命周期。我们上面的基本解决方案给出了如何重写选项的答案。我们只需要在原始applet提供的方法之外再包装一层。同时，为了确保我们的解决方案可以应用于原生小程序和Taro这种多端统一的小程序解决方案，我们应该同时支持重写组件和页面。对于最后一个问题，我们可以考虑js中的事件系统。同样，我们也可以实现一套发布和订阅的逻辑，只需定制触发事件（生命周期）和侦听器，然后为生命周期包装原始逻辑；

步骤1首先，我们应该在重写组件和页面之前保存原始方法，以防止原始方法被污染并且我们无法返回。然后，我们将枚举小程序中的所有生命周期以生成一个默认事件对象，以确保我们可以在注册生命周期对应的侦听器后通过寻址找到并重写原始生命周期方法。

export const ProxyLifecycle = { ON _ READY:‘ON READY’，ON _ SHOW:‘ON SHOW’，ON _ HIDE:‘ON HIDE’，ON _ LOAD:‘ON LOAD’，ON _ UNLOAD:‘ON UNLOAD’，CREATED:‘CREATED’，ATTACHED:‘ATTACHED’，READY:‘READY’，MOVED:‘MOVED’，DETACHED:‘DETACHED’，SHOW:‘SHOW’，HIDE:‘HIDE’，RESIZE:‘RESIZE’，}；public constructor（）{ this . initlifecyclehooks（）；this . wechatatoriginalpage = get wx page（）；this . wecatoriginalcomponent = getwx component（）；}//初始化所有生命周期的钩子函数:void {this。生命周期挂钩=对象。密钥（代理生命周期）。reduce（（RES，cur:key of type of ProxyLifecycle）=》{ RES【ProxyLifecycle【cur】】=【】as WeappLifecycleHook【】；返回res}，{}作为记录）；}复制代码步骤2在这一步中，我们只需要将侦听函数放入第一步中声明的事件对象中，然后执行重写过程:

public add life cycle Listener（lifetime cycle:String，Listener:weapplecyclebook）:Override Chatpage {//定义hooks this。生命周期挂钩【生命周期】。推送（侦听器）一段指定的时间；const _ Page = this . wechatoriginalpage；const _ Component = this . wecatoriginalcomponent；const self = thisconst wrap mode = this . check mode（lifeTimeOrLifecycle）；const componentneewrap =【‘component‘，pageLifetimes】。包括（wrap mode）；const wrapper = function wrap func（options:ioverridewechatpagenitoptions）:string | void { const options key = wrap mode = = =‘page lifetings‘？页面生存期“:”；options = self . findhooksandwrap（lifeTimeOrLifecycle，optionsKey，options）；const res = componentNeedWrap？_Component（选项）:_Page（选项）；选项。__router__ =（任何包装）。_ _ route _ _ = res返回res};（任何包装材料）。_ _ route _ _ =““；if（componentneewrap）{ overrideWxComponent（wrapper）；} else { overrideWxPage（wrapper）；}返回此；}/* * *相应生命周期的重写选项* @ param proxylife生命周期时间需要截取* @param optionsKey需要重写。此处用于生存期模式* @param options需要重写的选项* @ returns { ioverridewechatpageoptions }重写的选项*/private findHooksAndWrap =（proxylicycleortme:string，optionsKey =““，options:IOverrideWechatPageInitOptions，）:IOverrideWechatPageInitOptions =》{ let processed options = {...选项}；const hooks = this . life cycle hooks【proxylifecycleortme】；processed options = overridewechatpage . wraplifecycleoptions（proxylifecycleortme，hooks，optionsKey，options）；返回processedOptions};/* * *重写选项* @param lifecycle需要重写的生命周期* @param hooks为生命周期添加的Hook函数* @param optionsKey需要重写的选项Key，仅在生存期模式下使用* @param options需要重写的配置项* @ returns { ioverridewechatpageoptions }重写的选项*/private static wrapLifecycleOptions =（Life Cycle:string，hooks: WeappLifecycleHook【】，options key =‘，options:IOverrideWechatPageInitOptions，）:IOverrideWechatPageInitOptions...选项}；const originalMethod = optionsKey？（currentOptions【options key】| | { }）【生命周期】:current options【生命周期】；const runLifecycleHooks =（）:void =》{ hooks . foreach（（hook）=》{ if（current options。_ _ isPage _ _）{ hook（current options）；} });};const warp method = runFunctionWithAop（【runLifecycleHooks】，original method）；currentOptions = optionsKey？{ ...当前选项，【选项键】:{...选项【optionsKey】，...（current options【options key】| | { }），【life cycle】:warp method，}，} : {...currentOptions，【life cycle】:warp method，}；返回当前选项；};通过以上两步复制代码后，我们可以劫持指定的生命周期并注入我们自己的侦听器。使用重写的组件或页面将自动触发这些侦听器。

Weapp-lifecycle-hook-plugin为了便于将这种通用解决方案直接实现到微信小程序和Taro等多端统一解决方案的原生环境中，我实现了一个插件来解决这个问题（自私的安利）。

安装NPM安装weapp -生命周期-钩子-插件或纱添加weapp -生命周期-钩子-插件复制代码。使用“weapp -life cycles -Hook -Plugin”中的导入覆盖微信页面{ setup life cyclers }；setupLifecycleListeners的hook函数，该函数接受一个参数，该参数是当前组件/页面的选项函数simplereportgopage（options:any）:void { console . log（‘gopage‘，options）；}// setupListenersclass App扩展组件{ constructor（props）{ super（props）；} componentwillmount（）{/...//手动创建的实例与使用setupLifecycleListeners创建的实例不同，因此需要销毁时需要单独销毁//直接调用实例方法const instance = new override chat page（this . config . pages）；//直接调用实例上的addListener方法全局添加一个监听器函数，可以调用instance。addlifecyclelistener（代理生命周期。链中的show，simplereportpage）；//使用设置监听器SetUplife Cyclists（代理生命周期。显示，【simplereportpage】，这个。config . pages）；//...}//...}复制代码可以通过简单的设置setup来解决之前需要手动编写的大量重写逻辑，何乐而不为呢？

以上是了解微信小程序Taro自动嵌入点的详细内容。更多资讯请关注主机参考其他相关文章！

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

• 如何用Taro+Vue3开发小程序？(练习)

本文由主机参考刊发，转载请注明：了解微信小程序Taro的自动嵌入点 https://zhujicankao.com/101182.html