Weex 从入门到放肆图文视频教程

4,824 阅读11分钟

文章说明:

这篇文章每周更新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刚刚开始一样,很多人鄙视瞧不起,但是现在也被接受,并开始大规模使用一样。


需要的前置知识:

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

学前先知:

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

课程难点:

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

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

课程分三个章节:

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

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

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

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

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

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

安装node:

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

下载地址: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的环境。因为国内网络环境的问题,这个安装可能会很慢。

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

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


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

git的安装

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

Git的下载地址: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程序的默认界面。看到下面的界面恭喜你,这节课你已经大功告成了。