Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。也就是说学习了Weex就可以生成三端的程序。
Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特定的前端框架。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发,同时 Weex 也对这两个前端框架提供了最完善的支持。Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合,实现开发效率和运行性能的高度统一。在开发阶段,一个 Weex 页面就像开发普通网页一样;在运行时,Weex 页面又充分利用了各种操作系统的原生组件和能力。
Weex 应用需要依赖前端框架来编写,但 Weex 并没有绑定、限制在特定的框架上。目前 Vue.js 和 Rax 是最广泛应用于 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
安装项目所需依赖。
运行完后程序会自动在浏览器上打开一个如上的界面,这时我们就可以在手机上安装一个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