Weex学习第二篇：Hello world

曾经何时，我以为学习一门语言或者是新技术，只要能写出Hello world，就算是学会了。这个思想困扰了我很久，以至于之前整理电脑的时候发现php，python，ruby，phonegap，react native，go，node.js，.net这些文件夹中都是只有hello world的代码，非常惭愧。

但是不可否认的是，Hello world是一个好的开始。

输出Hello world有两种方式：
1.是在线调试 http://dotwe.org/
2.本地搭建环境开发

下面来介绍一下官方本地开发的步骤：
第一步：安装依赖

首先，你需要 Node.js 和 weex-toolkit。

安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。

对于 Mac，可以使用 Homebrew 进行安装：

brew install node
更多安装方式可参考 Node.js 官方信息

安装完成后，可以使用以下命令检测是否安装成功：

$ node -v
v6.3.1
$ npm -v
3.10.3
通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。

npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。

$ npm install -g weex-toolkit
国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

$ npm install -g cnpm
$ cnpm install -g weex-toolkit
提示：

如果提示权限错误（permission error），使用 sudo 关键字进行安装

$ sudo cnpm install -g weex-toolkit
安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：

第2步：创建文件

现在可以开始编写代码了。首先，我们创建一个 .we 文件（Weex 程序的文件后缀（扩展名）是 .we）。

打开空白的 hello.we 文件，输入三个标签，内容为：

<template>
</template>

<style>
</style>

<script>
</script>
我们在 Get started 里已经介绍过 Weex 基本的代码结构：<template>、<style>、<script> 分别对应于 Web 中的 HTML，CSS（<style> 标签），JavaScript（<script> 标签）。

其实，上面的代码就是最简单的 Weex 程序。但是 .we 文件是不能直接运行的，这时候需要使用刚才安装好的 weex-toolkit。weex-toolkit 会编译 .we 文件，并且创建静态服务器。

这里，使用 weex hello.we 命令编译该程序。

$ weex hello.we
这时，命令行会做几件事：

编译 .we 文件；
启动热加载服务；
启动静态服务器；
拉起浏览器，访问 http://127.0.0.1:8081/weex_tm...
这时候，已经可以在浏览器预览 Weex 页面了。不过此时页面是空白的，因为 .we 文件中没有任何实质的内容。

第3步：添加内容

修改 weex.we 文件，向 <template> 标签中添加内容。具体代码如下：

<template>
<div>

<text>Hello world</text>

</div>
</template>

<style></style>

<script></script>
保存代码后，浏览器会自动刷新页面，这时会看到浏览器显示了 “Hello world”。

第4步：添加样式

现在，对已有的文本内容进行样式修饰。这里将文本颜色设置为红色，字体大小为 50 像素。具体代码如下：

<template>
<div>

<text class="text" style="color: #FF0000;">Hello world</text>

</div>
</template>

<style>
.text{

font-size: 50;

}
</style>

<script></script>
这时候，浏览器已经重新载入了页面。其实，是weex-toolkit开启了热加载。可以看到红色的 “Hello world”。

注意： Weex 支持通过 style 标签来设定样式，也支持内联样式风格。 对于数值，无需添加任何单位（包括 px、em、rem 等），这是建议的写法。如需了解有哪些通用的样式，可以参考 通用样式。

第5步：预览

已经在浏览器中看到了刚才的代码效果，为了验证三端是否一致，我们还需 Playground App 验证。

这里，我们需要为 weex hello.we 增加 --qr 参数，表示生成二维码。

$ weex hello.we --qr
然后，使用 Playground 扫码即可。

mobile_preview

第6步：调试

weex-toolkit 已经集成了 Debugger，只需要使用如下命令即可开启 Debugger 开关调试 hello.we：

$ weex debug hello.we
我们输入以上命令开启，会自动打开浏览器，页面上有两个二维码，第一个是 Debugger Server，第二个是 .we 文件的地址。我们在 Playground 中先扫第一个，此时浏览器会进入一个新的页面，请你选择你需要的调试模式：

Debugger：将会打开 js debugger 页面，您可以通过 debugger 页面调试 js（诸如打断点 查看js log 和查看调用堆栈等信息）；
Inspector：将会打开 inspector 页面，您可以通过这个页面查看 Weex 页面的 element 属性结构，包含高亮元素，展示样式表，以及显示 native 的 log。同时可以打开一个远程的手机镜像，便于查看界面。另外调试方块中的 ElementMode 可以用来选择 element 树显示原始的 native 组件树还是显示面向前端同学的 DSL （HTML）组件树。
选择一种模式后会新开窗口进入调试页面，这时我们再扫第二个二维码即可进入我们想要调试的页面进行调试了。

总结：不出意外的话按照官方给出的步骤，都可以输出hello world。需要注意的是在安装命令的时候有的需要“sudo + 命令”用管理员权限，否则会报“error file + 路径”之类的错误，意思是无法在某个路径下创建文件，或者无法写入数据等等。如果之前安装过npm的话，可能版本需要升级，如果版本过旧不升级直接装weextoolkit也会报error。

提示：如果实在是做不出来，个人建议还是可以略过，因为真正重要的是编程思想，框架的使用和具体API的运用。可以继续往下学习，有可能现在不明白的地方，到后面可能就会理解的，因为这只是其中一个方面，当整个过程都完整的学习过后就会有一个大画面，之前的一些疑惑就是这个大画面的小缺口，当大画面清晰后，小缺口自然也就能弥补上。所以建议大家坚持学习，不要放弃，要有专注，专研的精神，同时也要有大局观，懂得取舍。

参考文章：http://weex-project.io/cn/doc...