微信小程序教程（第三篇）

小程序架构及实现机制

    小程序并不是 H5 应用，而是更偏向于传统的 CS 架构，它是基于数据驱动的模式，一切皆组件（视图组件）。所以建议在开发小程序时不要以web app的开发思维去思考。

小程序开发语言是独立的一整套开发语言体系，既与Html+CSS+JavaScript一脉相承，而又有所区别，同时提供了各种自有的组件和 API。

• 框架基本都是建立在window、document对象上，但小程序是没有window、document，或者说没有浏览器BOM这个宿主环境。你可以理解为小程序的宿主环境是类似node的宿主环境，而不是浏览器客户端。所以决定了无法使用Dom库，如JQuery。

• 而又并非使用URL访问，而是通过信道服务进行通讯和会话管理，所以它不支持Cookie存储，同时访问不存在跨域问题。

• 不兼容Html标记,而遵循XML语法，而提供自身封装类似的组件与API来实现页面展现。

• 模块化，形式上支持CommonJs，加载引用更像ES6。小程序形式支持CommonJS，通过require加载，跟node、seajs类似。但是通过require加载的是引用的赋值，而不是CommonJS中的值的缓存。

从框架组件设计来看，框架本身采用面向状态的编程方式，组件部分类似redux的设计（实际不是redux实现的）。组件的View在action操作后，只能通过action的业务处理进行更新View。而框架是单向数据绑定，无法自动更新。对于这一类View组件自带action的，建议进行必要再封装。封装可以考虑aop的方式动态的注册&卸载。

对于业务页面的开发，可以将页面视为一个页面组件。在这个页面组件，完成了以下工作：

1. 负责初始化组件state（微信）

2. 负责组合子view组件形成页面效果（开发者）

3. 确定js 与view 匹配的数据（开发者）

4. 负责注册业务逻辑对象提供的业务逻辑方法（开发者）

5. 负责管理业务逻辑对象（开发者）

页面wxml与页面js的通信如下（简化了微信框架的工作）

官方开发文档：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161107

知识储备

1. 基础:HTML+JS+CSS

2. 进阶：React、Vue

3. 语法：Mustache、XML

4. 规范：CommonJS

微信小程序的架构

一个小程序页面包含4个文件：

1.WXML：页面结构  用于创建页面对象，以及处理页面生命周期控制和数据处理

2.JS：页面逻辑  设置当前页面工作时的window的配置

3.WXSS：页面样式 用于定义页面中元素结构，遵循XML语法，不是HTML语法，增加了flex布局

4.JSON：页面配置 用于定义页面样式的，语法遵循CSS语法，扩展了CSS基本用法和长度单位

小程序的实现机制

小程序的开发是基于微信提供的一套应用框架进行开发的。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一套完整的Javascript Api，使得开发者能够非常方便的使用到微信客户端提供的各种基础功能，快速构建一个应用。框架设计如下：

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层之间通过单向数据绑定进行数据传输，使开发者更加聚焦于数据与逻辑上。

信道服务与会话管理的实现

信道服务是基于WebSocket完成的，而会话管理需要完成微信要求的鉴权流程。微信的请求接口 wx.request 并不支持 cookie 传递，所以会话层不能使用传统的 Session 方式。

会话服务和信道服务与服务模块之间的关系

小程序与业务服务器之间通信

信道服务是基于WebSocket实现的具体流程如下：

小程序与业务服务器之间通信流程

建立 WebSocket 连接的过程

会话管理的实现流程与鉴权流程如下：

会话的建立流程

会话的验证流程

参考引用资料：小程序官方，腾讯云，腾讯Bugly，微信小程序club的作者【风潇雨落】

下一篇，小程序开发基本框架及其限制与优化

欢迎关注公众号（hongji8410）和加入QQ群一起交流（522342554）