WEEX

简介

Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。

Weex 是阿里巴巴出的一款跨端框架，致力于让开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

Weex 并不强依赖任何特定的前端框架。目前 Vue 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。

demo

WEEX 的优点

1. 支持三端（iOS/Android/H5)
2. 运用了Web的技术，像CSS、JS等, 可以使用 JavaScript 语言和前端开发经验来开发移动应用
3. 可扩展，能充分使用原生的能力。可以在现有App中接入Weex页面，也可以新的产品开发，还有原有Native页面转化成Weex的过程。很多原生功能做得非常好，

安装

# 预安装环境
Homebrew，Node，Xcode，Android Studio

# 安装 weex toolkit, 这是官方提供的一个命令行工具，可以使用它进行 Weex 项目的创建，调试以及打包等功能
npm install -g weex-toolkit

# 安装 weexpack. 可以创建weex应用工程和插件，快速打包 weex 应用并安装到手机运行，  
# 还可以创建weex插件模版并发布插件到weex应用市场
npm install -g weexpack

创建项目

有两种方式创建项目

1. 使用 weexpack 创建项目

# 创建项目
weexpack create appName

# 进入刚创建的项目文件夹
cd appName

# 添加需要的平台
weexpack platform add ios
weexpack platform add android  

2. 使用 weex-toolkit 创建项目

# 创建项目
weex create appName

# 进入刚创建的项目文件夹
cd appName
#安装依赖
npm install

# 添加需要的平台
weex platform add ios
weex platform add android

运行

# 在 web 上运行
npm run build 
npm run dev & npm run serve

# 在 ios 上运行, 需要使用 XCode 打开 .xcworkespace 修改相应配置，比如版本，证书等
weex run ios

# 在 Android 上运行
weex run android

# 单页调试
weex src/index.vue

调试

# weex-toolkit 还提供了强大的调试功能，只需要执行
weex debug

IDE

1. VSCode VS Code for WEEX
2. Weex Studio
提供项目新建、编码、预览、调试等完整的开发链路，无需依赖WEEX CLI。

原理

Weex主要包括三大部分：JS Bridge、Render、Dom，分别对应 WXBridgeManager、WXRenderManager、WXDomManager 。通过 WXSDKManager统一管理。

JS Bridge 主要用来和 JS 端实现进行双向通信，
Dom 主要是用于负责dom的解析、映射、添加等等的操作。
Render 负责对dom实现渲染。

WEEX 原理

在Android和IOS上，标签是被编译为原生控件的，也就是上面所说的dom解析，同时你也可以在原生端，自定义控件或者功能模块，然后注册到weex中使用，weex提供的基础控件和功能模块并不多，但很容易拓展。

组件

Weex 提供了一套基础的内置组件。可以直接使用，也可以对这些基础组件进行封装、组合形成自己的组件，也可以创建自己的全新组件来包装操作系统提供的地图、视频等功能。

第三方组件

WEEX UI 一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库, 也是阿里巴巴官方的。

扩展
组件和模块都是可以扩展的

组件扩展的步骤

1. 创建类继承 WXComponent
2. 编写组件原生代码
3. 注册组件
   [WXSDKEngine registerComponent:@"myView" withClass:[MyView class]];
4. 调用
   <myView />
   
   

模块扩展的步骤：

1. 创建类并遵循 WXModuleProtocol 协议
2. 编写原生代码方法并暴露给 weex
   WX_EXPORT_METHOD(myMethod:)
3. 注册模块
   [WXSDKEngine registerModule:@"myModule" withClass:[MyModule class]];
4. 调用模块方法
   weex.requireModule("myModule").myMethod("");

发布和更新

发布

使用 weexpack build ios weexpack build android打包 bundle js
使用 XCode 或 Android Studio 打包为 App

热更新

热更新即更新 bundle js, 有2种更新方式：

1. 整包更新, 可以将 js 包放到服务器，整包下载到客户端替换
2. 增量更新, 可以使用代码对比工具，得到增量代码，下发到客户端再合并代码