欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 11:38:01
背景(1)Why:小程序普及率高、提供用户活跃度;(2)What:小程序是什么、具备哪些能力;(3)How:小程序架构、测试注意点;小程序是什么小程序是基于WEB规范,采用HTML、CSS和JS等搭建的一套框架。小程序架构小程序有哪些能力提供了一系列基础组件如:容器、表单、多媒体、地图、Canvas及web-view封装了基于native应用的API接口网络请求(http\websocket)多媒体(图片、音频、视频)文件、数据缓存、位置、调试等API...

背景

(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