2.1 总体技术框架

微信小程序总体技术框架分为视图层、逻辑层等几个部分。视图层负责页面结构、样式和数据展示,用WXML、WXSS编写。逻辑层负责业务逻辑、调用API等,用JavaScript编写。视图层和逻辑层类似MVVM(Model-View-ViewModel)模式,逻辑层只需对数据对象进行更新,就可以改变视图层的数据显示。总体技术框架如图2-1所示。

从图2-1可以看出,视图层和逻辑层分离,它们通过数据驱动、事件交互相联系,不直接操作DOM(Document Object Model)。视图层负责渲染页面结构,与逻辑层通过数据和事件进行通信;逻辑层负责逻辑处理、数据请求、接口调用等,并且提供数据给视图层。

同时,从图2-1也可看出,视图层对视图使用Webview渲染,逻辑层由JSCore(iOS)、X5(Android)、nwjs(DevTool)渲染解析。JSBridge架起上层开发与Native(系统层)的桥梁,使小程序可通过API使用原生的功能,且小程序部分组件是由原生组件实现的,从而使小程序有良好的用户体验。

图2-1 微信小程序总体技术框架