一、前言
上一篇文章：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没法发送网络共享，只能忍痛让手机开热点给电脑连接，才得以在手机端看到效果。
也就是说要确保手机端能够显示出效果，最好是由电脑发送网络共享给手机连接。
以下是手机端的效果：
手机端的效果.jpeg
明天到公司换个环境测试一下。。。
2017/01/09 更新：
到公司测试后发现只要在同一网络下，手机扫描二维码都能够正常显示。可能是家里环境问题。
网友评论