微信小程序ui（微信小程序泛滥的今天）

点击上方头像关注我，每周上午 09:00准时推送，每月不定期赠送技术书籍，小窗口回复“资源”、“测试工具包”领取测试资源。

本文5178字，阅读约需13分钟

小程序（Mini Program），是一种不需要下载安装即可使用的应用，是内嵌在微信APP里面的一款新形态软件。它实现了应用“触手可及”的梦想，用户扫一扫或者搜一搜即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

一

小程序简介

小程序版本类型

小程序分为3种版本类型：开发版，体验版，正式版。

开发版和体验版无需审核，需要给微信号配置权限，通过扫小程序的二维码才能访问。正式版需要通过微信审核流程，也就是说，在开发阶段，产品还未成型开始，无论你想怎么折腾，微信都有办法知道。这可不像在网上找了个框架或是工具，在本地怎么玩都没人知道。微信小程序开发者工具使用之前就要扫码。开发版和体验版的区别，在于开发版小程序的二维码有效期比较短。

项目中，我们一般会准备3套环境。开发版访问测试环境，体验版访问预发布环境，正式版访问生产环境。

前后端分离的技术架构

小程序产品大多采用前后端分离的技术架构。虽说前端也有逻辑处理，更多是为了优化体验做缓存，关键流程和状态流转还是要通过调用后端接口来落地的。接触过前后端分离的Web 或 App 项目的测试人员，在小程序产品的测试中是很容易上手的。

RESTful API，HTTP/HTTPS 协议，Json数据传输，Websocket协议……这些基础知识就是测试人员必修课。还要加强问题的分析和定位能力。发现问题时，需要快速判断是前端，后端，又或是第三方组件的问题。由于小程序产品有不同类型的版本，还需要排除是否不是最新的开发版，是否是多个环境未处理好导致串数据。而快速定位问题，需要依据完备的日志。不光是后端接口日志，前端页面在捕获到特殊的客户端异常时也应该上报。这往往是开发人员容易疏忽的地方。

开发架构和团队情况决定了测试策略。小程序的UI测试更多是让产品和设计人员去做，测试人员需要关注前后端交互，后端接口测试自动化，兼容性测试等工作。诸如前端是否在应该做缓存的地方没有做，而是频繁调用接口，是否影响网络体验。

微信通知服务逻辑

微信内支持服务通知跳转到小程序。没有留意小程序的微信用户，甚至都不太注意服务通知这个名词。其实服务通知已经被大量的社交电商小程序所使用，俨然成为新的营销入口。

微信服务通知，需要小程序传一个 form id 的参数给微信，再根据服务通知模版来向微信用户发送微信服务通知的。然而 form id 不是小程序自行生成的，而是该微信用户在该小程序内操作时，微信产生并返回给小程序的。也就是说，如果用户在小程序页面上操作的时候，小程序前端页面没有把微信提供的 form id 收集下来，并返回给小程序后端，小程序后端是无法发送微信服务通知给用户的。不同的微信用户在小程序内的操作频率不同，form id 的数量也就不同。所以，那些把服务通知方式作为营销入口的小程序们，可真是费了一番脑筋。

小程序兼容性问题

目前小程序不支持直接分享朋友圈，只能分享微信好友。所以很多小程序都采取了“曲线救国”的方式，通过生成带有小程序码的图片，用户可以退出小程序将图片发布到朋友圈。

既然把小程序码作为图片的一部分，就涉及到小程序码的位置，尺寸，还得不影响原有图片的美观，生成的小程序码还需要是可识别的，这需要前端工程师做不同屏幕尺寸的适配。

二

小程序测试点

测试点可以从：功能测试、权限测试、UI测试、兼容性测试、接口测试、网络测试、性能测试等方面去考虑。

功能测试

小程序的功能测试跟APP功能测试，对于功能业务的测试思路及用到的用例设计方法是一样的。根据设计好的各个大类功能模块划分，然后再逐级细化，覆盖到每个功能尽可能全面的测试点。包括业务流程、数据流向、功能入口有效性检查、交互性检查测试。

