随着小程序的开发迭代，慢慢的我们会更加关注小程序的质量，今天来讲讲小程序的隐藏功能 -- 体验评分。

为什么需要体验评分

我们多做一点，就可以给用户更好的体验。（窃喜）

当然，做为开发者的我们，动动鼠标点一点就能帮助我们发现问题，是不是很愉快~~

接下来我们来看看怎么使用体验评分？

怎么使用体验评分

体验评分的能力目前开放在【微信开发者工具 - 调试器 - Audits】

操作步骤：运行体验评分 - 一顿操作 - 获取体验报告 - 一顿优化。

（优化其实是一个圈，新代码加上之后也要继续关注哦~）

体验评分实践

我们用《小程序示例》来操作一波看看效果~

01. 运行体验评分

使用开发者工具打开小程序，调试器区域切换到 Audits 面板，就一个“运行”按钮，点它。

02.一顿操作

然后在工具上对小程序进行操作，比如：我点开了 “接口 - 媒体 - 音频 - 播放 ”。

03.获取体验报告

操作完之后，点击“停止”，我们就可以获取到体验报告（简单~）。

拿到报告之后，我们就可以看到总分 98，最佳实践 80。往下拉会有扣分的实际原因。

看第一条是 “发现正在使用废弃接口”，报告已经很清楚的告诉我们使用了废弃组件 audio，我们根据报告进行优化即可。

04.一顿优化

按照报告优化完之后，我们可以继续进行体验评分功能确认优化是否完善。这是一个有用的圈圈⚪⚪⚪

我们来讲几个优化过程中遇到的问题，咳咳咳

• 存在图片没有按原图宽高比显示

在测试预览图片的时候，发现图片被挤了，体验评分告诉我们宽高比有问题，发现是 <image> 使用了默认的 mode （scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）。所以通过添加 mode="aspectFill" （缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。）来解决宽高比的问题。

• 发现固定底部的可点击组件可能不在iPhone X安全区域内

这个问题我们用手机测试是正常的，但是体验评分给了提示，所以就来看看实现方式是不是有问题：

原有方式：通过接口监听systemInfo.model.indexOf('iPhone X') 给 view 添加专属 class

官方推荐：官方推荐的方式是用 wxss 来兼容，不一定只有 iPhone X 下面会有安全区域

• 发现正在使用废弃接口

这个问题对一些老旧代码来说很有用，比如示例很久之前写的 auto-focus，由于基本没有改动，所以代码就一直保持不变。使用体验评分的时候检测到了这个属性是废弃属性，所以我们更换了可用属性 focus 来解决问题。

体验评分总结

使用体验评分进行小程序示例的优化，有以下优点：

• 可以发现代码中使用的废弃api，避免后续踩坑
• 根据实际操作发现相关耗时久的情况，预先发现体验问题
• 合理的视觉/交互检测，提前做好兼容
• 资源使用检测，用合适的资源做好小程序

当然，体验过程中也有不足：

• 开发者工具不支持预览的 组件 / API 暂不支持体验评分（听说官方已经在努力推进啦）

一起体验评分

如果你也在做小程序优化，欢迎使用体验评分来优化哦~

预祝大家都拿 100婚 ！！！

体验评分文档传送门

如果你有疑问，请在下方评论区留言给binnie，㊗️大家都没有bug，✌️✌️✌️