文章说明：

这篇文章每周更新3节，大约18-20节，所有更新都会在此文章中进行，不新起文章了，所以有追看的小伙伴请收藏或点心。

文章不仅有文字和图片，也有视频，由于不会在掘金中插入视频，所以观看视频请到我个人博客中观看。(视频观看点击这里)

第01节：课程介绍

WEEX是什么？

WEEX的出现让我们可以使用Vue来进行移动端原生应用开发，是前端小伙伴们必备技能。

与 Web App、HTML5 App 或 hybrid App 不同，您可以使用 Weex 构建一个真正的原生应用。更贴心的是你的代码只需使用 HTML、CSS、JavaScript 可以构建原生应用，上手非常简单。但实际上，应用的底层是 Objective-C 或 Java，同时，Weex 提供很多 native 组件或模块供开发人员使用。也就是说，你会前端知识，想作真正的app，那你学习WEEX就对了。

*******点击这里观看第一节视频 *********

那些公司在用

阿里系的公司基本都在用，包括天猫、淘宝、钉钉（具体可以看下边的图片）。现在尤大神担当的WEEX的顾问。所以说我们有必要系统的学习一下WEEX。虽然WEEX已经捐赠给了Apache公司，但是阿里的人员一直做着贡献。有人说React Native要比WEEX的组件多百倍，我不否认，毕竟WEEX才刚刚开始，就像VUE刚刚开始一样，很多人鄙视瞧不起，但是现在也被接受，并开始大规模使用一样。

需要的前置知识：

Vue的基础知识，这也算一个最高的门槛了，但是幸运的是在这里你都可以免费学到。
会安装Node和使用NPM进行包管理。
会基本的CSS和JavaScript的知识。

学前先知：

这门课程的坑是比较多，难度要比其他课程要大，所以做好思想准备。
如果你有Vue的基础，上手会简单一些。
这不再是网页，而是原生应用，所以有很多和网页不一样的地方，你需要适应。

课程难点：

国内的网络会给你带来很多麻烦，所以你需要一些科学上网的本领。
环境的搭建，环境搭建你可以能需要8小时-2天时间，不要放弃，多尝试。
适应原生开发的一些规范，如果你已经是个前端开发高手，你需要多一些适应。

PS：看WEEX的文档坑会比较多，所以建议你学完视频再去看文档进行填坑操作。如果你有坑过不去了，也可以参与到我们的众筹活动中来，技术胖会在群里进行解答。

课程分三个章节：

大约18-20节课，每周更新三节。

开发环境的搭建
组件和模块的使用
学习中问题答疑处理。

第02节：开发环境安装(1)

开发环境的搭建是这门课程的重点和难点，因为国内网络环境的原因，你可能会安装好几遍才能安装成功，也会由于错误，你可能要重新安装系统，但是请不要放弃，因为只要踏过这道坎我们讲师一马平川，顺风顺水。我在完全熟悉的安装下也安装了8个小时左右，所以你最好是一边工作以边安装，或者拿出一个周六，看着电影安装着，这样会消除一些你的不安情绪。

*******点击这里观看第二节视频 *********

首先是系统建议，如果你用windows系统，我建议你升级到win10，因为在win7下安装由于权限的原因，你有可能会安装失败。经过几次尝试，发现win10安装还是比较顺利的。

安装node：

在系统安装好后，你需要先安装Node。这个过程和安装QQ的过程一样，所以没什么讲的。

下载地址：https://nodejs.org/en/download/

请使用LTS版本，因为Node维护着两条发布流程：奇数版本每年10月份发布，偶数版本第二年4月份发布。当一个奇数版本发布后，最近的一个偶数版本会立即进入LTS维护计划，一直持续18个月，再之后会有12个月的延长维护期。当一个偶数版本发布时，奇数版本只有2个月的维护期，以后只能升级。

当然也不建议使用CURRENT版本，也就是我们说的最新版，虽然官方说是可以使用的，但是我个人还是比较保守的，我怕一些未发现的BUG，影响我们的安装，所以我们使用LTS，长期维护版本。

安装完成后查看版本：

node安装完成后我们最好在命令行工具中检测一下版本。

node检测

node -v

npm检测

npm -v

安装Java的环境

因为我们最终开发的是android原生程序，所以需要安装java的环境。因为国内网络环境的问题，这个安装可能会很慢。

下载地址：http://www.java.com/zh_CN/

这个现在的文件很小，这并不是完整的离线安装包，它的作用是检测你系统并给你提供正确下载包的一个小软件。所以它需要联网继续下载安装，如果你的网络不好，你会遇到你学WEEX的第一坑，这个坑需要科学上网，否则你会等到天荒地老。请大家有点耐心，当显示下图时说明你迈过了第一个坑。

如果你真的在这个坑无法跳出，你可以下载脱机文件，虽然也会很慢，但是会有个进度，你就会比较安心。（具体方法可以看视频教程….）

git的安装

windows带的命令行工具不是很友好，而且我们在学习WEEX时会用到Git的命令，所以这里需要安装一下Git。这个对于已经工作的小伙伴一定再熟悉不过了，每天都要进行使用。

Git的下载地址：https://git-scm.com