微信小程序为了提升用户体验，会缓存用户的页面及数据，方便下次调用时直接使用。可能产生的问题：

微信小程序缓存的数据是否和服务器端一致。实际测试时可以先访问页面，然后修改服务器上数据，再回看小程序中页面，看数据是否一致。切换相似的页面，看是否缓存的数据会产生混乱，切换分类的时候，会不会因为缓存导致具体信息不发生变化。

权限测试

未授权微信登录小程序：

1）未授权时，使用一些业务功能的时候，都会弹出提醒‘先授权再操作对应功能’;

2）在提交数据到后台的时候，会提示补充相关身份信息才能提交。

已授权微信登录小程序：

1）授权微信访问小程序，意味着自己的微信账号可被小程序管理方获取；

2）自动以微信的身份行使业务操作权限，比如咨询、支付、数据查询等 。

所能查看的数据和操作的权限都应该是同步一致的，同一微信号在不同手机端登录授权查看数据权限。

UI测试

小程序的页面测试和app的界面测试一样，关注页面展示元素，如菜单、对话框、窗口和其他可视控件的布局、风格，文字是否正确。

页面是否美观，页面交互操作是否友好。操作是否设计频繁、是否易操作。

但注意一点，微信小程序页面层级跳转默认不能超过10次，达到10次就不能跳转了。一般在进行需求设计时，页面跳转尽量在10次以内。有超过跳转10次的应用场景，针对性开发。

兼容性测试

手机系统：在 IOS上，小程序的逻辑代码运行于JavaScriptCore 中，在Android上，这个任务则是交给 X5 内核来完成。所以有条件的话，不仅要覆盖Android和 IOS，包括主流的Android和 IOS品牌也要覆盖，比如华为，小米，iPhone11，iPhoneXR等等。覆盖到最新的试用版和当前流行的主要版本。

微信版本：与微信版本的兼容性问题主要体现在小程序API库的版本上。因为微信小程序SDK的API版本一直都在更新，导致SDK的API有可能有向下的兼容性问题。例如在最新版本小程序SDK上开发的程序不能在低版本的SDK上像预期的那样运行。所以测试微信版本的兼容性之前要先确定小程序使用的库版本在哪些微信版本号上支持。

屏幕大小：微信小程序定义了一个新的尺寸单位rpx(responsive pixel)。它可以适配不同的屏幕大小，但是需要注意一个特殊的尺寸1rpx，因为这个尺寸经常在iphone7p上出现问题。所以，只需要关注一下即可。

接口测试

目前大部分都是微服务的架构，小程序调用的是后台的接口，所以这里的接口测试和平时的接口测试是一样的，但我们需要了解微信小程序提供的接口是什么类型。

1）有接口文档的，参照接口文档进行接口测试。

2）没有接口文档的，使用Charles或Fiddler抓包(同App抓包)。

网络测试

网络测试可参考APP的测试，包括网络切换，3G/4G/5G/wifi的切换；断网测试，以及弱网测试，像弱网场景下超时是否给予合理提醒、丢包是否有重发机制。主要是考察小程序在各种网络状况下的运行情况。

WIFI切至2G/3G/4G/5G；WIFI切至无网；2G/3G/4G/5G切至WIFI；2G/3G/4G/5G切至无网；无网切至2G/3G/4G/5G；无网切至WIFI；

性能测试

小程序调用接口的时候对于服务器端性能。例如并发量多大，服务器是否有影响。小程序本身的性能包括：页面的白屏时间、首屏时间、资源（CPU、流量、电量、内存等）占用、页面渲染时间等等。

三

小程序常见问题

小程序的架构是怎么样的？

小程序的架构：包含View视图层、AppService逻辑层。

View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行。视图层使用WebView渲染，逻辑层使用JSCore运行。视图层和逻辑层通过系统层的JSBridage进行通信。

小程序测试和APP测试的异同点有哪些？

