WEEX
简介
Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。
Weex 是阿里巴巴出的一款跨端框架，致力于让开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。
Weex 并不强依赖任何特定的前端框架。目前 Vue 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。
demo
WEEX 的优点
- 支持三端（iOS/Android/H5)
- 运用了Web的技术，像CSS、JS等, 可以使用 JavaScript 语言和前端开发经验来开发移动应用
- 可扩展，能充分使用原生的能力。可以在现有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
创建项目
有两种方式创建项目
- 使用
weexpack创建项目
# 创建项目
weexpack create appName
# 进入刚创建的项目文件夹
cd appName
# 添加需要的平台
weexpack platform add ios
weexpack platform add android
- 使用
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
-
VSCodeVS Code for WEEX -
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 组件库, 也是阿里巴巴官方的。
扩展
组件和模块都是可以扩展的
组件扩展的步骤
- 创建类继承
WXComponent - 编写组件原生代码
- 注册组件
[WXSDKEngine registerComponent:@"myView" withClass:[MyView class]]; - 调用
<myView />
模块扩展的步骤：
- 创建类并遵循
WXModuleProtocol协议 - 编写原生代码方法并暴露给 weex
WX_EXPORT_METHOD(myMethod:) - 注册模块
[WXSDKEngine registerModule:@"myModule" withClass:[MyModule class]]; - 调用模块方法
weex.requireModule("myModule").myMethod("");
发布和更新
发布
使用 weexpack build ios weexpack build android打包 bundle js
使用 XCode 或 Android Studio 打包为 App
热更新
热更新即更新 bundle js, 有2种更新方式：
- 整包更新, 可以将 js 包放到服务器，整包下载到客户端替换
- 增量更新, 可以使用代码对比工具，得到增量代码，下发到客户端再合并代码
