微信小程序——（二）架构分析

2. 架构分析

作者简介：大家好，我是董哥，嵌入式领域新星创作者。
支持我：关注✨+点赞+收藏⭐️+留言

 

2.1 文件类型

1. .json 后缀的 JSON 配置文件，JSON扮演的静态配置的角色
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

 

2.2 工程分析

2.2.1 json文件

• app.json：小程序的全局配置，包括小程序的所有页面路径，界面表现，底部Tab，网络超时等属性设置。

  • pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

  • window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

  • 配置查询地址、配置模板

• project.config.json：微信小程序开发工具的配置文件，小程序开发者工具的配置属性信息。

  • 配置查询地址

• page.json：内部页面属性配置，也就是页面的局部配置设置。

  • 配置查询地址

• json语法：JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

  • 数字，包含浮点数和整数

  • 字符串，需要包裹在双引号中

  • Bool值，true 或者 false

  • 数组，需要包裹在方括号中 []

  • 对象，需要包裹在大括号中 {}

  • Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

 

2.2.2 wxml分析

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

其中 WXML 充当的就是类似 HTML 的角色， 但是也有一些不同的地方：

• 标签名字不同：HTML中常用div、p、span等标签，而微信小程序对其进一步包装，提供view、text、button等
• 支持采用{{}}数据绑定，列表渲染，
• 语法文档

 

2.2.3 wxss分析

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

• 新增了尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
• 提供了全局的样式和局部样式，通过wxss嵌套来设置全局和局部
• 框架组件上支持使用 style、class 属性来控制组件的样式。
• 语法参考

 

2.2.4 JS分析

JavaScript文件，通过前端出发事件信息，通知JS逻辑层处理，负责页面展示、用户交互、API调用等功能。

• 事件信息
• API示例、API查询

 

2.3 工作原理

宿主环境：指的是微信客户端提供给小程序的环境。

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发。

微信打开小程序之前，会把整个小程序的代码包下载到本地，紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行。

整个小程序只有一个 App 实例，是全部页面共享的。

 

然后，微信客户端根据页面的json文件，配置一个页面，页面的属性可以在该文件中设置好，紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式，最后客户端会装载 js文件。

Follow Donge…