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
  1. 通过脚手架创建好项目,首先我想了解webpack模板创建出来的项目结构是怎样的、入口在哪、配置文件在哪、我该在哪写业务代码、怎么运行等等。于是Google搜索关键字 vue cli webpack结构 ,有很多很好的解释,比如滴滴前端团队的 vue-cli#2.0 webpack 配置分析Vue.js——60分钟webpack项目模板快速入门 等等文章,可以很好的让你对这个项目结构有个初步认识。(注意很多文章内部又有其他教程的指向链接,请不要忽略,因为很多博主本着不重复造轮子的宗旨,会直接贴上已有文章链接)
  2. webpack模板项目中使用了 vue-router ,即 ’路由‘,说到 vue-router 就得说道单页面应用(即SPA)。在vue项目中,现在更加流行单页面应用,并搭配路由使用。这里附上 vue-router 的文档。要有个基本了解。
  1. 这些基础知识了解后,开始对照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开发系列之文档整理 正在进行中,希望大家在评论中提供好的前端干货资源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容