小程序测试和APP测试在功能测试上逻辑一样，主要是理解项目的需求设计等，查看功能模块、业务流程、同一功能不同入口时有效性检查、页面交互性检查、输入输出等逻辑进行测试。不同点包括以下几个方面：

开发方面：小程序开发周期一般在两周左右，需要在公众平台上进行审核，审核周期一般较短；APP的开发周期在一个月左右，APP需要应用商店进行审核，审核周期较长。权限上的区别：微信小程序需要验证是否有微信授权，未授权/授权登录程序，同一微信号不同手机登录查看数据显示情况；APP测试则需要考虑是否可以访问手机通讯录、相册、相机等权限。性能方面：小程序页面可能只会关注响应时间，而APP则还需要关心流量、电量、CPU、GPU、Memory等。兼容方面：小程序是基于浏览器的，所以更倾向于浏览器和电脑硬件，而浏览器的兼容则是一般是选择不同的浏览器内核进行测试（IE、chrome、Firefox）。APP的测试则必须依赖客户端，不仅要看分辨率，屏幕尺寸，还要看设备系统。从测试场景来看：APP是客户端的，则必须测试安装、更新、卸载。除了常规的安装、更新、卸载还要考虑到异常场景。包括安装时的中断、弱网、安装后删除安装文件，小程序是基于浏览器的，所以不必考虑这些。从系统架构来看：小程序测试只要更新了服务器端，客户端就会同步会更新。但是APP端是不能够保证完全一致的，除非用户更新客户端。如果是APP下修改了服务端，意味着客户端用户所使用的核心版本都需要进行回归测试一遍。缓存方面：缓存的作用是提高程序的流畅度、减少网络请求，节省服务器资源，有时候用户会进行清理缓存的情况。APP和小程序都会存在缓存，但小程序最大只有10M的本地缓存，测试时需要考虑清除缓存时强制退出、后台清理、关机等情况。运行流畅度：原生App运行在操作系统中，所有的原生组件可以直接调用GPU进行渲染；小程序运行在微信的进程中，只能通过WebView进行渲染。用HTML+CSS+JS开发，配合微信的解析器最张渲染出来的原生组件的效果，比H5体验上更好。占用空间方面：App 会一直存在手机中占用空间，太多的 App 可能会导致内存不足；小程序因为不需要安装，占用内存空间忽略不计；

小程序的测试点有哪些？

在面试过程中，可能会问到小程序如何测试或者给定一个小程序的功能模块让你设计测试点，我们可以从以下几个方面进行设计。

功能测试：按功能模块测试（根据设计好的各个大类功能模块划分，然后再逐一细化，覆盖到每个功能）、按业务流程测试（把各模块串联起来形成完整的业务流程、同一业务使用每个路径检查）、数据流向、同一功能不同入口有效性检查测试、交互性检查。权限测试：未授权时登入小程序、已授权时登入小程序、同一个账号在不同手机端登入小程序。UI测试：页面元素展示、页面交互。易用性测试：导航、功能入口、上下层级进入&返回、字体图片动态交互效果、操作是否过于繁琐。网络测试：网络切换测试、验证各种网络下是否正常性能测试：页面白屏时间、首屏时间、资源占用、页面渲染时间接口测试：目前大部分都是微服务的架构，小程序调用的是后台的接口，所以这里的接口测试和平时的接口测试是一样的。兼容性测试：操作系统兼容性、屏幕兼容性测试、微信兼容性安全测试：防范隐私泄露、密码加密及传输安全、权限的合理开放、数据库安全、通信安全等。

最后，如果有什么补充的点，欢迎在文末评论区留下你的想法

更多系列文章

敬请期待

我是CoCo，计算机科学与技术专业，深漂大厂互联网民工（女），坐标深圳。5年工作经验，3年持续输出技术文。ITester软件测试小栈（ID：ITestingA），专注于软件测试技术和宝藏干货分享，每周准时更新原创技术文章，每月不定期赠送技术书籍，愿我们在更高处相逢。喜欢记得星标⭐我，每周及时获得最新推送，第三方转载请注明出处。

想获取更多最新干货内容

快来星标 置顶 关注我