你好,我是李毅。
上节课我们主要学习了图片优化的技巧,这节课我们来学习如何使用小程序助手。
先来看问题(背景)。小程序助手是官方小程序,可以查看当前微信用户的小程序数据,也就是开发者有权限查看的,包括但不限于性能分析。实时日志来自于小程序代码。
实时提交日志信息到微信服务器,小程序后台可以查看提交的结果。虽然实时日志有上传大小、保留期限等限制,但是当产品有新版本上线时,管理员可以通过该功能快速查看新版本发布情况是否正常。如果发现大量异常,可以方便管理员进行版本回滚。下面我们来看看项目实践。
首先我们来看一下练习一,在小程序中查看性能分析。
如上图所示,我们用手机扫描小程序助手的小程序码就可以打开小程序助手,打开之后依次选择当前小程序账号、性能分析页面,如下图所示,里面有概览、启动性能、运行性能、网络性能等标签页,用户设备也分为高端、中端、低端三个档次,对于已经上线的小程序来说,通过这个地方的数据基本上就可以知道性能优化的大致效果。
下面我们演示练习一的代码。
使用自己的开发者微信账号点击扫一扫,然后扫描我们的小程序助手二维码。打开之后我们其实可以在这里切换,然后选择我们当前使用的小程序账号。在下面的数据分析部分有一个性能分析,打开之后可以看到昨天概览、启动性能、运行性能、网络性能等很多标签,还有一些从启动、网络等与内存消耗相关的数据。这些数据对于我们团队中不是开发者的人来说已经足够使用小程序助手了。
接下来我们看做法二,上传实时日志。
实时日志上报到微信后台是通过小程序提供的来实现的。首先我们需要创建一个log.js文件,代码见上屏。在这个文件中实现的获取以及上传相关日志的代码逻辑,然后在app.js文件中引入log.js文件模块,并拦截.log接口,代码见上屏。将原生的.log重定向到日志上报接口,会导致我们原来使用.log输出的测试信息全部上报到微信后台,如上屏所示。我们登录小程序后台之后,可以在后台查看上报的日志信息。实时日志的使用还是要克制一下的,毕竟日志上报也是很占用设备流量的。研发时,团队测试可以用实时日志,开发人员也可以查看测试人员的日志状态。上线前可以注释掉.log重定向代码,或者只上报错误信息。查看实时日志时要注意。 无需上线产品,但开发版在模拟器和客户端微信预览时无法上传日志,只有在手机预览时才会实时上报日志。

我们来演示下面的代码。
在这个目录下我们有一个log.js文件,我们需要这个文件,我们就把它复制到我们当前的项目目录下,放到目录下。我们先来简单看一下这个文件的代码,首先我们像上面这样创建了一个模块变量,它使用wx.r这样的平台接口来获取实时日志管理器,获取到这样一个实例。然后我们在下面的地方保留原来的.log接口,保留方便我们重写这个接口之后再去调用。下面是相关方法的一个实现,我们重点来看info接口,首先我们把我们传入的参数传递给原来的.log方法,这样就可以在本地打印出信息了,同时我们后面调用我们的实例,也就是它的info接口,把信息传递给它,这样我们的日志信息就会实时的上报到微信后端了。还有一件事我们还需要做,就是对原来的.log接口进行拦截,我们需要把这个拦截放到我们的app.js中。
首先这里需要有个引介,引介之后就是对这个方法的重写,我们将这个代码复制过来然后放在我们当前小程序目录的最上层位置就可以了。这样就完成了。然后我们原来所有调用.log的代码就不需要修改了,它会自动调用我们日志管理器里面的方法。代码改好了。接下来我们就可以测试了。测试的时候我们是不能用模拟器进行测试的,在模拟器里面它还有一个MAC端自动预览,或者说是终端自动预览。这个也是不能上报日志的,但是我们可以通过手机进行预览,然后就可以上报日志,测试它的效果。上报之后,我们可以在后端进行查看。接下来我们登录到我们小程序的后端,然后在左侧的导航栏中选择开发、开发管理,然后选择运维中心下面的实时日志。选择这个标签页,这个地方会列出我们目前掌握的一些实时信息。它还支持对微信账号的过滤,功能比较全面。 因为现在还没到这里,但是如果你在手机上预览的话,其实是可以在这里看到实时日志的。我们的代码演示到此结束。
我们来看一下总结,小程序助手不仅可以查看小程序产品的基本性能状况,还可以查看用户数、用户投诉等信息,并且不需要安装,只需要在后台添加相关账号权限,在微信上扫码就可以使用,非常适合团队中的非开发者使用。上传实时日志肯定会消耗用户的带宽,这方面可以进一步优化,一般情况下我们可以选择不上传消息,只上传那些关键的错误信息。另外当用户在4G网络下,不上传也是可以的。
仅当用户处于WiFi网络时才选择上传。
点击查看打开的文档:
这节课就到此结束了,上面的URL是这节课涉及的文档地址,这节课我们主要学习了如何查看小程序助手的性能分析和如何使用日志管理器对象上传实时日志,下一节课我们将会学习如何使用小程序后台的自测速功能。
最后我们来看问题,这里有一个问题需要大家思考,小程序的性能分析数据,不仅仅可以通过小程序助手查看,还可以通过接口调用,在我们自己的后台管理页面中以自定义数据的形式拉取展示。在拉取数据的时候,可能会遇到一个数据
你以前遇到过这样的错误吗?你应该如何解决它?在下一节课中,我们将深入讨论这个问题。