一、前言
上一篇文章: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:
将下载好的Weex高亮脚本文件打开,内容复制到当前文件中,覆盖原有内容,cmd+s保存到默认路径,保存文件名必须为“Plain we.sublime-syntax”。
- Sublime Text开启Weex语法高亮,Sublime Text 导航栏里选择View->Syntax->we Component:
- 此时编辑.we文件就能够出现代码提示及高亮了,效果如下:
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
即会在系统默认浏览器中如下页面展示效果:
返回终端命令行,输入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没法发送网络共享,只能忍痛让手机开热点给电脑连接,才得以在手机端看到效果。
也就是说要确保手机端能够显示出效果,最好是由电脑发送网络共享给手机连接。
以下是手机端的效果:
明天到公司换个环境测试一下。。。
2017/01/09 更新:
到公司测试后发现只要在同一网络下,手机扫描二维码都能够正常显示。可能是家里环境问题。