weex初体验

功能:使用web技术开发#原生#app

非混合式开发,不是那种内嵌webview的,而是框架解析web语言生成原生组件来构造app 官方文档 http://weex.apache.org/cn/guide/index.html

STEP1. 安装脚手架weex-toolkit,初始化一个空项目

npm install -g weex-toolkit
weex create awesome-app

STEP2. 编译运行原理

  1. weex 打包源代码为 JS bundle 上传到服务端
  2. Android客户端中会运行一个JS引擎来执行JS bundle
  3. 在运行时运行bundle调度客户端的渲染和实现其他各种能力

    Android和iOS下都使用JavaScriptCore内核的JavaScript引擎

STEP3. 渲染机制

Weex 都基于 DOM 模型设计并实现了标准的界面渲染接口供 JavaScript 引擎调用。并且结合 web 标准和 native 的特点和优势实现了一套统一的组件和模块

Weex 区别于传统的基于 WebView 的 hybrid 框架的特点。Weex 采用了 vDOM 机制,在 JavaScript context 中维护页面布局,并通过向移动端发送规范化的渲染指令,在移动端直接通过 iOS 和 Android 的界面框架生成原生的 UI 进行渲染。相比于浏览器通过自己的渲染系统实现渲染的方式,Weex 的方式更好的利用了系统 UI 体系以达到更佳的性能和用户体验。

jungle