兰亭古墨
兰亭古墨

网易严选App感受WEEX 开发

自打出生的那一天起，Weex 就免不了被拿来同 React Native「一决高下」的命运。React Native 宣称「Learn Once, Write Anywhere」，而 Weex 宣称「Write Once, Run Everywhere」。在我看来，并没有谁更好，只有谁更合适。下面我将围绕 Weex 入门进行讲解。
（如果你尚不了解 React Native，并想简单入门，可以阅读 【整理】React Native 快速入门笔记）

网易严选 App 感受 Weex 开发

什么都不说，先给你感受下 Weex 的效果。以下就是我使用 Weex，4*8h（不连续）做出来的 demo，其中还包括素材收集，踩坑总结等时间。

demo 截图

此处是 demo 源码：
https://github.com/zwwill/yanxuan-weex-demo

不得不说，使用 Weex 开发 app 对于我们纯前端人员来说，是件「很爽」的事情，只要你熟悉了他的语法，基本可以做到一周上手写 app。极其适合交互要求不高，时间紧迫，人手不足的同构开发需求。

但是，当然有但是，如果你想写出一个完美的 app，你就需要在性能优化上下很大的功夫，包括动画的优化，过场的优化，图片的优化，细节的打磨等等，再者，就是你需要掌握或者「能写」一些原生的代码，不然有些功能你是实现不了的，比如 status bar 的属性更改，开场动画的制作，内存的回收，webview 的监听等等。

下面我们具体讲讲入门知识

Write Once, Run Everywhere

Weex 提供了多端一致的技术方案。

  • 首先，Weex 的开发和 web 开发体验可以说是几乎一样。包括语法设计和工程链路等。
  • 其次，Weex 的组件、模块设计都是 iOS、Android、Web 的开发者共同讨论出来的，有一定的通用性和普遍性。
  • Weex 开发同一份代码，可以在不同的端上分别执行，避免了多端的重复研发成本。

在同构这条路上，Weex 比 React Native做得更彻底，他「几乎」做到了，「你来使用 vue 写一个webapp，我顺便给你编译成了 ios 和 android 的原生 app」

至于为什么要造这个轮子，官方给了以下说法

1、今天在技术社区有大量的 web 开发者，Weex 可以赋能更多的 web 开发者构建高性能和高体验的移动应用。
2、Web 开发本身具有非常强的高效率和灵活性，这和 Weex 想解决的移动端动态性问题不谋而合。
3、Web 标准和开发体验是很多顶尖而优秀的科技公司共同讨论和建设的结果，本身的设计和理念都有极高的品质保障
4、同时 Weex 也希望可以借此机会努力为标准贡献一点自己的微薄之力。
5、Web 是一种标准化的技术，标准本身就是一种力量，基于标准、尊重标准、贴近标准都意味着拥有更多的可能性。
6、Web 今天的生态和社区是非常繁荣的，有很多成熟的工具、库、工程体系、最佳实践可以使用、引入和借鉴。

在我看来，Weex 其实是 Alibaba 团队提高生产效率的产物，在淘宝这类要求多端统一迭代快速的部门，三端约定一种便于统一的规范，在加上时间的发酵，渐渐的就有了此类脚手架的雏形，同时在脸书 React Native 开源带来的极大轰动后，自己也坐不住了吧^_^

好了，闲话就说到这，下面就来让我们解剖一下WEEX的优劣良莠。

预科

入门 Weex 前需要了解以下知识，这样能帮助你更快的掌握
Node：《Node.js 教程》
Vue：《Vue.js官方教程》
ES6：《ECMAScript 6 入门》
再者就是 ios 和 android 开发语法的入门和编辑器的使用

环境

系统环境要求

IOS : MacOS, 黑苹果
Android :MacOS, Linux, Windows

配置环境

你可以参考官方文档安装必须的依赖环境 http://weex.apache.org/cn/guide/set-up-env.html，
也可以直接安装以下环境

  • node
  • npm
  • weex-toolkit
  • Xcode

安装 Xcode IDE 和 Xcode 的命令行工具（IOS 开发依赖）

  • Android Studio

    下载必须的插件：

a) JDK1.8+
b) Show Package Details
c) Android SDK Build Tools 
d) Android Support Repository

配置基础环境：
a) ANDROID_HOME （如运行是遇到问题可参考此文 http://www.jianshu.com/p/a77396301b22）
b) JAVA_HOME

Hello Weex

官方文档上的入门 Hello world 是 web 端的，紧接着介绍了如何「集成 Weex 到已有应用」

但是，身为一个 web 前端开发者，如果你不懂原生语音的话，介绍这些并不能起到很好的引导作用，因为web前端开发者都有「一统前端界」的野心（Web+Android+IOS），「寄人篱下」只能是暂时的。

快速创建并运行一个纯 Weex App 对于「纯」前端同学来说，才是有意思的事儿。
但：

为什么文档要这么设计也是跟Weex的定位有关的，读完下文后续你就慢慢懂了，后面我将做总结解释

如果你在官方教程里没有找到创建工程的教程，可以阅读此文《Weex 快速创建工程 Hello World》

Vue Native

Weex 在迭代的过程中选择了于 Vue 2.0 握手，因为该版本的 Vue 加入了 Virtual-DOM 和预编译器的设计，使得该框架在运行时能够脱离 HTML 和 CSS 解析，只依赖 JavaScript，如此，Vue 在和 Weex 合作后，便获得了使用 JS 预编译原生的组件 UI 的能力。

同 React Native 一样，有人也将 Weex 叫做 Vue Native。

如果你对 Vue 还不了解，可以先学习【预科】部分推荐的《Vue.js 官方教程》。

那么接下来我们讲讲，Vue 在 Weex 中的不同

Vue 在 Weex 中的不同

虽说 Weex 使用 Vue 语言写的，但毕竟是需要在不同平台间运行的，虽然大部分语法都有支持，但是依然有部分语法是不同的

语法差异

1、“html标签”

目前 Weex 支持了基本的容器 (div)、文本 (text)、图片 (image)、视频 (video) 等组件，注意是组件，而不是标签，虽然使用起来跟 html 标签很像，至于其他标签基本可以使用以上组件组合而成。

2、Weex 环境中没有 DOM

因为 Weex 解析 vue 得到的并不是 dom，而是原生布局树

3、支持有限的事件

并不支持 Web 中所有的事件类型，详情请参考《通用事件》

4、没有 BOM 但可以调用原生 API

在 Weex 中能够调用移动设备原生 API，使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的，如 clipboard 、 navigator 、storage 等。
《clipboard 剪切板》
《navigator 导航控制》
《storage 本地存储 》
为了保持框架的通用性，Weex 内置的原生模块有限，不过 Weex 提供了横向扩展的能力，可以扩展原生模块，具体的扩展方法请参考《iOS 扩展》 和《Android 扩展》。

样式差异

Weex 中的样式是由原生渲染器解析的，出于性能和功能复杂度的考虑，Weex 对 CSS 的特性做了一些取舍
1、Weex 中只支持单个类名选择器，不支持关系选择器，也不支持属性选择器。
2、组件级别的作用域，为了保持 web 和 Native 的一致性，需要