随着小程序的开发迭代，慢慢的我们会更加关注小程序的质量，今天来讲讲小程序的隐藏功能 -- 体验评分。 为什么需要体验评分 我们多做一点，就可以给用户更好的体验。（窃喜） 当然，做为开发者的我们，动动鼠标点一点就能帮助我们发现问题，是不是很愉快~~ 接下来我们来看看怎么使用体验评分？ 怎么使用体验评分 体验评分的能力目前开放在【微信开发者工具 - 调试器 - 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，✌️✌️✌️