随着小程序的开发迭代,慢慢的我们会更加关注小程序的质量,今天来讲讲小程序的隐藏功能 -- 体验评分。
为什么需要体验评分
我们多做一点,就可以给用户更好的体验。(窃喜)
当然,做为开发者的我们,动动鼠标点一点就能帮助我们发现问题,是不是很愉快~~
接下来我们来看看怎么使用体验评分?
怎么使用体验评分
体验评分的能力目前开放在【微信开发者工具 - 调试器 - Audits】
操作步骤:运行体验评分 - 一顿操作 - 获取体验报告 - 一顿优化。
(优化其实是一个圈,新代码加上之后也要继续关注哦~)
体验评分实践
我们用《小程序示例》来操作一波看看效果~
01. 运行体验评分
使用开发者工具打开小程序,调试器区域切换到 Audits 面板,就一个“运行”按钮,点它。
02.一顿操作
然后在工具上对小程序进行操作,比如:我点开了 “接口 - 媒体 - 音频 - 播放 ”。
03.获取体验报告
操作完之后,点击“停止”,我们就可以获取到体验报告(简单~)。
拿到报告之后,我们就可以看到总分 98,最佳实践 80。往下拉会有扣分的实际原因。
看第一条是 “发现正在使用废弃接口”,报告已经很清楚的告诉我们使用了废弃组件 audio,我们根据报告进行优化即可。
04.一顿优化
按照报告优化完之后,我们可以继续进行体验评分功能确认优化是否完善。这是一个有用的圈圈⚪⚪⚪
我们来讲几个优化过程中遇到的问题,咳咳咳
- 存在图片没有按原图宽高比显示
在测试预览图片的时候,发现图片被挤了,体验评分告诉我们宽高比有问题,发现是 <image> 使用了默认的 mode (<span style="color: rgb(53, 53, 53); font-size: 14px;">scaleToFill:</span>缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素)。所以通过添加 mode="aspectFill" (<span style="color: rgb(53, 53, 53); font-size: 14px;">缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。</span>)来解决宽高比的问题。
- 发现固定底部的可点击组件可能不在iPhone X安全区域内
这个问题我们用手机测试是正常的,但是体验评分给了提示,所以就来看看实现方式是不是有问题:
__原有方式:__通过接口监听systemInfo.model.indexOf(‘iPhone X’) 给 view 添加专属 class
__官方推荐:__官方推荐的方式是用 wxss 来兼容,不一定只有 iPhone X 下面会有安全区域
- 发现正在使用废弃接口
这个问题对一些老旧代码来说很有用,比如示例很久之前写的 auto-focus,由于基本没有改动,所以代码就一直保持不变。使用体验评分的时候检测到了这个属性是废弃属性,所以我们更换了可用属性 focus 来解决问题。
体验评分总结
使用体验评分进行小程序示例的优化,有以下优点:
- 可以发现代码中使用的废弃api,避免后续踩坑
- 根据实际操作发现相关耗时久的情况,预先发现体验问题
- 合理的视觉/交互检测,提前做好兼容
- 资源使用检测,用合适的资源做好小程序
当然,体验过程中也有不足:
- 开发者工具不支持预览的 组件 / API 暂不支持体验评分(听说官方已经在努力推进啦)
一起体验评分
如果你也在做小程序优化,欢迎使用体验评分来优化哦~
预祝大家都拿 100婚 !!!
如果你有疑问,请在下方评论区留言给binnie,㊗️大家都没有bug,✌️✌️✌️