大家关注了昨天的 VueConf 大会了吧，如果没有猜错，昨天肯定也涉及到了weex的开发，难道你们就不好奇吗？反正我是很好奇，所以我撸了一个教程，带你们入坑，让我在weex道路上不孤单的前行。
介绍
估计很多人第一次听说weex，weex是阿里开发的，可以使用 vue2.0的语法开发一个接近原生的app,目前被被捐献到了apache，简单来说，你可以理解为weex 就是vue native 。
官方地址
github
- 一次编写，多端运行（这个口号碉堡了，有木有）
Weex 提供强大的跨平台能力，可以使用相同的 API 开发 Web，Android 和 iOS 应用。 同时，我们对接口了丰富的扩展能力。 这样，当您需要扩展原生组件或模块时，这将非常方便。
- 支持 Vue 语法（很爽啊，vue语法搞起）
Weex 遵循 Web 标准，同时支持 vue.js 的语法。因此，您可以使用 vue.js 语法来开发应用程序。
- 谁在使用 Weex?（大公司都在用）
天猫，淘宝，阿里云，虾米，菜鸟裹裹，优酷等等
前期准备
网上教程大多都是用安卓工程师，ios工程师的视角来讲weex，按理来说我这也不能算教程，只能说是一点点心得体会，这个教程面向前端工程师，基于window来讲的，系统最好是win10,请自备科学上网，因为可能weex国内镜像和国外镜像有差
- 下载安装node
推荐安装教程www.runoob.com/nodejs/node…
下载完成后，命令行输入如下命令(版本最好是最新稳定版)（npm版本最好是3以上）
推荐老鸟们安装nvm，window也是可以得，用了半年多，各个node版本切换和下载都十分方便
- 下载java
安装教程（记得要配到环境变量中）
3.下载android studio（一定要下载带sdk那个接近2G的版本）
安装安卓studio（搞过react native的估计就懂了，老鸟可以跳过）
不过因为可能有大部分是前端开发者，我说的详细一点
下载好之后，选择要安装的目录，一直下一步，直到
这一步，我们去掉勾，然后按finish,接下来配置环境变量。
。把你安装目录下的sdk,skd/tools,skd/platform-tools放到环境目录下，如下图
接着呢，我们点击android studio的图标，打开之后也是一路默认点击next，当安装好所有东西的时候，我们打开sdk manager，下载一些依赖的库，下载23.02（一定要）
4.打开命令行输入
npm install weex-toolkit -g
查看是否安装成功
安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：
npm install webpack -g
查看是否安装成功
5.推荐安装谷歌浏览器，这个就不用我说了吧
到此，环境搭建就完了，说难不难，说容易也不容易。太多的客观因素，比如墙了，比如电脑系统的环境不同，可能少有不同等等，请耐心配置完环境。
操作
weex create HelloWeex
cd HelloWeex
npm install
weex platform add android (还可以添加ios)
weex run android详解
上面的几句命令对新手太不友好了，我来详细解释下吧
再来看看这张图
常用的就两种weex create 和init，我们先来看看weex create后期我们再用init
当我们添加了platform add android的时候呢，目录就会多一个android的包
那我们要怎么写文件呢?主入口文件就是src文件下的index.vue(跟vue很像吧)
发布到安卓手机上(我们在虚拟机上试试)，也可以真机调试
weex run android
他会自动检测你电脑是否有连接，有的话会在你手机上打开weex的页面，并且浏览器会自动打开(其实就是打开了serve)，显示的也是weex页面
我们用android studio来打开刚刚platform里面的那个android，第一次打开会下载很多依赖，耐心等待吧
然后打开虚拟机。
稍等一会就可以看到软件自动的在你虚拟机上打开了（如果没反应，就先打开虚拟机，再输入命令weex run android）,当然你电脑内存不够的话，可以真机也可以，记得在手机开发者模式中打开usb调试。
当你出现如下页面，那就成功了
好了，今天我们就不用android studio了，我们直接在网页调试，配置一下webpack怎么让他热加载等等。
运行配置
现在一看到构建工具的东西，我都会潜意识的打开readme.md文件和package.json文件，我们来看看package.json下面的script里的脚本
在 package.json 中，已经配置好了几个常用的 npm script，分别是：
我们直接npm run dev 就是打包，修改文件，会自动的编译到dist/index.js,index.web/js 网页是web.js 其他平台依赖index.js （-w 就是watch监视）
你修改/src/index.vue文件，然后保存，就可以在命令行在不断变化着，监视作用起效果了。
但是，你修改src/index.vue，就算刷新刷爆浏览器，页面并不会更新。因为他只是监听代码，并且打包到dist目录下，并不是监听渲染到页面上（如果你不打包，几乎用不到npm run dev），如果你想页面也渲染，就要输入npm run build 或者webpack编译打包，浏览器刷新一下，页面就会改变了，但是你每次改动代码，就要输入webpack一次，浏览器又要刷新，太麻烦了， 我们改一下package.json源码
，然后在浏览器地址里面插入http://192.168.253.3:8080/webpack-dev-server/web/
这就实现了热更新的功能了，几乎跟vue一样了，是吧。
这时候，尴尬的事情就出现了，说好的网页开发，但是我们安卓虚拟机显示的东西跟网页不一样了，那不是没有意义了吗。
别急，还差最后一丢丢，我们就彻底搞定开发环境
把上面编译后的index.js（编译后指的就是输入了npm run build）内容复制到下面的index.js，然后点击闪电的标志或者快捷键ctrl+f10,虚拟机就会重新刷新，这样就OK了。
最后一步了，那就是打包成apk，
android studio会自动生产一个apk文件，你直接拖进手机或者虚拟机里面就能运行了。
好了,weex整个的流程差不多就是这样子了，本地机器的环境搭建，到weex项目的搭建，不过还没说完，我怕说下去，大家会混乱，所以我决定再开一小节，讲讲如何用vue2.0的模式来构建项目，大家莫慌。顺便说一句，假如你在安装过程中出现了问题，请先试试科学上网之后，再不行就留言吧，我会尽全力回复的，如果有错，请批评指出。
还有一个不情之请，请大家把踩过的坑，以及怎么解决的，都写在评论上吧，这样后来者们，才能更好的学习weex,weex也才能更好的发展，帮助他人就是帮助自己。
