小程序引擎相关资料

[xieyezi]

小程序含义

小程序，开发者基于此开发出来的服务，在各类宿主环境（手机 App、车载系统、IOT 设备等）中，可做到用户无感知安装，即点即用。

双线程模型

• 采用 视图层(View) + 逻辑层(AppService) 的方式实现双线程模型，逻辑层作为一个单独的线程执行 js 代码，控制小程序数据的生成和处理；渲染层使用了 WebView 线程，处理页面的渲染和用户的事件交互行为。

• 视图层和逻辑层通过系统层的 JSBridage 进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

• 视图层(View)

  视图层使用 WebView 渲染，iOS 中使用自带 WKWebView，在 Android 使用 Mobile Chrome 内核的 XWeb 引擎 运行。

• 逻辑层(AppService)

  逻辑层使用在 iOS 中使用自带的 JavaScriptCore 运行，在 Android 中使用 v8 内核 运行。

• 在 开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。

运行逻辑

• 逻辑层

  • 逻辑层就是对开发者所暴露的Api，有App，Page，布局文件，其中的App，Page都是两个函数
  • App()函数的处理：直接创建App对象，全局唯一对象
  • Page()函数的处理：保存到Map中，不会马上构建Page对象，当导航到页面时，才会真正创建Page对象

• 渲染层

  • 使用MVVM框架vue来渲染界面
  • 在编译期间把小程序标签转化为vue框架所支持的标签
  • 为每个小程序页面，创建对应的vue框架下Page组件，PageComponent的template就是page.vxml转译后的内容

• 渲染层与逻辑层交互

  • 渲染层接收用户的交互事件，由统一的函数处理后，通过消息总线传递到逻辑层的Page对象，再调用对应的函数
  • 逻辑层依据用户操作，执行业务操作，修改data数据，通过消息总线传递到渲染层的组件里，San.Page组件会自动更新界面

程序结构

app配置

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page：
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必须	作用
app.js	是	小程序逻辑
app.config.json	是	小程序公共配置
app.vcss	否	小程序公共样式表

页面

一个小程序页面由四个文件组成，如下：

文件	必须	作用
js	是	页面逻辑
json	否	页面配置
vcss	否	页面样式表
vxml	是	页面结构

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

例如：

├── app.js
├── app.config.json
├── app.vcss
├── pages
│   │── index
│   │   ├── index.vxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.vcss
│   └── my
│       ├── my.vxml
│       └── my.js