微信小程序架构篇

一、小程序架构

每个小程序的结构都有两个主要部分构成：主体部分+各个页面。类似于许多框架，主体部分主要用于核心的配置，各个页面主要用于不同业务场景。

1.1、主体部分主要由3个文件构成

1）app.js：小程序逻辑，初始化APP

2）app.json：小程序配置，比如导航、窗口、页面http请求跳转等

3）app.wxss：公共样式配置

主体配置完成之后，就是对应业务开发了，也就是开发者最常 *** 作的页面。小程序页面设计基本上也是遵循MVC结构进行构建。

1.2、页面由4个文件构成

1）js：页面逻辑，相当于控制层（C）；也包括部分的数据（M）

2）wxml：页面结构展示，相当于视图层（V）

3）wxss：页面样式表，纯前端，用于辅助wxml展示

4）json：页面配置，配置一些页面展示的数据，充当部分的模型（M）

二、配置app.json

app.json

全局配置页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar

通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。tabBar配置数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。

networkTimeout

可以设置各种网络请求的超时时间。

debug：true/false

可以在开发者工困埋具中开启debug模式，在开罩早发物尺雀者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的哦诶址比app.json全局配置简单的多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。

文件结构睁闷

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件必填作悉卜弯用

app.js 是小程序逻辑

app.json 是小程序公共设置

app.wxss 否小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型必填作用

js 是页面逻辑

wxml 是页面结构

wxss 否页面样式表

json 否页面配置

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径弊扰与文件名。

1. 小程序：快速创建第一个小程序

2. 小程序：文件结构

3. 小程序：配置

4. 小程序：页面构成

最近几年小程序的生态越来越完善，各家的流量App也都在搭建自己的小程序生态。 抛开小程序的业务生态，单纯从技术的角桥敬度来说，小程序的远程派发和容器化的跨平台的技术实现对本人日常的架构思考和设计有很大的启示作用。

在最近的工作中，我一直思考绝搭着一种客户端容器化架构，让Flutter、Web这两种跨平台的技术实现可以运行在像简化的Docker容器中，原敏宏慎生App提供容器的运行时。

为什么选择实现一个简单的小程序？

架构设计点：

---