Weex学习路线

木木

一、概念

 Weex是什么?
 Weex官网的解释是write once run everywhere && Native Speed in Native Platform,中文解释是一个轻量级动态化的高扩展跨平台解决方案。简单的说就是写一份代码可以同时在三端运行以及可以动态发布的解决方案。这个系统方案包含各种app native、weex sdk、构建工具、调试工具等等。先看下官方宣传的Weex原理图片,看图片比较好理解。
avatar avatar  类似的解决方案还有React Native,对就是它,大名鼎鼎的Facebook推出来的,提到Weex不得不提到的对手。
 根据原理图我们来看下,学习weex需要学习哪些知识?

二、前端基础

 上图中最上面是我们的DSL,我们一般叫Weex文件(Weex2.0之后改为Vue),通过transformer这层转化成js文件,部署到Server或者应用内。 首先要有Html、Css和Js基础,可以仅知道各自概念、基本语法、基础页面绘制怎么写就够了,相信这些概念大家都有所了解,所以html和css就不展开了,重点讲下JS。

1、JS相关

1.1、JavaScript

JavaScript文档
文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaScript文档比较全面。

1.2、ES6入门

ES6是JavaScript语言的最新标准。
文档:http://es6.ruanyifeng.com/ 阮一峰的专门介绍ES6语言新特性的电子书。

1.3、Promise

文档:http://liubin.org/promises-book/#chapter1-what-is-promise Promise是把异步处理对象和处理规则进行规范化,几乎已经在JavaScript的异步开发中成为标配。

2、Node.js&npm

 在学习vue之前,需要先了解node.js 和 npm 的概念。已经对此了解的同学可以直接略过。 Node.js是一个开放源代码、跨平台的、可用于服务器端和网络应用的运行环境。Node.js使用Google V8 JavaScript 引擎。
 npm用的比较多,就是一个依赖包管理系统。就像Android里的Gradle一样。说到npm就要提到 package.json 文件,在vue项目、weex项目中都会有这样一个文件,是一个json配置数组。具体的配置规则可以见 npm-package.json。

3、Vue

 目前 Weex 与 Vue 正在展开官方合作,并将 Vue 2.x 作为内置的前端框架,Vue 也因此具备了开发原生应用的能力。推荐直接学习Vue2.0版本。
 Vue是一套构建用户界面的渐进式框架。已经是当前前端最流行的前端框架之一。开发者是尤雨溪,现在已加入Weex团队充当顾问。Vue的框架和各种插件的学习点非常多,我们先按照下面的顺序进行了vue的入门学习。 进入vue官网,学习了解vue的概念,是个什么东西、做什么用的?然后配合搜索引擎,了解vue的基本发展,概念,使用场景概念等。
 使用 vue-cli (又名脚手架)创建一个模板Vue项目,使用WebStorm进行代码编辑,并dev模式跑起来。方便一边看文档,一边手动写代码。 通过脚手架创建好项目,首先了解webpack模板创建出来的项目结构是怎样的、入口在哪、配置文件在哪、该在哪写业务代码、怎么运行等等。这个百度一下,有很多解释。
 webpack模板项目中使用了 vue-router (路由),说到 vue-router 就得说单页面应用(即SPA)。在vue项目中,现在更加流行单页面应用,并搭配路由使用。用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js 时,我们就已经把组件组合成一个应用了,当你要把 vue-router 加进来,只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染它们。
 在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。
 这些基础知识了解后,开始对照vue文档一个个敲例子,使用dev模式观察结果。敲例子过程中还会涉及到很多其他知识的回顾,比如css、html、ES6 等。要结合上面的文档交互补充知识。
 千万别想着等vue学完我再去学weex,所有的知识都是先了解、使用过程中深入的过程。任何没有应用的学习都是耍流氓。vue 中还有很多东西要去学习。
 相关文档地址:
Vue官方文档 :https://cn.vuejs.org/
Github:https://github.com/vuejs/vue
vue-router文档:https://router.vuejs.org/zh-cn/
Github:https://github.com/vuejs/vue-router
Vuex 文档:https://vuex.vuejs.org/zh-cn/
Github:https://github.com/vuejs/vuex/

三、Weex

 好了,终于到了Weex的学习,如果有前端基础的可以直接跳过前面基础知识学习了解。
 照例,先看Weex官方文档(https://weex.apache.org/cn/),并且配合官方Github上的Playground代码在本地运行起来。
 大致顺序如下:
 1、官方文档浏览一遍,有个大致了解,文档不多也比较简单。
 2、按照官方文档快速上手,搭建开发环境,使用官方推荐的脚手架 weex-toolkit 创建一个项目,然后运行第一个Weex项目hello weex。
 3、安装Playground示例apk,然后在手机上看到各种demo的效果。然后用Playground扫描我们运行的hello weex,即可在Android手机上看到效果了。到Github上,把官方的 Playground 代码下下来。在本地部署好Weex代码和Android代码,并跑起来,Ios同理。
 4、调试Weex页面,weex-toolkit支持调试工具,weex devtools,启动一个调试服务器,学习在web端调试App端的js代码。
 5、自己的Sample项目跑起来后,使用官方的 Playground 项目扫码可以运行。然后集成Weex到已有应用或者一个新创建App项目,使用App端访问Js页面。
 6、最后基于weex-toolkit 生成的 weex-sample 项目把 weex文档-手册 中的所有内建组件和内建模块的例子代码敲一遍(也可以直接贴上去看效果)了解官方的组件有哪些功能。这时可以尝试写一些简单的页面。  除了Weex官方网站,我们还可以参与社区深入学习,比如遇到了问题、学习一些脚手架或者插件。
 第一种方式是加入 Weex 邮件列表 (Mailing List),订阅开发邮件列表,由于阿里已经将Weex捐给了Apache基金会,所以在邮件列表交流都是用英文。如果英文不够,可以在Segmentfault提问。
 另外一种是访问第三方公共论坛,比如Weex学院(http://www.weexdaxue.com/) 、Weex中文社区(http://www.weex.help/),这个网站由于没有备案,现在已经被关闭了。可能这些论坛大家都访问过了,有个比较大的问题,就是Weex社区都不活跃,这也是Weex比较大的缺点,更多的都是需要靠我们自己了。
 饿了么前端-知乎专栏,这是饿了么前端团队维护的一个博客,里面有vue、weex相关的入门文章。地址:https://zhuanlan.zhihu.com/ElemeFE

四、学习方式

自学,按照学习路线。成立学习小组,多交流,相互学习。
内部分享,方式大致为每周一次,每人轮流分享。
培训,主要是请前端同学培训相关前端知识。