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

2022-08-08,,,,

背景

(1)Why:小程序普及率高、提供用户活跃度;

(2)What:小程序是什么、具备哪些能力;

(3)How:小程序架构、测试注意点;

小程序是什么

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

小程序架构

小程序有哪些能力

提供了一系列基础组件

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

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

  • 网络请求(http\websocket)
  • 多媒体(图片、音频、视频)
  • 文件、数据缓存、位置、调试等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、典型案例分析:可罗列测试过程中的总结;

本文地址:https://blog.csdn.net/jlhx123456/article/details/107190084

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

下载本文的Word格式文档,以方便收藏与打印。