一、前言

上一篇文章：Weex系列（1）- Weex环境安装，了解了Weex的开发环境安装，接下来简单实现下Hello World。

二、实现Hello World

1、安装Weex编辑工具Sublime

为了方便代码编辑，我们使用Sublime Text作为Weex的编辑工具。

首先到Sublime Text官网下载最新版Sublime Text3，并双击安装；
接下来我们要让Sublime编辑Weex时能够有高亮显示，首先下载Weex高亮脚本；
Sublime Text 导航栏里选择Tools->Developer->New Syntax：

Sublime Text 新建句法.png

将下载好的Weex高亮脚本文件打开，内容复制到当前文件中，覆盖原有内容，cmd+s保存到默认路径，保存文件名必须为“Plain we.sublime-syntax”。

Sublime Text开启Weex语法高亮，Sublime Text 导航栏里选择View->Syntax->we Component：

Sublime Text开启Weex语法高亮.png

此时编辑.we文件就能够出现代码提示及高亮了，效果如下：

代码高亮.png

2、编写HelloWorld.we 实例

创建文件目录：

HTdeMacBook-Pro:~ CHT$ mkdir ~/Roy/Weex
HTdeMacBook-Pro:~ CHT$ mkdir ~/Roy/Weex/Weex1-HelloWorld

weex程序的文件后缀（扩展名）是“.we”。因此我们创建一个后缀名为“.we”的文件：

HTdeMacBook-Pro:Weex1-HelloWorld CHT$ touch HelloWorld.we

打开HelloWorld.we，写入以下代码：

<template>
    <div class="container">
        <image src="http://9.pic.paopaoche.net/up/2016-7/201671315341.png" class="pic"></image>
        <text class="text">HelloWorld</text>
    </div>
</template>

<style>

    .container{
        align-items: center;
    }
    .pic{
        width: 200px;
        height: 200px;
    }
    .text{
        font-size: 40px;
        color: black;
    }

</style>

使用终端进入该文件目录：

HTdeMacBook-Pro:Weex1-HelloWorld CHT$ cd ~/Roy/Weex/Weex1-HelloWorld

执行以下命令：

HTdeMacBook-Pro:Weex1-HelloWorld CHT$ weex HelloWorld.we

即会在系统默认浏览器中如下页面展示效果：

PC端效果.png

返回终端命令行，输入cmd+c结束当前Node进程。

3、在手机端显示效果

iPhone手机用户请到AppStore中下载WeexPlayground这款app，这是Weex团队专门开发演示官方Demo和调试用的。
回到终端，执行以下命令：

HTdeMacBook-Pro:Weex1-HelloWorld CHT$ weex HelloWorld.we --qr

即会在终端命令行中出现一个二维码，打开刚才下载的WeexPlayground，点击App首页左上角的二维码扫描按钮，扫描二维码。
在出现二维码的同时下方会出现一行提示：

Please download Weex Playground app from https://github.com/a>ibaba/weex and scan this QR code to run your app, make sure your phone is connected to the same Wi-Fi network as your computer runing WeexToolkit.

简单翻译：就是让我们去下载Weex Playground app然后扫描，必须确保电脑跟手机在同一wifi网络下使用。
然而我在初次尝试时手机端一直无法显示，由于电脑也是连的wifi没法发送网络共享，只能忍痛让手机开热点给电脑连接，才得以在手机端看到效果。
也就是说要确保手机端能够显示出效果，最好是由电脑发送网络共享给手机连接。
以下是手机端的效果：