微信小程序算是小程序的鼻祖了，2017年1月9日微信正式上线了小程序。在探究小程序技术架构之前，我们先看看小程序究竟是什么，微信官网对微信小程序的产品定位及功能介绍是： “微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。”
工具/原料
1.微信小程序开发工具
什么是小程序
2.用户角度的小程序下面从用户使用交互角度来看一下小程序：
3.iOS：从小程序独立性角度（小程序与小程序之间，小程序与宿主应用之间切换）来说，BATT 的小程序与招商银行的小程序基本交互相似。 Android：从交互上来看BATT 的小程序都可以看做是独立的应用程序，独立存在于后台（多进程），可以在小程序与小程序之间，小程序与宿主应用之间切换。可以直观的理解为这类小程序为小程序应用。招商银行的的小程序是与宿主应用共存的，也就是在一个进程中，不能在小程序与小程序之间，小程序与宿主应用之间切换。这类小程序可以直观的理解为小程序页面。BATT: 微信，支付宝，头条，百度小程序。由于交互相似，所以并称。所以，从用户使用角度来看，BATT的交互体验更有优势。从对小程序概念的理解来看，各app理解有所差异，但这并不影响功能层面的使用。
平台角度的小程序
4.最早应用小程序的微信为什么会创造出小程序这个东西呢？它到底有什么作用？在我看来，主要目的还是在于管控为目的，使用了多个手段来实现，主要管控在于两个方面：UI管控：以微信为例，微信自己定义了一套DSL，而不是用HTML来开发页面。这样就不能让开发者随意开发，而是在微信的DSL框架中开发。开发者写的DSL具体转换成什么，是通过什么渲染，都是微信平台来决定。基于自定义的这套DSL，可以更好的做代码管控方面的工作，比如：请求白名单，代码扫描等。服务管控：还是以微信为例，微信中的宿主平台提供的服务（比如：支付，微信运动，卡券，发票，用户账号信息等）对于无论是二方使用者还是三方使用者，都有权限管控的需求。目的也是不能让接入的小程序，在没有授权机制的前提下，随意调用微信基础服务。
小程序技术架构
5.基于从用户角度的体验需求，以及平台角度的管控需求，我们来看看BATT系小程序在技术上做了哪些达到了这些目的。渲染流程下图是小程序的渲染流程，里面包含了部分技术选型，后面的部分会提到：
6.主要技术点DSL(Domain-specific language)：在我们聊DSL之前，我们先看看编译代码需要做哪些工作。无论是解释性语言（JS，Ruby，Python）还是编译型语言（Java，C++，C#），都会有一个共同的部分，将源代码解析为AST(抽象语法树)。AST不仅能够以结构化的方式呈现源代码，而且在语义分析中起到关键作用。AST不仅仅应用在解释器和编译器，而且在静态代码分析中也比较常用，比如：我们在重构代码的时候，希望提取出公共模块，以便减少重复代码方便复用。这时我们单纯的用字符串比对的方式会比较片面不能达到效果，这时生成AST就比较有用。另一个应用例子对于我们的DSL设计会比较有借鉴意义：代码转换器。下图是一种语言代码转换为另一种语言代码的主要步骤：
7.源代码先解析成AST，解析之前它是遵循语言规则的文本，解析之后成为与输入文本完全相同的树形结构，这个过程是可逆的。然后再对AST遍历以及替换，这个过程对于前端来说类似于DOM树的生成，最后根据修改后的AST生成编译后的代码。我们以JS为例，用acorn生成的AST，同样我们也可以使用其他的解析器，例如：babylon，esprima等，下面是一个简单的例子（限于篇幅，右侧的AST树没有完全展开，读者可以到astexplorer上生成结果）：
8.由于小程序的渲染容器有可能是Webview容器，原生Native容器，Flutter容器（虽然Flutter也是Native渲染，为了与原生Native区别，这里把它单独出来，下同），所以我们可以借鉴前面的代码转换器的思路，用AST抹平具体渲染容器的区别，下图是DSL转换的整体思路：
9.本文算是介绍了一种小程序渲染架构的一种实现方式，就小程序平台本身来说，还有一些其他的功能和优化点，比如：小程序路由，Debug包加载，埋点统计，虚拟Dom的优化等。文章只是介绍了一些主要流程和技术点，真正做一个完善的小程序平台还是需要很多细节需要考虑的，就小程序开发者的角度来说，也是有优化空间的，比如：骨架屏。做一个小程序平台需要多平台多种技术能力的综合应用才能不断完善，随着新技术的涌现，未来会有更多的技术应用到小程序中。
注意事项
10.微信小程序开发工具
