写给 iOS 程序员的 Weex 教程(1):hello, world

2017/1/10 22:51 下午 posted in  iOS comments

前言

本系列文章所使用的 Weex iOS SDK 是 0.9.4,Xcode版本是 8.2, 系统版本是 macOS 10.12.2。
本系列所有内容是基于 iOS 的环境所写,Android 和 HTML5 没有试过。适合想要接触 Weex 的 iOS 开发者看。当然,基本概念是一样的,我只是没在其他平台去测试。

环境搭建

Weex 有一个可以在线调试编辑网站 dotWe,适合简单试用。正式开发建议安装一下本地开发环境。
Weex 开发依赖 Node.js。可以去官网下载安装,或者通过 Homebrew 安装:

$ brew install node

通过检查版本来确认是否安装成功:

$ node -v #检查 Node 版本
$ npm -v #检查 npm 版本

npm 是 Javascript 的包管理器,我们需要用它来安装 Weex 的开发工具包 weex-toolkit:

$ npm install -g weex-toolkit # -g 表示是安装到全局环境

如果安装缓慢的话,可以用淘宝的镜像 https://npm.taobao.org
可以在终端里运行一下 weex 命令来验证是否安装成功。(现在我安装到的最新版是 1.0.1-alpha)

至此,环境就搭建好了。

第一个工程:Hello, world

我们新建一个文件夹用来存放工程文件,并用 weex init 命令初始化:

$ mkdir hello
$ cd hello
$ weex init

weex init 会询问工程名,默认是文件夹的名字,用默认的就行。结束后会在当前文件夹下生成以下几个文件:

.
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
│   └── weex-bootstrap.we
└── webpack.config.js

package.json 是用来声明当前工程依赖的 JavaScript 包,里面已经声明了 Weex 会用的一些依赖。这些依赖现在还没安装,需要先用 npm install 命令安装一遍:

$ npm install

和之前装 weex-toolkit 不同,现在不带任何参数。此时它会在当前目录着 package.json 文件,然后按照里面的内容去把依赖安装到当前目录下的 node_modules 文件夹下。

webpack.config.js 文件是 webpack 的配置文件。webpack 是一个 JavaScript 的打包工具,可以文件依赖关系把多个 JavaScript 文件打包成一个。我们将会用它来把 Weex 文件打包成 JS Bundle 格式,现在先不着急管它。

index.html 是在游览器里预览 Weex 程序的入口文件,现在也不用管。

src 目录用来存放源代码,当然也可以用其他目录,只是没必要。 weex-bootstrap.we 文件是一个 demo 文件。现在我们来尝试把它运行起来:

$ weex debug src/weex-bootstrap.we

weex debug 命令是一个调试命令,适合用调试单个文件,它会做 3 件事:

  1. 编译指定文件到 JS Bundle 格式,并开启监听服务,文件有改动会立即重新编译,刷新客户端页面;
  2. 开启调试服务;
  3. 开始一个小型的 Web 服务,方便客户端,游览器访问;

完成之后会自动打开游览器,显示调试页面;页面下半部分显示两个二维码,左边是调试服务地址,右边是刚才编译的 Weex 文件地址。现在可以用手机上的 Playground 应用来扫描这两个。先扫面左边的,连接好调试服务;再扫面右边的,显示 demo 界面。

现在可以用任何一个文本编辑器来编辑 weex-bootstrap.we 文件,免费的推荐用 Sublime Text。可以试着做一些修改并保存,看看手机上的效果。

到此你已经完成了第一个 Weex 程序,虽然没写一行代码😛。

理解 Weex

看到这,大家可能还是一头雾水,不理解如何用 Weex。我就从使用者的角度来说说 Weex。
weex代码在使用前需要经过 weex 编译工具打包成 jsbundle 文件。这个文件内容看过就明白,全是 javascript 代码。那要如何运行这段代码呢?这就需要用到 weex sdk提供的 WXSDKInstance

WXSDKInstance 类代表着当前 weex 的上下文环境。我们可以用它来加载 jsbundle 文件并与它打交道。通过 WXSDKInstance 来指定 weex 所在的容器 view 的大小。也是通过它来将渲染后的 view 放在界面上的指定的位置。

当我们想要告诉 weex 环境里的代码某些事件时,通过 WXSDKInstancefireGlobalEvent:(NSString *)eventName params:(NSDictionary *)params 方法。当 weex 的代码想告诉本地代码一些事情时,则通过自定义的 module 来实现。

以上就是 weex 的基本使用方法。现在只需要理解就好,后面会带着大家一步步深入。

小结

最后,建议大家先熟悉一下 JavaScript 语言,后面基本全都是用它写。这里有几个语言教程,大家自己看吧:

顺便,也了解一下 CSS 和 HTML,暂时不用掌握多深,Weex 界面样式语法只是他们的一个很小的子集。

下一遍将会打造自己的 iOS 应用,用来运行 Weex 文件,方便以后调试。