Vue和React的比较
JS框架 Weex基于Vue.js ， 以下是HelloWorld程序
<template> <div class="container"> <div class="cell"> <image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">javaScript</text> </div> </div></template><style> .cell { margin-top: 10; margin-left: 10; flex-direction: row; } .thumb { width: 200; height: 200; } .title { text-align: center; flex: 1; color: grey; font-size: 50; }</style>React Native基于React.js，以下是HelloWorld程序
import React, { Component } from 'react';import { ApPRegistry, Text } from 'react-native';class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); }}AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);社区支持 Weex开源较晚，网上相关资料还比较少，社区规模较小，网站资源还在建设中； React Native社区则比较活跃，可以参考的项目和资料也比较丰富；
开发效率 Weex工程开发套件weexpack Weex的Playground可以在线编码 ReactNative没有工程开发套件，没有在线编码功能| 技术 | 开发工具 | 在线编码 |
|---|---|---|
| Weex | weexpack | 支持 |
| ReactNative | notepad++ | 不支持 |
npm install -g weex-toolkit检查weex是否安装成功，命令行输入weex --version在任意目录下新建一个.we文件，例如我的是E:/weex_workspace/tech_list.we 文件内容为官方示例：
<template> <div class="container" > <div class="cell"> <image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">Javascript</text> </div> </div></template><style> .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; } .thumb {width: 200; height: 200; } .title {text-align: center ; flex: 1; color: grey; font-size: 50; } </style>编辑后保存，在命令窗口下执行weex E:/weex_workspace/tech_list.we weex会启动浏览器并且展示出网页,如图所示: 
注意图中红色标注部分，不难看出，weex启动了一个服务，我的目录是C:/Users/wangning/weex_tmp/h5_render,顺着这个目录打开，我们可以看到这样一组文件 
没错，第二个红色标注部分的tech_list.js就是它，打开之后我们可以看到 
红色圈圈的地方就是判断module对象是否有缓存，如果有，则退出当前function，起到了缓存页面的作用。 重点是最后两个function
可以看到1是我们之前tech_list.we中的这段代码
<template> <div class="container" > <div class="cell"> <image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">JavaScript</text> </div> </div></template>对<template>标签之间的布局元素进行的的解析，按照一定规则，转换成了json数据并赋值给module.exports
以此类推，2中对应的是tech_list.we中的
<style> .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; } .thumb {width: 200; height: 200; } .title {text-align: center ; flex: 1; color: grey; font-size: 50; } </style>对<style>标签之间将样式按照一定规则转换成了json数据并赋值给module.exports 只要修改了tech_list.we，与之对应的tech_list.js就会发生相应的变化, 例如，我们向tech_list.we中多添加几个div元素
刷新网页，tech_list.js发生了变化，用文件比较器查看，变为内容如下：
可以看到，只要<template>标签之间有布局元素变化，weex就会自动修改与之对应的js文件，并将当前布局元素以json数据的形式呈现在与.we对应的.js文件中. 以此类推，<style><script>标签同理，不再敖述。
接下来，我们将这段代码集成到安卓开发环境 将已经生成的js文件复制到AndroidStudio的assets目录下
在模拟器上运行，我们看到 
发现没有显示图片，因为我们没有实现IWXImgLoaderAdapter的setImage方法 我们使用imageloader加载网络图片，代码如下：
再次运行，图片就出来了 
以这段代码为例
<template> <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div></template><script> module.exports = { data: function () { return {w: 750, h: 200} }, methods: { update: function (e) { this.h += 200 } } }</script>data中定义数据，类似于成员变量，methods定义方法，可以把module.exports看做一个类, update方法对成员变量h进行了自增200的运算，{{h}}是Vue.js的数据绑定语法，只要对h的值进行了变更，则会立即生效。
我们将这段代码在Playground中运行，如下图 
手机顶部有一块红色区域，就是我们<template>标签中的<div>,这个<div>有一个点击事件，onclick="update"点击后会执行update方法，将变量h自增200，由于变量h是在<div>的height的值，因此点击后高度会自增200，若是之前安装了Playground手机程序，可以打开Playound App扫面右侧二维码，在手机上查看实际效果
npm install -g yarn react-native-cli安装Android Studio2.0及以上版本Windows用户请注意，请不要在命令行默认的System32目录中init项目！会有各种权限限制导致不能运行！
有个常见的问题是在你运行react-native run-android命令后，Packager可能不会自动运行。此时你可以手动启动它：
cd AwesomeProjectreact-native start如果你碰到了ERROR Watcher took too long to load的报错，请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。
打开AwesomeProject工程下的index.android.js文件，我们可以看到如下内容： 
我们可以看到<View>标签中包含了三个<Text>标签，分别展示了三条文本内容，需要注意的是，每一个工程必须要有一个render() {}方法，他负责渲染页面，只返回一个直接子节点
正确写法：
render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); }错误写法：
render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); }首先，我们需要用AndroidStudio打开AwesomeProject工程下的android工程 E:/reactnative_workspace/AwesomeProject/android 建议先将E:/reactnative_workspace/AwesomeProject/android/gradle/wrapper/gradle-wrapper.properties替换成已有的gradle版本，避免不必要的下载。 项目构建成功后，请确保packager服务已经打开，若未打开，请cd到工程目录下，执行react-native start,
如下图所示 
表示packager服务已经启动成功。
我们运行AwesomeProject，如下图所示
index.android.js代码中的三个<Text>文本内容就展示出来了
现在你已经成功运行了项目，我们可以开始尝试动手改一改了：
使用你喜欢的文本编辑器打开index.android.js并随便改上几行 按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是⌘+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。React Native内置了对ES2015标准的支持，你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话，可以看看阮一峰老师的书，还有论坛的这篇总结。
以上我们分别完成了Weex和ReactNative简单程序的编写，若以现在为时间点，做项目要选择其一，究竟两者该如何选择？
从学习资源上看 ReactNative更丰富 
Weex相对而言则资料太少
从成功案例上看 ReactNative有很多成功案例 
而Weex没有
从UI组件上看 ReactNative更丰富 
Weex相对较少
对比图如下
| 对比项 | Weex | ReactNative |
|---|---|---|
| 学习资源 | 少 | 多 |
| 从成功案例 | 无 | 多 |
| UI组件 | 相对较少 | 较多 |
| 学习成本 | 一般 | 一般 |
新闻热点
疑难解答
