小程序框架将整个系统划分为视图层和逻辑层,视图层是由框架设计的标签语言WXML(WeiXin Markup Language)和用于描述WXML组件样式的 WXSS(WeiXin Style Sheets)组成,它们的关系就像 HTML 和 CSS 的关系;逻辑层是一套运行在本地 JavaScript引擎的 JavaScript 代码,在此基础上框架实现了一套模块化机制,让每个 JS 文件有独立的作用域和模块化能力,这套模块化机制遵循 CommonJS 规范。
小程序中视图层和逻辑层的交互是通过数据绑定和事件响应实现的,这是一种单向绑定的机制。这套机制需要首先将逻辑层和视图层的数据和事件进行绑定,当需要修改页面时,逻辑层只需要调用特定的 setData方法修改已绑定的数据,这时框架会自动触发 WXML重新渲染,达到逻辑层对视图的控制;当框架接收到用户交互操作时,会根据视图层绑定的事件,执行逻辑层中对应的事件函数,达到逻辑层对视图层的响应。
例如:
app.json
index.wxml
index.js
页面中的数字随着点击次数增加,这种视图层和逻辑层之间相互通信的机制便是小程序的数据绑定和事件响应系统。