weex介绍

Feb 26, 2017

Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。

#简介 2016年6月开源

Weex的前身是WeApp，一个用JSON配置原生UI组件来实现动态化的框架，开源之后 github 上面提交的记录，大部分工作都是 Vue 框架解析成原生组件的代码，原生组件早就写完了。

2017年2月成为 apache 孵化项目

#weex 三端一致的实现 Weex的工作原理 三端一致的实现

使用 webpack 编译源文件，编译成一段 JavaScript 代码，生成两个 JS bundle。

针对 Web 平台，依然使用 Webpack + vue-loader 的方式编译 .vue 文件，针对 Android 和 iOS 平台，使用 Webpack + weex-loader 生成 native framework 能解析的 js bundle 格式。

三端一致的实现方式大体清除了，就是三端抽象出相同的组件分别实现。 缺点：

  1. 具体表现是否一致取决于三端组件实现的质量。
  2. 能使用的组件数量比较有限。 优点：
  3. 可以同一个组件三端不同方式实现，能体现平台的特性。
  4. 实现组件时，能够针对各个平台进行优化，性能更好。

编写 weex 项目

使用内建组件

内建组件是官方对常用的项目组件进行抽象，能够完成常用 UI 渲染。 內建组件用来代替常用的 html 标签。也就是说，在编写 vue 源文件的时候，必须使用 weex 提供的内置组件标签，不能使用标准的 html 标签。

使用 CSS 编辑样式

  1. 符合 CSS 盒模型
  2. 支持常用的 CSS 属性
  3. 对 Flexbox 布局支持的比较好。

使用內建模块

內建模块是官方对常用功能的封装，通常与 native 操作相关。

自定义组件和模块

weex 扩展可以编写 component 和 model component 概念与 Vue 中的 component 概念相似，并且现在也推荐使用 weex 提供的组件，使用 Vue 编写单文件组件的方式来扩展组件。如果存在 weex 提供的基础组件无法达到要求的情况，就需要三端分别编写组件注册到 weex 并使用。 model 更像是 Javascript 与 native 互相调用的接口。 官方提供的 model

页面跳转

  1. 使用 vue-router 控制页面跳转。 weex 可以与 vue-router一起工作，但是在 Android 和 iOS 中都没有浏览器的 History API，也不存在 DOM，所以只能使用 abstract 模式进行跳转

  2. 使用 weex 提供的 WXModel——navigator 进行页面跳转 navigator 跳转，是不同的 JSBundle 之间进行跳转。在实际使用的时候，可以通过配置文件让 webpack 将源文件打包成多个 JSBundle，跳转方便，加载也更迅速。

WXComponent 组件,做显示用,需要三端分别实现 WXModel 模块,提供功能,也需要三端分别实现(可能具体实现方式不一样,因为涉及到平台相关特性)

项目打包

weex 打包是使用 webpack 讲解 webpack 打包，生成两个 JSBundle。一个是用 vue-loader 生成，使用 Vue 解析的 JSBundle，用于 Web 平台渲染；一个是用 weex-vue-loader 生成的，供 iOS 和 Android 的 Framework 解析的 JSBundle，用于 Native 渲染。

调试使用 Node.js 做服务器

npm 管理模块

  1. 简易跑步 app weex 项目 iOS weex 项目 Android

  2. 尚妆旗下一款 app 的购物车 weex 项目 Android 最常见的形式——列表展示

与 Native 功能深度整合——提供了相应解决方案，但是开发成本比 Native 实现相比要高一些。 难以做到 H5 与 Native 表现一致（例如手势操作）

复杂样式展示——远远不如 H5 灵活（受限于 CSS 解析器）

weex 可以实现三端一致的高性能渲染 weex 开发成本略高于 H5，低于 Native Vue 作为前端框架，上手容易，MVVM 架构，架构成熟，封装良好 有官方的插件商城，方便获取插件，如果开发者数量足够，会大大丰富 weex 的组件。 在 Native 端，图片请求，异步加载等是 Native 实现的，离线、缓存、异常处理能力强大。 可以在 app 内置 JSBundle 或者图片，提升用户第一印象。

项目不够成熟，需要继续发展一段时间 国产项目通病，部分代码（例如实现 Flex 布局的布局引擎，是从 ReactNative 中借鉴来的） 阿里维护 weex 的决心尚需要考量

RN, Weex, PWA, Android Instant App, 小程序。 1.轻量级 2.动态化