Weex开发系列（一）：初识Weex-CSDN博客

本系列文章将记录 Weex 的学习、开发之路、各种文档干货。鉴于当前 Weex 的普及性不高、文档不全，希望该系列文章能帮助到想要学习或者正在使用 Weex 的童鞋快速入门。

0 系列文章

1 Weex是什么

Weex官网的解释是 Weex 是一个动态化的高扩展跨平台解决方案。就我的理解就是为了达到写一份代码可以同时在移动端（Android端、iOS端），Web端同时运行的目的而开发的一系列系统或者提出了解决方案。这个系统方案包含各种native sdk、weex项目、构建工具、调试工具、文档等等。

类似的解决方案还有React Native。

weex

2 Weex学习基础

作为一个Android开发，一开始接触Weex我是拒绝的。只会一些js和html基础，对我来说是一个很陌生的领域，可以说从零开始。在这我将自己的Weex入门做一个简单介绍。

2.1 前端基础认知

首先要有 Html、Css和Js的简单基础。这个基础可以仅知道各自概念、基本语法、基础页面绘制怎么写就够了。相信一个能较熟练掌握某一门语言的程序员对前端概念应该在大学里都有基础。

2.2 深入学习ES6

ES6是JavaScript的一个标准，也是当前vue2.0使用的标准，当前主流浏览器基本支持。

建议看一遍MDN的JavaScript基础文档和阮一峰的ES6电子书，这个阶段建议大概浏览和查询其中一些陌生的专业名词和知识，对Lambda、模块化（import export）等这些关键词都要有所了解。有个印象，等后面真正用到了回头细看。

2.3 Node.js 和 npm

在学习vue之前，需要先了解node.js 和 npm 的概念。已经对此了解的同学可以直接略过。

Node.js是一个开放源代码、跨平台的、可用于服务器端和网络应用的运行环境。 - From 维基百科

这方面没有太多研究，大概知道这是一个服务器端，类似nginx、apache之类的。（如果解释有误欢迎指出）Node.js使用Google V8 JavaScript 引擎。（听说前端? x 的人都开始研究V8了，我先mark下）

然后就是npm，这个见得比较多。就是一个依赖包管理系统。就像Android里的Gradle一样。说到npm就要提到 package.json 文件，在vue项目、weex项目中都会有这样一个文件，是一个json配置数组。具体的配置规则可以见 npm-package.json，也可以搜索中文翻译。

对于以上的知识，我暂时只做到了了解，如果后面有需要我会细致深入的学习。但对于weex的学习目的来说，暂时只作为一个工具。

2.4 vue学习

vue是一套构建用户界面的渐进式框架。已经是当前前端最流行的前端框架之一。Vue的框架和各种插件的学习点非常多，我是按照下面的顺序进行了vue的入门学习。

进入vue官网，学习了解vue的概念，是个什么东西、做什么用的？然后配合搜索引擎，了解vue的基本发展，概念，使用场景概念等。

使用 vue-cli （又名脚手架）创建一个模板Vue项目,使用WebStorm进行代码编辑，并dev模式跑起来。方便一边看文档，一边手动写代码。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev复制代码

通过脚手架创建好项目，首先我想了解webpack模板创建出来的项目结构是怎样的、入口在哪、配置文件在哪、我该在哪写业务代码、怎么运行等等。于是Google搜索关键字 vue cli webpack结构 ，有很多很好的解释，比如滴滴前端团队的 vue-cli#2.0 webpack 配置分析、Vue.js——60分钟webpack项目模板快速入门等等文章，可以很好的让你对这个项目结构有个初步认识。（注意很多文章内部又有其他教程的指向链接，请不要忽略，因为很多博主本着不重复造轮子的宗旨，会直接贴上已有文章链接）
webpack模板项目中使用了 vue-router ，即 ’路由‘，说到 vue-router 就得说道单页面应用（即SPA）。在vue项目中，现在更加流行单页面应用，并搭配路由使用。这里附上 vue-router 的文档。要有个基本了解。
- [vue-router 中文文档]（router.vuejs.org/zh-cn/）
这些基础知识了解后，开始对照vue文档一个个敲例子，使用dev模式观察结果。敲例子过程中还会涉及到很多其他知识的回顾，比如css、html、ES6 等。要结合上面的文档交互补充知识。

千万别想着等vue学完我再去学weex，所有的知识都是先了解、使用过程中深入的过程。任何没有应用的学习都是耍流氓。
vue 中还有很多东西要去学习，如果有机会我后面都会专门对一些vue知识进行深入学习分析

2.5 Weex学习

终于来到了Weex的学习了解，对一个前端没啥基础的我来说真的不容易，又想快点直接学Weex但是前面基础知识的步骤又跳不过去，实在纠结。

照例，先看 Weex官方文档。并且配合官方 Github 上的 Playground 代码在本地运行起来。（我是运行的android端）以下是我的学习顺序

官方文档浏览一遍（Weex的官方文档不多，完全可以全局浏览一遍）
到Github上，把官方的 Playground 代码下下来。在本地部署好Weex代码和Android代码，并跑起来。
把调试工具 DevTools 也运行起来，学习该怎么web端调试App端的js代码。
由于官方 Playground 中的 weex 代码还是使用 .we 文件进行编译运行，所以我使用官方推荐的脚手架 weex-toolkit 重新生成了一个项目。生成的项目是使用 vue 文件写的，也符合当前 weex 的推荐做法。
自己的Sample项目跑起来后，使用官方的 Playground 项目扫码可以运行。然后我单独创建了一个Android项目，把Playground中核心代码转移过来，形成自己的一个项目结构。
最后基于自己整理出的Android项目框架和 weex-toolkit 生成的 weex-sample 项目把 weex文档-手册中的所有内建组件和内建模块的例子代码敲一遍（也可以直接贴上去看效果）了解官方的组件有哪些功能。这时候写一个使用手机号验证码登录的页面应该没问题。服务端就自己搭建一个模拟下请求即可。

至此，可以说对Weex有了一个入门了解，并且可以写sample页面，可以对写的代码进行调试、运行等。