初识weex系列（前端视角） - 环境搭建

大家关注了昨天的 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国内镜像和国外镜像有差

1. 下载安装node
   推荐安装教程www.runoob.com/nodejs/node…
   下载完成后，命令行输入如下命令(版本最好是最新稳定版)（npm版本最好是3以上）
   

   

   推荐老鸟们安装nvm，window也是可以得，用了半年多，各个node版本切换和下载都十分方便

2. 下载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，第一次打开会下载很多依赖，耐心等待吧

点击error全部都要下载更新，直到下面不再转动

然后打开虚拟机。

稍等一会就可以看到软件自动的在你虚拟机上打开了（如果没反应，就先打开虚拟机，再输入命令weex run android）,当然你电脑内存不够的话，可以真机也可以，记得在手机开发者模式中打开usb调试。
当你出现如下页面，那就成功了

上面只是给大家演示了一下，走了一个大概的总过程，当然，我们不可能每一次都开着虚拟机来看页面的变化，我们一般都是通过web页面来写代码，最后生成到手机或者虚拟机里面就好了。如果你走到这一步，真的是恭喜你了。还有，如果不想每次开虚拟机都要打开as可以用genymotion这个软件，个人版是免费的

好了，今天我们就不用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文件，然后保存，就可以在命令行在不断变化着，监视作用起效果了。

假如我们想在网页上看到效果，就输入命令npm run serve,这时候网页就显示那个hello weex的页面了，今天的第一步就完成了。
但是，你修改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也才能更好的发展，帮助他人就是帮助自己。