小程序实战:实现一个简单的小程序监控功能（微信小程序监控什么）

本文为大家带来一个实战中的小程序，教大家实现一个简单的小程序监控功能，希望对大家有所帮助！

在此之前，我们的小程序一旦报错，全靠用户的截图反馈，开发者一点点重现。

我以后会想，有没有什么东西可以记录用户的行为，并在小程序报错时自动将用户的操作记录上传到服务器并通知开发者处理？

后来才知道这叫前端监控。

当然，这篇文章比较简单，因为我目前不会也没有参与真实项目的开发。。

这个小程序监控的作用是什么？1）记录用户进入和离开页面的时间；2）监控所有点击事件；3）记录用户的大致操作轨迹。4）云函数调用失败自动上报数据库，提醒开发者处理。

实现用户进出页面记录的新问题又来了。如何为所有事件设置另一个层？

我们先来看一个页面index.js文件。

向Page方法传递一个对象，该对象包含所有事件（单击、滑动、CSS3动画等）。）和生命周期。

因此，我们可以自定义一个方法来替换Page的方法。在这个方法中，我们可以获取传入的对象并对其进行修改，最后记得执行原始页面（Obj）。看看代码结构

代码实际上非常简单。一旦函数被调用，读取缓存。如果数据存在，将当前页面的信息添加到数组元素中。如果数组长度大于10，则删除第一个元素并将数组长度保持为11。

之所以使用计时器是因为如果测试中没有添加计时器，有时会读取不到最新的数据，可以修改旧数据然后赋值，最后重置缓存（因为执行onshow函数时，上一页的onhide函数可能没有完成，在该函数中会修改缓存，因此onshow函数不是最新的缓存，导致信息丢失。)

查看缓存的结果:

1）监控所有点击事件最简单的方法是发布和订阅，但太麻烦了。

2）为页面中的所有事件再添加一个层，事件触发器将有一个参数e，因此只需判断e.type。

看看代码

最后，回到对原始函数的调用，然后看看replaceOld的功能，它是将原始事件包装一次（装饰器模式）。

对页面中的每个函数对执行replace方法。

有什么用？

我们可以看到这个函数对原始方法进行了一次包装，如何包装取决于传入的函数替换。

这个函数最终返回原函数的执行情况，所以包的内容是对函数体中是否为点击事件的判断，如果是，则可以保存数据。

查看缓存的结果:

云函数调用失败自动上报数据库，提醒开发者处理。使用Object.defineProperty（）劫持云函数的调用，多包装一层再返回云函数的调用。

但这里有一点需要注意。调用云函数有两种方法。

1）有一个传入的回调函数，结果在回调函数中获得。

2）没有传入的回调函数正在使用await等待调用结果，我们需要捕获云函数调用的错误。

所以在劫持时直接获得结果并返回一个承诺。

调用微信在云功能中提供的模板消息，自动通知开发者处理，其实很简单。

查看缓存的结果

可能结构有点乱，毕竟第一次写，还没应用到实践中。

。markdown-body pre，。markdown -body pre》code。hljs { color:# 333；background:# f8f8 F8 }。hljs -comment，。hljs -quote { color:# 998；font -style:italic . }。hljs -关键字、。hljs -selector -标记、。hljs -subst { color:# 333；font -weight:700 }。hljs -literal、。hljs-number、。hljs-tag、。hljs-attr、。hljs-template-variable、。hljs -variable { color:teal }。。hljs -doctag、。hljs -string { color:# d14 }。hljs -section、。hljs-selector-id、。hljs -title { color:# 900；font-weight:700}，。hljs-subst{font-weight:400}，。hljs -class。hljs -title，。hljs -type { color:# 458；font -weight:700 }。hljs -属性、。hljs -名称、。hljs -标签{ color:navy；font -weight:400 }。hljs -link，。hljs -regexp { color:# 009926 }。hljs -bullet，。hljs -symbol { color:# 990073 }。hljs -build _ in，。hljs -builtin -name { color:# 0086 B3 }。hljs -meta { color:# 999；字体-重量:700}。hljs -删除{背景:# FDD}。hljs -附加{背景:# DFD}。hlj S-emphasis { font -style:italic }。hljs-strong {font-weight: 700}【相关研究建议:】

以上就是小程序实战:实现一个简单小程序监控功能的细节，更多请关注主机参考其他相关文章！

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：小程序实战:实现一个简单的小程序监控功能（微信小程序监控什么） https://zhujicankao.com/105887.html