MEngine

Introduction: 使用 Web 技术写 Native 应用，更接近原生体验，简单容易上手，能快速开发小型应用，典型的 Hybrid 应用框架。

Tags:

项目定位：使用 Web 技术写 Native 应用，更接近原生体验，简单容易上手，能快速开发小型应用，典型的 Hybrid 应用框架。

为更接近 Native 应用体验，为此做了一些新的尝试（对比 PhoneGap），突出在 M（Multi） Engine 多引擎上，通过业务逻辑线程分离与多页面同时加载，加快 WebView 的渲染，让应用感觉更接近 Native 体验。

先给个简单总结，多引擎加快页面渲染的技术特点(所谓多引擎指多线程与多 WebView)

UI 与业务线程分离
多 WebView 且同时加载

ps：目前仅支持 Android

1 Hello World

上手只用三分钟

Step 1

创建文件夹，名称自定义（推荐以 bundle 开头），如：bundleHelloWorld

每一个独立的页面属于一个 bundle

在 bundleHelloWorld 中创建 index.html 文件，并写自己的 HTML 代码

说明：每一个 bundle 文件夹包含 index.html（当前 bundle 显示的页面），与 app.js（在异步线程处理业务逻辑的 js 代码，不需要在 index.html 中声明，此文件可以不写）

Step 2

创建 res 文件夹，并放入一张 logo 图片，如 icon.png

Step 3

创建 config.json 文件（复制内容时请先删除注释）

{
  // 页面配置
  "pageConfig":{
    // 配置启动页面
    "splash":{
      "splashIcon":"icon.png",
      "splashBgColor":"#f5f5f5"
    },
    // 配置导航页面（首屏展示的页面）
    "nav":[
      {
        "bundleName":"bundleHelloWorld",
        "navIcon":"icon.png",
        "navName":"首页"
      }
    ]
  },
   // 全局配置（目前只支持标题栏背景颜色与刷新按钮颜色配置）
  "globalConfig":{
    "titleColor": "#000000",
    "refreshColor": "#000000"
  },
    // 页面 bundle 的配置，有多少个页面就有多少个 bundle
  "bundleConfig":[
    {
        // 页面 bundle 的名称
      "bundleName":"bundleHelloWorld",
        // bundle 所在目录名称（必须在 assets 目录下）
      "path":"bundleHelloWorld",
      "lazyInit":"false",
      "enableRefresh":"false"
    }
  ]
}

Step 4

现在的目录结构如下

─┬config.json
 ├res
 │ └icon.png
 └bundleHelloWorld
   └index.html

复制所有文件到到项目的 app/src/main/assets 目录下（先备份 assets 目录下文件，删除后覆盖在此目录下）

这个项目直接使用 Android Studio 打开，最后编译运行 OK。（这个作者比较懒，还没开发出自动打包工具）

项目提供了一个简单的 HelloWorld 可以直接运行，文件在 DemoHelloWorld 中，参考 README.md 里的说明运行。

2 项目介绍

项目定位：更接近原生体验，简单容易上手，能快速开发小型应用。

项目特点

Hybrid 应用
每个 bundle 都是独立页面，拒绝使用单页面应用（现在的手机内存相对较大，可以不再局限单页应用）
每个 bundle 基本包含两个文件：index.html 负责页面渲染（必选），app.js 负责业务逻辑（可选）。
- index.html 只负责 Web 页面的渲染与消息传递，并不负责业务逻辑处理，其工作在 UI 线程（index.html 里 js 的运行会阻塞 UI 渲染）
- app.js 只处理业务逻辑，不能直接进行 UI 交互，其 Runtime 不包含 document 等页面渲染使用的类（app.js 运行在工作线程，不会阻塞 UI 线程渲染）
- 通过将渲染与业务逻辑线程的分离，尽可能的提高渲染效率
所有 WebView 默认在应用启动时创建，打开新页面时不用等待页面加载，加快页面打开速度。如果为内存考虑，可以设置延迟加载（lazyInit），如果设置延迟加载则会在打开时再加载页面，一旦页面加载完成则不会释放
可以使用 Native 自定义的一些 UI 控件，协助 WebView 的操作，比如下拉刷新、首页导航、标题栏与返回导航等
页面返回(关闭页面)后 WebView 并不会被销毁，再次打开时会遗留有上次的数据，所以需要在 finish（页面关闭回调）中做些清理操作，这样做的目的是为了减少 WebView 的重复创建开销