这个大概有37M大小，下载还算顺利，然后一路下一步，下一步就可以安装成功。桌面出现Git Bash图标，说明安装成功。

安装weex-toolkit

安装weex-toolkit需要使用npm进行安装。

1	npm install weex-toolkit -g

坑填：在安装weex-toolkit的时候，尽量不要使用cnpm，因为我有过两次使用cnpm安装失败的经历，还有一次再次用npm安装也不行，最后没办法重新作系统。需要提醒的是这个包的安装也是比较耗时的。安装完成后会报几个WARN，这先不用管。安装完成后，你可以使用-v的命令检测是否安装成功，弹出版本号，说明安装成功了。

1

weex -v

安装全局webpack

使用npm安装webpack,如果你安装很慢，这个是可以使用cnpm来进行安装的。

1	npm install webpack -g

安装好后使用-v进行查看版本。

安装android-studio：

其实到上一步骤，已经可以使用了，但是没有原生开发的感觉。那为了这个Feel我们需要再安装android-studio。

在安装过程中，你需要记录一下SDK的安装位置，安装好后，我们要配置环境变量。

填坑：安装时你最好关闭杀毒软件或者360卫士这样的软件，因为他会组织android-studio一些关键位置的写入，导致安装后出现未知错误。

配置环境变量：

打开环境变量路径：控制面板->系统和安全->系统->高级系统设置->环境变量。

新建：ANDROID_HOME 并把我们刚才赋值的sdk路径作为值插入。

添加platform-tools和tools到path下（这个看视频吧，每个人的路径不一样，结果也不一样）。

AndroidStudio配置：

在AndroidStudio的欢迎界面，你需要点击右下方的Configure进行老版本的SDK tool配置，

步骤：Configure->SDKManager->SDK Tools->勾选show Package Details ->勾选23.0.2

然后进入安装。

总结：这节课虽然不难，但是比较耗时。大家一定要熬过这个过程，剩下就没这么耗时了。

第03节：开发环境安装(2)

通过上节课艰难的安装，凭着自己的耐心和毅力已经顺利安装完了。那我们这节课继续进行开发环境的搭建，但是这节课不会像上节课坑那么多。

*******点击这里观看第三节视频 *********

建立weex项目目录

上节课我们安装了weex-toolkit，这个安装成功了，我们就可以在命令行使用weex命令了，我们先来看一下版本的查询。

weex -v

有了这个就可以生成我们的项目目录了，类似于vue-cli。创建命令如下：

weex create helloWeex

输入完这条命令时，如果你没有安装weexpack，他会提醒你进行安装，这个weexpack也可以自己单独安装。

npm install weexpack -g

如果你没有安装weexpack这个过程会慢一点，请耐心等待。等出现Creating a new weex project.说明项目构建完成了，我们可以到项目目录中去看一下。

你会发现已经给我建立了项目所需要的基本结构和文件，这时候我们就可以cd到项目目录下，然后使用npm install安装依赖包了。

npm install

如果你感觉慢的话，你也可以使用cnpm install ，但是要说的是cnpm 有时候会安装错误，这也算一个小坑吧。如果你用npm进行安装时间会很长，并且在安装完成后会有一些WARN警告，你可以暂时忽略这些警告。

添加Android应用支持

我们建立好了项目的基本目录，这时候我们还要添加平台的支持，这里我们添加Android的支持。

weex platform add android

如果你要支持IOS平台的话，你还要添加IOS应用，但是抱歉的是我没有苹果电脑，所以这里就不演示苹果的添加了。这个安装过程并不算长，安装好后可以去项目根目录的platforms下看到android文件夹，说明应用支持添加成功。

发布成Android应用

想在写完一段代码时进行预览效果，这时候就要使用run命令了。

weex run android

这里是有一个坑，在命令执行完，它会报一个错误，错误是找不到安装设备。No android devices found.如果你自学这个坑会够你添一会的了。那这里我们安装的android-studio就排上用途了。

在Android Studio里运行weex

这里是坑的重灾区，希望大家专心迈坑。在上节课我们已经安装好了Android Studio，我们点击图标重新启动。这时候出现上节课的界面，选择第二项。

然后选择你用weex创建的项目下的platforms/android目录，打开项目。这时候坑就来了，会报好多错误，但是你不要惊慌，双击安装就好。

这个过程时间长短会根据你网络状况和机器配置有关，如果网络不好，可能要安装1-2个小时，所以耐心等待。等待loading条的消失，然后你就可以配置AVD了。（此过程最好收看视频，文字不太好表达。）

AVD虚拟机的安装

等待错误和loading条消失以后，就可以配置虚拟机了，选择菜单栏里的Tools->Android->AVD Manager 进行配置。

到达这个页面，然后点击Create Virtual Device 按钮创建视频。这时候要根据自己的电脑配置，选择屏幕的大小，这个虚拟机很吃内存，所以尽量选择小屏幕分辨率的。然后点击Next，之后进入虚拟机的安装过程，这个也是比较慢的，只要设计到google产品的都不会快。

安装好后点击三角按钮开始运行虚拟机，然后稍等一会，不用作任何操作就会出现weex程序的默认界面。看到下面的界面恭喜你，这节课你已经大功告成了。