了解小程序的无痕埋葬点(小程序埋葬点测试)

今天微信小程序开发教程专栏介绍无痕小程序。

背景微信小程序自发布以来，已经从一个小而一次性的定位，变成了一个功能复杂、服务齐全的移动应用。

这样一来，在生产经营中就会出现更多难以定位、不易重现的bug，尤其是我从事银行业务拓展，对稳定性要求极高，否则容易导致客户投诉，甚至造成财务损失。

另外，为了做用户调研，我们需要了解用户是如何使用我们的小程序的，比如路由顺序，点击流等等。

以上所有都需要有一个完整可用的日志来发现和定位生产问题，并跟踪用户行为。

日志类型检查api文档。小程序打印日志有三种方式，简述如下:

控制台:开发测试阶段用于调试。

Wx.getRealtimeLogManager:实时记录用户的操作，官方提供了很好的过滤器，可以准确定位具体日志；每日限额500w，但多份打印会合并成一份报告；最多保存7天。入口

本地日志(wx.getLogManage):客户端的本地日志，可以通过点击“反馈与投诉”或者点击页面中的反馈组件同步到管理台；最大值5m。入口

采集报告和数据脱敏可能需要通过不同的日志定位具体问题，或者结合起来确认用户的行为。

所以我们需要同时上报几种日志，但是对于一些业务敏感的数据，可能不适合上报异地系统(微信服务器)或者保存在客户端本地。我们可以首先降低封装的聚合报告函数中的数据的敏感度。

方法非常简单，遍历日志对象，通过常规匹配对敏感数据进行编码。

脱敏后的实时日志如下:

可以参考我们打包的日志插件@wxa/log。

一般来说，前端日志至少包括:路由切换信息、脚本错误日志、接口请求数据和用户交互信息。

在小程序中，前三者可以通过官方监听接口和封装功能抓取数据并上报。

只有用户交互信息，由于小程序的双线程架构，无法像h5那样直接捕捉文档对象中的用户事件。您只能在每个wxml模板的最外层绑定事件来监视用户行为。

但是仍然没有办法捕获非冒泡事件(比如catchtap)和组件事件(比如getuserinfo)。

而且没有办法捕获所有事件，组件事件也不会冒泡。

劫持采取了不同的方式。能否劫持小程序中的所有事件函数来捕捉事件？当然可以。

微信小程序中的普通事件和组件事件是bindevent或catch{event}或catchevent或catch{event}。你可以用我们定义的钩子替换模板中对应于这种形式的key的所有值。

在钩子函数中捕获并报告事件，然后执行原来绑定的事件，实现类似beforeEevent和afterEvent的事件钩子函数。

Component标识事件对象中未触发事件的组件的详细信息(类似于xpath元数据)。如果页面中有两个组件绑定到同一个事件，我们如何区分用户点击时哪个组件触发了事件？

您可以结合组件名称、id、类和组件的其他信息来构造组件的id。格式是:

event name * tagname # id . class(data)复制代码，例如

& lt按钮id = & quotbtn & quotclass = & quot确认& quotbindtap = & quot提交& quot& gt确认

& lt按钮id = & quotbtn & quotclass = & quot确认& quotbindtap = & quotbeforeTag&quotdata -wxa -劫持= & quotsumbit & quotmark:eleId = & quot；点击*按钮# btn.confirm " & gt确认

从“@ wxa/plugin -bind -jack/runtime & quot；实现拦截函数importbindijackplugin；wxa . use(bindhijkeplugin，{ before tap:function(e){ $ log(& amp；#39;tap事件& amp#39;，e)；}，after AP:function(e){ console . log(& amp；#39;事后补救。#39;，e)；}，之前:函数(e){ //所有事件拦截console . log(&；#39;之前& amp#39;，e)；}，在:function(e){ console . log(& amp；#39;之后& amp#39;，e)；},});应该注意，applet中的一些事件是自动执行的。比如将autoplay设置为true后，组件swiper会以指定的间隔自动执行change事件，需要通过判断来源来排除非用户行为，否则会一直触发hook函数。

实现基于wxa框架，我们以插件的形式拦截所有事件。

Wxa applet框架是指webpack基于tapable event flow构建的编译时插件系统，可以方便地扩展功能。结合wxa编译的hook和htmlprase库，篡改wxml文件的事件函数，生成元素id。可以直接查源代码@ wxa/plugin -bind -劫持。

Wxa小程序框架wxa小程序框架专注于小程序的原生开发，在保留小程序入门简单、开发快速的特点的同时，提供了一系列解决工程和代码重用痛点、提高开发效率、改善开发体验的能力。

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

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：了解小程序的无痕埋葬点(小程序埋葬点测试) https://zhujicankao.com/121408.html