Weex 探索系列（一）初识和环境搭建

Weex 是阿里巴巴 于今年6月份开源的一种跨平台手机应用开发解决方案，只须要一次开发，便可部署在手机 HTML五、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 ：

npm install -g weex-toolkit复制代码

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

初次体验

新建一个文本文件（位置随意），命名为 hello.we （.we 是 weex 源代码的文件格式），并将以下内容复制到该文件中：

<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 所在的目录下，执行以下命令，进行源码编译：

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 快捷键组合），运行命令：

weex hello.we --qr复制代码

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

Hello Weex On Mobile

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

语法高亮

因为 weex 源代码的文件格式为 .we 格式，默认在文本编辑器中不支持语法高亮，代码看起来很不舒服。不过可使用 vue.js 的语法高亮来支持 .we 文件的编辑，分别参考 for vim、for Sublime、for 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 以外 跨平台应用的又一种出色的解决方案。

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

• Weex On GitHub

• Weex Doc 英文版 & 中文版

• Weex 交流社区

• Weex Team On GitHub

最后

---

本文由 亦枫 创做并首发于 亦枫的我的博客 ，同步受权微信公众号：技术鸟（NiaoTech）。

欢迎各类形式地交流与转载，注明做者及出处便可。

本文标题为: Android WebView —— Java 与 JavaScript 交互总结

本文连接为：yifeng.studio/2016/12/01/…