Weex从入门到超神（一）

随着移动端发展进入白热化阶段，不少中小型公司愈来愈注重于APP的更新迭代速度。加上去年微信小程序的问世，前端同窗彷佛迎来了“第二春”，愈来愈多的 Native 开发者感觉到了史无前例的压力，人家已经打到家门口了，难道就这样两眼旁观吗？

两年前 Facebook 团队发布了一个全新的移动端和前端无缝衔接的框架 React Native，很明显是用 React 开发的，支持在 Native 上运行的这么一个玩意，这相对于苹果漫长的审核机制的确是一个福音。但是 React 的学习曲线比较陡，网上大部分教程的性质都是 “React Native 从入门到放弃”，RN虽好，可是对于大多数移动开发者来讲学习成本太高。

去年阿里巴巴开源了一个相似 RN 的框架 Weex ，虽然面世才一年多，已经收获了普遍的关注，今年 Weex 已经被归入 Apache 基金会的孵化项目。

为何选择 Weex

转载请注明出处：来自LeonLei的博客http://www.gaoshilei.com

做为 Native 开发者，咱们很清楚 Native 走到今天所面临的困境，相较于前端比较呆板不够灵活，任何改动都须要从新打包提交审核而后发布版本，这个周期最短也要1~2天的时间，一直有人在说要用 H5 替代 Native ,这不是危言耸听，移动端市场正在遭受着冲击。

大部分中小型的互联网公司都是小步快走的模式进行版本迭代，版本发布的灵活性就显得尤其重要，可能产品早上想的功能点晚上就要上线，Native 确定是办不到的，H5 这个时候就显示出它的优点了；可是 H5 有一个致命的缺点就是性能太差，用户体验远达不到 Native 带来的那种丝滑流畅般的享受。因此这两年，RN 和 Weex 悄然崛起就是为了解决这种矛盾。

不论是 RN 仍是 Weex 都能作到实时修改页面不须要 Native 发版，他们的原理都是同样的，经过 js 来渲染 Native 界面。
Weex 在很大程度上借鉴了 RN 的思想和方式，对比一下 RN 和 Weex 的差别和优缺点：

优势

• 因为 Weex 采用了 Vue 做为上层框架，相较于 React 更加轻量，Vue 的官网宣传就是很是轻量，体积小巧，语法简单。
• Vue 的学习成本相较于 React 更加小，大部分 Native 开发者更容易上手。
• Weex 吸取了 RN 的精华，能够说 Weex 是站在巨人的肩膀上问世。

缺点

• Weex 相较于 RN 起步比较晚，社区没有 RN 活跃。
• 从问世的时间上来看，RN 具备更大的优点，Weex 的学习资料比较少。
• Weex 如今存在的 BUG 相较于 RN 还比较多，对于使用来讲会有一些影响。

无论选择 RN 仍是 Weex ，咱们的目的都是同样：经过 js 语法渲染成 Native 的页面，至于该选择哪一个，这就要结合本身公司的实际状况来选，没有绝对的好与坏。
因为咱们公司的 H5 项目是用 Vue 开发的，因此咱们也就坚决果断的选择了 Weex。

可能大部分 Native 开发者看到这里就要说一句：球都麻袋！Weex 都还搞明白怎么又提到 Vue ，这是什么鬼；Vue 是国人开发的一个 JS 框架，你们能够去官网看看，文档都是中文比较方便，这里就再也不赘述，有一点 H5 基础均可以很快上手。Vue官网

Weex 项目结构

想必大多数 Native 开发者对于前端的知识仍是匮乏的，虽然 Weex 官网有教程会教你怎么安装怎么运行，大部分同窗任然会卡在某一个步骤走不下去，因此基础工做仍是要作好，后面的路才会顺畅。

首先给你们介绍 Node.js 和 npm ，刚开始接触这个我也是懵逼的，这二者之间有什么关系？为何要安装 Node.js ？ 搞懂这个关系后面对 weex 中结构理解会有很好的帮助，npm 是 Node.js 默认的包管理器，从 Node.js 0.6.3 开始，npm 集成到了 Node.js 的安装包里面，因此咱们安装 Node.js 的目的是使用 npm 来管理 weex 所用到的一些依赖库。

至于怎么安装，能够参考 Weex 的官方教程

前端同窗用到的 npm 有点相似咱们用的 Cocopods 来管理第三方依赖库，安装 Cocopods 以前你必须安装 ruby ，由于 Cocopods 依赖 ruby 才能运行， npm 也是同样的道理，npm 依赖 Node.js 才能运行。

Weex 的文件格式有两种，分别是 .we 、.vue，能够很明显的发现用 Vue 能够直接写 Weex 页面。笔者开始接触 Weex 的时候也是直接学 Vue ,不只能够用来写 Weex 还能够写写其余 H5 页面。 因此我建议学 Weex 直接看 Vue 就能够了。

Weex 的目录结构

├── src  
├── node_modules 
├── dist
├── build
├── bin
├── package.json
├── webpack.config.js    
└── config.js   
       
复制代码

src

源码存放的位置，如.we .vue

node_modules

依赖库的存放位置，相似于Xcode项目中的 Pods 文件夹。在 package.json 所在目录执行 npm install 就会自动安装好全部的依赖，有点像 pod install。

dist

存放编译好的js文件

build

存放npm build 时的 js 文件，可在 package.json 文件中配置

bin

存放一些 shell 脚本，通常用不到

package.json

项目的配置和依赖库文件，有点相似 podfile 文件

webpack.config.js

webpack 的配置文件

config.js

项目的相关配置文件，你能够在这个文件中配置切换不一样的环境

提到 webpack ，这个比较复杂，咱们只须要知道 Weex 用 webpack 进行打包编译就好了，固然也能够用其余工具来打包；感兴趣的同窗能够看一下 webpack 的官网。
当你运行 npm bulid 时，对应的是运行 package.json 中配置的 scripts: build 命令，src 文件夹中的文件都会被编译好并存放到 dist 文件夹中，这个路径在 webpack.config.js 文件中能够进行配置。npm run 后面跟的命令都是在 package.json 的 scripts 配置的。

转载请注明出处：来自LeonLei的博客http://www.gaoshilei.com

Weex 前端的项目目录大概就是这样，Weex 前端的源码不在此次的讨论范围之类，若是你们感兴趣想看 Weex 前端的源码，在 node_modules 文件夹中就能够找到。关于 Weex SDK源码在后续文章中会进行深度解析。

Weex 运行原理

官方也给出了 Weex 的运行原理图，顺手牵羊拿了过来：

不难发现，Weex 其实就是将 .vue 、.we 文件编译成 js 文件，打包成所谓的 JS Bundle 放到 dist 文件夹中，而后将编译好的 JS Bundle 部署到服务器上，咱们的 iOS、安卓、浏览器就能够访问对应的 JS 而后由 SDK 渲染成 Native 的页面，或者浏览器的内核渲染成 DOM 节点显示。这里有个坑要提一下：虽说是三端统一的，实际开发中仍是要作兼容处理的。

本篇文章浅显的介绍了 Weex 的应用背景和工做原理，下篇文章将深刻分析 Weex 的实现原理。

Weex从入门到超神（二）