Weex简介和环境的安装——Weex的学习之路(一)

时间:2024-03-22 15:36:42

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。也就是说学习了Weex就可以生成三端的程序。

Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特定的前端框架。目前 Vue.jsRax 这两个前端框架被广泛应用于 Weex 页面开发,同时 Weex 也对这两个前端框架提供了最完善的支持。Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合,实现开发效率和运行性能的高度统一。在开发阶段,一个 Weex 页面就像开发普通网页一样;在运行时,Weex 页面又充分利用了各种操作系统的原生组件和能力。

Weex 应用需要依赖前端框架来编写,但 Weex 并没有绑定、限制在特定的框架上。目前 Vue.jsRax 是最广泛应用于 Weex 开发的前端框架,也是目前功能最全、最稳定的方案。

下面我们来看看Weex开发环境的安装:

一.安装依赖

Weex 官方提供了weex-toolkit 的脚手架工具来辅助开发和调试。

首先,你需要 Node.js 和 Weex CLi。安装 Node.js 方式多种多样,最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit, 你也可以通过 yarn 来进行安装。国内的开发者推荐将npm镜像切换至 Taobao NPM 镜像

运行下面的命令安装最新的beta版本工具:

 

npm install -g [email protected]
weex -v // 查看当前weex工具版本

 安装结束后你可以直接使用 weex help 命令验证是否安装成功,它会显示 weex 支持的所有指令,同时,你也可以通过 weex doctor 命令检查你的本地开发环境。

二.初始化项目

初始化 Weex 项目的命令:

weex create awesome-project

 执行完命令后,在 awesome-project 目录中已经为我们生成了标准项目结构。

三.demo开发

进入项目所在路径,如果你在生成项目的时候选择了自动安装依赖,在进入项目后只需直接运行 npm start 就可以将项目完整跑起来,否则,你需要预先在项目中运行一下 npm install 安装项目所需依赖。

Weex简介和环境的安装——Weex的学习之路(一)

运行完后程序会自动在浏览器上打开一个如上的界面,这时我们就可以在手机上安装一个WeexPlayground然后用这个App扫描上图的二维码,那么这个就是Weex项目的Hello word了。

学习Weex也有一段时间了,一直没有写博客,后续我会将我的学习经历和踩坑写在博客里供大家参考!

参考文档:

Weex的中文官方地址:https://weex.apache.org/zh/guide/introduction.html;

Weex Ui地址:https://alibaba.github.io/weex-ui/#/cn/with-weex-toolkit;

Vue.js的官方地址:https://cn.vuejs.org/v2/guide/installation.html