主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
当您开展各种业务时,您不可避免地需要在业务中嵌入积分。 这些埋点通常包括但不限于暴露。 、点击次数、花费时间、页面退出等场景。 小程序的架构与浏览器不同,导致页面监控更加困难。 通常,您将重写 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
评论前必须登录!
注册