微信小程序开发原理与测试注意事项

背景

（1）Why：小程序普及率高、提供用户活跃度；

（2）What：小程序是什么、具备哪些能力；

（3）How：小程序架构、测试注意点；

小程序是什么

小程序是基于WEB规范，采用HTML、CSS和JS等搭建的一套框架。

小程序架构

小程序有哪些能力

提供了一系列基础组件

• 如：容器、表单、多媒体、地图、Canvas及web-view

封装了基于native应用的API接口

• 网络请求（httpwebsocket）
• 多媒体（图片、音频、视频）
• 文件、数据缓存、位置、调试等API

提供了微信庞大的用户接入能力

小程序应用文件结构

小程序打包后结构：

1. 一个入口文件：app.js
2. 一个全局样式：app.wxss
3. 一个全局配置：app.json
4. 页面：pages下，每个页面再按文件夹划分，每个页面4个文件
5. 视图：wxml，wxss
6. 逻辑：js，json（页面配置，不是必须）

小程序打包后的目录结构

1、WAService.js 框架JS库，提供逻辑层基础的API能力

2、WAWebview.js 框架JS库，提供视图层基础的API能力

3、WAConsole.js 框架JS库，控制台

4、app-config.json 小程序完整的配置，包含我们通过app.json里的所有配置，综合了默认配置型

5、app-service.js 应用逻辑代码，全部打包到这个文件

6、page-frame.html 小程序视图的模板文件，所有的页面都使用此加载渲染，且所有的WXML都拆解为JS实现打包到这里

7、pages 所有的页面，主要是处理WXSS转换，使用js插入到header区域。

小程序结构

View视图层

• View层用来渲染页面结构

App Service逻辑层

• 用来逻辑处理、数据请求、接口调用
• 它们在两个进程（两个Webview）里运行
• 视图层和逻辑层通过系统层的JSBridage进行通信
• 逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

小程序开发手册

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

小程序注意事项

审核与发布

版本管理

可以使用小程序开发者助手方便快捷的预览和体验线上版本，体验版本以及开发版本。可以在体验版本中测试。

运营数据

有两种方式可以方便的看到小程序的 运营数据

1. 方法一： 登录 小程序管理后台 - 数据分析 点击相应的 tab 可以看到相关的数据。
2. 方法二： 使用小程序数据助手，在微信中方便的查看运营数据

测试用例设计注意点

1、浏览器适配：iOS与Android浏览器不同；

2、ROM适配：Android不同厂商其浏览器可能不同；

3、分辨率适配：iOS和Android不同机型适配；

4、典型案例分析：可罗列测试过程中的总结；