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的整个工作流程图如下图所示。

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

前端知识

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

JS知识

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

JavaScript文档

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

ES6是JavaScript语言的最新标准。

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

文档http://liubin.org/promises-book/#chapter1-what-is-promise 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/

Githubhttps://github.com/vuejs/vue

vue-router文档https://router.vuejs.org/zh-cn/

Githubhttps://github.com/vuejs/vue-router

Vuex 文档https://vuex.vuejs.org/zh-cn/

Githubhttps://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/ElemeFE

快速入门

“工欲善其事必先利其器”学习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=  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-toolkit12

安装完成之后可以使用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的模板项目工程目录如下图所示。

本文转载自异步社区

JavaScript web前端 Node.js

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。