Weex开发系列（一）：初识Weex

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

0 系列文章

系列整理 Weex开发系列之文档整理
系列一 初识Weex

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）等这些关键词都要有所了解。有个印象，等后面真正用到了回头细看。

1. MDN JavasScript文档
2. ECMAScript 6 入门

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的入门学习。

1. 进入vue官网，学习了解vue的概念，是个什么东西、作什么用的？而后配合搜索引擎，了解vue的基本发展，概念，使用场景概念等。
2. 使用 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复制代码

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

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

2.5 Weex学习

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

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

1. 官方文档浏览一遍（Weex的官方文档很少，彻底能够全局浏览一遍）
2. 到Github上，把官方的 Playground 代码下下来。在本地部署好Weex代码和Android代码，并跑起来。
3. 把调试工具 DevTools 也运行起来，学习该怎么web端调试App端的js代码。
4. 因为官方 Playground 中的 weex 代码仍是使用 .we 文件进行编译运行，因此我使用官方推荐的脚手架 weex-toolkit 从新生成了一个项目。生成的项目是使用 vue 文件写的，也符合当前 weex 的推荐作法。
5. 本身的Sample项目跑起来后，使用官方的 Playground 项目扫码能够运行。而后我单首创建了一个Android项目，把Playground中核心代码转移过来，造成本身的一个项目结构。
6. 最后基于本身整理出的Android项目框架和 weex-toolkit 生成的 weex-sample 项目把 weex文档-手册 中的全部内建组件和内建模块的例子代码敲一遍（也能够直接贴上去看效果）了解官方的组件有哪些功能。这时候写一个使用手机号验证码登陆的页面应该没问题。服务端就本身搭建一个模拟下请求便可。

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

3 结尾

整个前端的知识不只广并且深，上面内容中的每一点拿出来均可以说好多好多。上面只是我我的的一个Weex入门学习路径，旨在帮助一些彻底没有前端基础的人有个学习目标和大体路线。我本身自己也是在刚入门的路上。后面深刻过程会仔细的把一些小点专门拿出来进行深刻学习。

感受不光学习前端，不少知识的学习都是要依赖于真正的应用。没有应用开发的驱动，空无目的的学习知识效率很低并且没有目的性。

最后个人 Weex开发系列之文档整理 正在进行中，但愿你们在评论中提供好的前端干货资源。

更多文章关注个人公众号

个人公众号