微信小程序框架分析:开发API特性调查

根据在一个尝试用web技术编程NativeUI的项目中遇到的一些经验和问题，我们尝试参考了微信小程序的开发文档和模拟器，总结了我们看到的一些特性。

本分析是第一版开发工具分析，仅供参考。

整个小程序应用程序由多个页面组成，从页面开始：

Page

分为两层：视图层(WXML(HTML变体)WXSS(CSS变体))和逻辑层(JsCore中运行的JavaScript)。除了画布，逻辑层没有直接操作视图层的API。只能通过模板“数据绑定”来控制视图层

模板

中模板函数类“HTML”的标记语言来描述类似vue、angular等的视图。并通过“指令”加强模板提供大括号样式的“数据绑定”，组织管理为模板提供了独立的范围来定义模板片段供其他模板使用，并且其他WXML文件可以引入到WXML文件中，其中模板功能方面

标签指令

仅提供“循环”和“条件”控制结构的说明：wx:for、wx:if、wx:elif、Wx3360Else

“数据绑定”

。所有逻辑层仅由数据绑定控制，包括所有数据的动画。此外，条件和循环指令中的表达式还需要由数据包装的双大括号作为单向绑定模板进行绑定。您可以使用逻辑层初始化接口指定的数据时传入的数据对象。初始化后，与视图层无关，即更改原始数据对象上的属性永远不会更新到视图层。更新数据需要显式调用setData接口来更新本地更新。也就是说，这次没有设置的数据值将跟随旧值，而不改变视图层的处理，这应该在原生端(而不是js端)完全完成。因此，数据对象不与js环境共享，需要手动调用接口设置来更新一些支持算术表达式、关系表达式、字符串连接表达式、三元表达式的简单表达式，这是像angular和vue这样支持函数/方法调用的用户无法收集/获取的：没有提供像angular和vue这样的双向数据绑定，而是像react这样的方式只通过事件对象接收用户输入。此外，与其他类似的模板增强方案相比，它还增加了更方便的数据重组功能：可以将逻辑层提供的数据进行双大括号重组，形成新的数组或对象，方便

样式

事件

的使用。从逻辑层到视图层的控制完全是通过数据绑定，而从视图层到逻辑层的反馈只是。

视图组件

相当令人印象深刻：组件相当全面。看来我们准备充分，非常重视，真的准备用小程序引起轰动。

本地能力

和视图组件一样全面。

概览/框架

补充将页面组织成完整小程序应用程序：

其他

支持页面级和应用级的WXSS文件通过选择器指示样式，还支持元素内联样式属性，用于更高优先级的覆盖率猜测布局渲染。布局渲染也是基于facebook的css-layout提供基于flex的布局，但在css-layout提供的flex布局的基础上，Text排版结合native提供了一个支持折线/多线的直插环境，从而支持display:内联和display:内联块，如下图所示。