Weex学习指南

近年来,伴随着大前端概念的提出和兴起,移动端和前端的边界变得越来越模糊,涌现了一大批移动跨平台开发框架和模式。从早期的PhoneGap、inoc等Hybird技术,到现在耳熟能详的React Native、Weex和Flutter等技术,无不体现着移动端开发的前端化。而阿里巴巴在2016年6月开源的Weex移动跨平台框架,语法上使用Vue.js编写,更加贴近Web前端开发,在性能和快速迭代方面,相比其他框架也有一定的优势。

Weex简介

Weex是由阿里巴巴研发的一套移动跨平台技术框架,研发的初衷是为了解决移动开发过程中频繁发版和多端研发的问题。使用Weex提供的跨平台技术,开发者可以很方便的使用Web技术来构建高性能、可扩展的Native级别的性能体验,并支持在Android、iOS、YunOS和Web等多平台上进行部署。具体的说,当在项目中集成WeexSDK之后,就可以使用JavaScript和现代流行的前端框架来开发移动应用。
同时,Weex框架的结构是解耦的,渲染引擎与语法层是分开的,也不依赖任何特定的前端框架,目前主要支持Vue.js和Rax两个前端框架。这样一来,甚至可以使用其他前端框架来驱动Weex,打造三端一致的native应用。

作为一套前端跨平台技术框架,Weex建立了一套源码转换以及Native与Js通信的机制。Weex表面上是一个客户端框架,但实际上它串联起了从本地开发、云端部署到分发的整个链路。
具体来说,在开发阶段编写一个.we文件,然后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle,并将生成的JS bundle上传部署到云端,最后通过网络请求或预下发的方式加载至用户的移动应用客户端。当集成了Weex SDK的客户端接收到JS bundle文件后,调用本地的JavaScript引擎执行环境执行相应的JS bundle,并将执行过程中产生的各种命令发送到native端进行界面渲染、数据存储、网络通信以及用户交互响应。Weex的整个工作流程图如下图所示。
Weex学习指南

类似的解决方案还有React Native,对就是它,大名鼎鼎的Facebook推出来的,提到Weex不得不提到的对手。根据原理图我们来看下,学习weex需要学习哪些知识?

前端知识

上图中最上面是我们的DSL,我们一般叫Weex文件(Weex2.0之后改为Vue),通过transformer这层转化成js文件,部署到Server或者应用内。 学习Weex需要开发者掌握Html、Css和Js基础,以及相关的概念、基本语法、基础页面绘制等前端知识。

JS知识

Weex开发需要开发者掌握的前端知识有:

JavaScript文档
文档:https://developer.mozilla.org... JavaScript文档比较全面。

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

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

关于前端更详细的学习路线可以参考我之前的博客:前端学习路线

Node

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

Vue

Vue.js作为当前流行的三大前端框架之一,是一套构建用户界面的渐进式框架,与其它大型的前端框架不同,Vue被设计为可以自底向上逐层应用。同时,Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

随着Weex 0.10.0版本的发布,Weex正式添加了对vue.js语言的支持,从此开发者便可以使用vue.js来开发Weex应用程序。

使用 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是一个完整且庞大的框架,千万别想着等vue学完我再去学weex,所有的知识都是先了解、使用过程中深入的过程。

相关文档地址:
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-...
Vuex 文档:https://vuex.vuejs.org/zh-cn/
Github:https://github.com/vuejs/vuex/

Weex

终于到了Weex的学习,如果有前端基础的可以直接跳过前面基础知识学习了解。照例,先看Weex官方文档(https://weex.apache.org/cn/),并且配合官方Github上的Playground代码在本地运行起来。
下面说一下对于一个新手来说,如何学习Weex呢?
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学院:https://www.weexdaxue.com/
饿了么前端专栏:https://zhuanlan.zhihu.com/El...

快速入门

“工欲善其事,必先利其器”,学习Weex之前需要先搭建好本地的开发环境,如果只是想简单的体验下Weex的魅力,可以使用Weex提供的dotWe在线运行环境,地址为“http://dotwe.org/vue”。

Weex官方提供weex-toolkit的脚手架工具来辅助开发和调试。不过需要先安装Node.js和Weex Cli环境。

安装Node

安装Node.js方式多种多样,最简单的方式是直接从Node.js官网下载可执行安装程序直接安装。如果是Mac环境,还可以使用Homebrew进行安装,安装命令如下:

brew install node

安装完成之后,可以使用下面的命令来检测是否安装成功。

$ node -v
v6.11.3
$ npm -v
3.10.10

通常,安装了Node.js环境,npm包管理工具也随之安装了。因此,接下来可以直接使用npm来安装weex-toolkit工具。

npm install -g weex-toolkit

如果要升级weex-toolkit,则可以使用下面的命令:
weex update weex-devtool@latest // @后标注版本后,latest表示最新版本
如果是国内开发者,还可以使用淘宝的npm镜像来安装weex-toolkit,涉及到的安装命令如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit

安装结束后,可以直接使用weex命令来验证是否安装成功,如果安装成功会显示weex命令行工具各参数。

安装weexpack

weexpack是weex新一代的工程开发套件,是基于weex快速搭建应用原型的利器。使用weexpack可以快速的帮助开发者通过命令行创建weex工程和插件工程,添加相应平台的weex 应用模版,weexpack还支持快速打包weex 应用并安装到手机运行,并创建weex插件模版并发布插件到weex应用市场。安装weexpack的命令如下:

npm install -g weexpack

安装Weektools

weex-toolkit是官方提供的一个脚手架命令行工具,可以使用它进行Weex 项目的创建、调试以及打包等操作。weex-toolkit从1.0.1版本之后才开始支持初始化Vue项目,所以使用时请注意weex-toolki的版本。weex-toolkit的安装命令如下:

npm install -g weex-toolkit

如果使用上面的命令安装,使用的是从https://registry.npmjs.org获...,所以对于国内用户来说,最好选择从阿里的镜像去下载,安装时需要执行如下的一些命令。

npm install -g cnpm --registry=https://registry.npm.taobao.org  //淘宝镜像
npm install -g weex-toolkit

安装完成之后,可以使用weex -v或者weex命令来验证是否安装成功。

安装Android环境

如果需要支持Android平台则需要配置Android开发环境:安装Java相关环境,安装Android Studio及Android SDK。在安装编译Android项目时需要保证Android build-tool的版本为23.0.2以上。

安装iOS环境

如果需要支持iOS平台则需要配置iOS开发环境:安装Xcode、cocoaPods及其相关环境。其中,Xcode是Apple 公司提供的集成开发工具,可以使用它开发macOS和iOS应用程序,而CocoaPods则是负责iOS项目管理的第三方开源库的工具,合理的使用CocoaPods可以提高程序的开发效率。

接下来,使用Weex提供的create命令初始化一个Weex项目。例如:
weex create weexdemo
执行完上述命令后,在工程weexdemo目录下就会创建一个使用Weex和Vue的模板项目,工程目录如下图所示。
Weex学习指南

未完待续!!!

相关推荐