项目定位:使用Web技术写Native应用,更接近原生体验,简单容易上手,能快速开发小型应用,典型的Hybrid应用框架。
为更接近Native应用体验,为此做了一些新的尝试(对比PhoneGap),突出在M(Multi) Engine 多引擎上,通过业务逻辑线程分离与多页面同时加载,加快WebView的渲染,让应用感觉更接近Native体验。
先给个简单总结,多引擎加快页面渲染的技术特点(所谓多引擎指多线程与多WebView)
ps:目前仅支持Android
上手只用三分钟
创建文件夹,名称自定义(推荐以bundle开头),如:bundleHelloWorld
每一个独立的页面属于一个bundle
在bundleHelloWorld中创建index.html文件,并写自己的HTML代码
说明:每一个bundle文件夹包含index.html(当前bundle显示的页面),与app.js(在异步线程处理业务逻辑的js代码,不需要在index.html中声明,此文件可以不写)
创建res文件夹,并放入一张logo图片,如icon.png
创建 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"
}
]
}
现在的目录结构如下
─┬config.json
├res
│ └icon.png
└bundleHelloWorld
└index.html
复制所有文件到到项目的app/src/main/assets目录下(先备份assets目录下文件,删除后覆盖在此目录下)
这个项目直接使用Android Studio打开,最后编译运行OK。(这个作者比较懒,还没开发出自动打包工具)
项目提供了一个简单的HelloWorld可以直接运行,文件在DemoHelloWorld中,参考README.md里的说明运行。
项目定位:更接近原生体验,简单容易上手,能快速开发小型应用。
项目特点
- index.html只负责Web页面的渲染与消息传递,并不负责业务逻辑处理,其工作在UI线程(index.html里js的运行会阻塞UI渲染)
- app.js只处理业务逻辑,不能直接进行UI交互,其Runtime不包含document等页面渲染使用的类(app.js运行在工作线程,不会阻塞UI线程渲染)
- 通过将渲染与业务逻辑线程的分离,尽可能的提高渲染效率
ps:本项目目前还处于初级阶段,以后还会引入更多的特性,使其更接近Native应用。
可以直接安装DemoApk里的包,DemoApk的样例直接使用此框架实现,样例中有详细的使用文档,每个页面都是一个特性的样例,可以直接参考使用。
欢迎大家关注此开源项目,以后还会有更多的新特性加入到此项目。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型