做个优秀的小程序 - 体验评分
发布于 4 年前 作者 jieyao 1148 次浏览 来自 分享

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

为什么需要体验评分

我们多做一点,就可以给用户更好的体验。(窃喜)

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

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

怎么使用体验评分

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

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

(优化其实是一个圈,新代码加上之后也要继续关注哦~)

体验评分实践

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

01. 运行体验评分

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

02.一顿操作

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

03.获取体验报告

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

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

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

04.一顿优化

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

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

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

在测试预览图片的时候,发现图片被挤了,体验评分告诉我们宽高比有问题,发现是 &lt;image&gt; 使用了默认的 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,✌️✌️✌️


5 回复

学到了 有奖么 哈哈哈嗝

已三连,点赞、收藏加评论。

100婚是什么梗?

默默地点赞、收藏、评论。

回到顶部