Weex 探索系列(一)初识和环境搭建

Weex 是阿里巴巴 于今年6月份开源的一种跨平台手机应用开发解决方案,只需要一次开发,即可部署在手机 HTML5、Android、iOS 三大平台上。可以采取部分或者全部集成的方式嵌入到原生 Android 和 iOS 应用当中,并且达到 Native App 的体验效果。

Weex 可谓是站在 RN(React Native)的肩膀上借鉴了很多跨平台应用的开发经验,但却又与 RN 不同,在各自 DSL(领域特定语言)上,相比基于 React 框架的 RN ,基于 vue.js 框架的 Weex ,在编程语言上更接近于常见的 Web 开发方式。更多细节区别,可参考「大头鬼」总结的一篇文章:Weex & RecatNative 对比

环境搭建

Weex 是使用 Node.js 开发构建的,所以需要我们的电脑上安装有 Node.js。然后在终端上运行如下命令,即可安装 Weex Toolkit

1
npm install -g weex-toolkit

安装结束后,可使用 weex --verison 检验安装结果并查看 weex 版本。也可以使用 weex --help 查看 weex 命令的所有用法。

初次体验

新建一个文本文件(位置随意),命名为 hello.we (.we 是 weex 源代码的文件格式),并将如下内容复制到该文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div class="container">
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">Hello Weex</text>
</div>
</div>
</template>

<style>
.cell { margin-top: 10; margin-left: 10; flex-direction: row; }
.thumb { width: 200; height: 200; }
.title { text-align: center; flex: 1; color: grey; font-size: 50; }
</style>

打开终端工具,cd 到 hello.we 所在的目录下,执行如下命令,进行源码编译:

1
weex hello.we

编译结束后,电脑上的默认浏览器会打开一个窗口展示运行结果,如图:

Hello Weex On PC

同时在当前目录下生成一个 weex_temp 文件夹,里面是 H5 显示所需要的一些源文件。其中,与 hello.we 文件对应的有一个 hello.js,这种 与 .we 文件一一对应的 .js 的文件也是 Android 和 iOS 工程集成 Weex 时所要用到的文件,我们后续写到 Android 集成时再讲具体怎么用。

除了 PC 浏览器,当然还可以在手机端实现实时预览。前提是需要手机下载安装 Weex Playground App ,并与 PC 保持在同一个局域网内。退出上面的服务( Mac 下使用 Ctrl + C 快捷键组合),运行命令:

1
weex hello.we --qr

终端中会显示一个二维码,打开手机上的 Playground 应用,点击右上角的扫描按钮,扫描这个二维码,即可展示 hello.we 的运行结果,如图:

Hello Weex On Mobile

此时在 hello.we 文件中的任何修改,保存之后都会立即反映在手机端的显示上,无需重新编译。

语法高亮

由于 weex 源代码的文件格式为 .we 格式,默认在文本编辑器中不支持语法高亮,代码看起来很不舒服。不过可以使用 vue.js 的语法高亮来支持 .we 文件的编辑,分别参考 for vimfor Sublimefor ATOM 。这里额外介绍 Sublime 的另外一种处理方式。

第一步,制作 Weex 语法高亮脚本:打开 Sublime Text,依次点击 Tools -> Developer -> New Syntax,新建一个语法文件,打开 gist 链接 Plain we.sublime-syntax,复制内容到刚才新建的语法文件中,并保存,文件名和扩展名为 Plain we.sublime-syntax

第二步,开启 weex 语法高亮支持:依次点击 View -> Syntax,选中 We Component 即可。支持 Weex 文件语法高亮的 Sublime Text 编辑器截图如下,整个看上去清爽多了:

Sublime Syntax Highlight For Weex

学习资源

Weex 毕竟开源不久,除了公开的内测,目前还没有大面积推广开来,不过已经在阿里系诸如手淘、天猫、虾米音乐等应用中逐步使用。由于被外界误解为阿里的又一个KPI项目(后续不再维护),相对 RN,外界使用相对较少。不过,随着时间的推移、阿里技术团队的完善和社会技术圈儿的认可,Weex 将不失为 RN 和 Ionic 之外 跨平台应用的又一种出色的解决方案。

当然,现阶段除了官方文档,网上相关资料零零碎碎,可供系统性参考的系列文章不是很多,学习起来可能会经历各种各样的困难。这里整理一些可供学习的资源,罗列如下: