小程序测试

本节对微信小程序开发完成后的测试环境做一些介绍梳理。

# 机型兼容性测试点

• iOS 和 Android 的设备 CSS 宽度在 320 以上，页面能有正常的布局表现，不同机型、不同版本在不同的屏幕上都要做适配兼容；

• 按钮的点击区域要足够，最小点击的区域像素为 44 * 44；

• 页面同屏幕宽度的变化显示更多的内容（手机转 pad），当更宽的屏幕显示页面时，背景的延展区域要平滑，控件需要根据屏幕大小进行自适应放大缩小。

  .background {
    background-image: url('your-background-image-url');
    background-size: 100% 100%;
  }
  

• 背景图、按钮图和图标等在 retina (视网膜) 等高像素密度屏幕中是否模糊，为了避免这种情况，可以采取以下措施：

  1. 使用高分辨率的资源：在制作图片、图标、字体等资源时，应该使用高分辨率的版本，以适应 retina 屏幕。例如，对于图片，可以使用 2x 或 3x 分辨率的版本，对于字体，可以使用矢量图形的版本。
  2. 使用 CSS3 中的图片属性：在设置背景图片或 img 标签的时候，可以使用 CSS3 中的 background-size 属性或者 img 标签的 width 和 height 属性，来控制图片的尺寸和大小。这样可以避免将高分辨率的图片缩小而导致的模糊问题。
  3. 使用像素比例（Pixel Ratio）：在代码中，可以使用像素比例（Pixel Ratio）来动态地加载高分辨率的资源。例如，在 JavaScript 中可以使用 window.devicePixelRatio 属性来获取当前设备的像素比例，然后根据像素比例动态加载相应的资源。
  4. 使用 CSS 中的媒体查询：在 CSS 中，可以使用媒体查询来针对不同的设备或屏幕尺寸设置不同的样式。例如，可以使用 @media 媒体查询来针对 retina 屏幕设置高分辨率的图片或字体。

• 页面打开加载时是否会发生抖动，这可能是因为页面中的资源（如图片、样式等）加载不均衡，导致页面元素先显示出来，然后再根据样式进行调整，从而出现抖动的情况。要解决这个问题，可以采取以下措施：

  1. 避免使用大量的图片或动画：如果页面中使用了大量的图片或动画，会增加页面的加载时间，导致页面出现抖动。可以考虑优化图片大小，减少动画的数量或者使用 CSS3 中的动画属性，减少页面加载时间。
  2. 预加载页面资源：可以在页面加载前，预加载一些重要的资源（如图片、样式等），以减少页面加载时间。
  3. 使用页面骨架屏：页面骨架屏是一种在页面加载时先显示简单的占位符，然后再加载真实内容的技术。这样可以让用户先看到页面的基本结构，减少页面抖动的情况。
  4. 将页面元素的高度固定：在页面布局时，可以将页面元素的高度设置为固定值，避免在加载完后再根据内容调整高度，从而减少页面抖动的情况。
  5. 使用小程序提供的 Page.onLoad 生命周期方法：在 onLoad 方法中，可以进行一些数据的初始化和页面的准备工作，将页面的渲染过程提前，从而减少页面抖动的情况。

• 弹出层是否有垂直水平居中;

• 图标是否完全显示;

# 页面交互测试点

• 检测页面标题规范；
• 检测页面链接是否为空链接，链接跳转是否正确，图片是否显示；
• 检测页面文字是否有超出现象；
• 活动中是否有错别字，如道具名、活动规则和活动时间等；
• 各个弹层是否完整显示；
• 弹出层中山下滑动时，整体页面禁止滑动，防止事件冒泡引起页面也滑动；
• 多个页面轮播一定要反复测试，轮播或者上滑下滑页面表现等；
• 上滑或下滑添加 Loading 加载块；
• 图片未加载出来时一定要有 alt 文字提示；
• 置顶栏或者置底栏在滑动时位置未变化，始终吸附在页面头部或底部；
• iPhone X 等特殊机型齐刘海是否适配；
• 小程序中的部分组件由客户端原生组件，如 camera、input 等，由于原生组件在 WebView 渲染流程之外，因此在使用时有很多限制，在工具上，原生组件使用 Web 组件模拟的，因此很多情况并不能很好地还原真机表现，建议在使用原生组件时尽量在真机上进行调试；
• 页面标题、标题栏背景、底部 tab 栏和组件等是否配置。

# 参考文档

• 《小程序开发原理与实战》
• 微信小程序官方文档open in new window