1.4 运行第一个应用

WeX5开发一个手机应用的过程如下。

1.环境准备

进入官网下载中心，下载WeX5应用快速开发框架。下载后直接解压，解压后的文件夹不能带有中文目录。

2.应用开发

1）首先打开WeX5的开发环境，运行解压后文件夹下的“启动WeX5开发工具”，或者直接运行“studio\studio.exe”启动开发工具。

2）进入工具后，可以看到两个目录：UI2和Native。在UI2上单击鼠标右键，在弹出的快捷菜单中选择“新建→应用”，在打开的窗口中，在“文件夹名”文本框中填写“hello”，如图1-26所示。此时，在UI2下就会自动生成一个“hello”的目录。

图1-26 “新建文件夹”窗口

3）在hello目录上单击鼠标右键，在弹出的快捷菜单中选择“新建.w文件”，此时可以通过向导模式新建自己的页面。在打开的窗口中选择“标准→空白”，在“文件名”文本框中填写“index”，如图1-27所示。这里的文件名不限于这个，可以随意起名，然后单击“完成”按钮。系统生成了两个文件，即index.w和index.js，并且使用UI设计器打开index.w。

图1-27 w文件图

4）接下来进行页面布局。往这个空白页面上放一个input、一个output和一个按钮，最终达到的效果是，在input中输入一个内容，然后单击按钮，让相关内容显示到output中。

5）界面布局：在studio中右侧的组件栏将一个input和一个output组件分别拖拽到工作区，第一行显示一个input，第二行直接放上output组件。在左下角属性中找到input的属性“bind-value”命名为“name”，然后output的属性“bind-text”设置为“name”。如图1-28所示。

图1-28 界面布局

6）然后用同样方法增加按钮组件，如图1-29所示。

图1-29 设计界面

7）最后将页面切换到JS页面，增加两行。

js代码如下：

通过组件output的xid来获取组件的js对象，然后将变量的值赋值给output组件，将值输出。

3.调试运行，本地打包

（1）模拟器运行调试

使用模拟器前，必须启动Tomcat，启动时有红色和黑色字是正常的，但出现蓝色字就是发生了错误，要根据错误具体进行排查。在需要运行的.w文件上单击鼠标右键，然后单击“模拟运行”，此时，在input窗中输入“小伙伴”，单击“确定”按钮，下面的ouput窗就会显示“输出：小伙伴”。

（2）谷歌Chorme浏览器调试

打开Chrome浏览器，按〈F12〉键进入调试模式，单击手机模式后选择手机设备；在浏览器地址栏输入：http://127.0.0.1:8080/x5，按〈Enter〉键后即出现开发的界面，如图1-30所示；在input窗口中输入“小伙伴”，单击“确定”按钮，运行结果如图1-31所示。

（3）真机调试

真机调试需要打包一个App，使用手机下载安装，将手机连接到计算机方后可进行调试。以下以安卓为例介绍这个过程。

图1-30 开发界面

图1-31 hello.w运行结果

1）生成本地App：在Native目录上单击鼠标右键，新建本地App，资源不要选，只填写服务器地址和首页，此时系统访问时读取的是服务器上最新的资源，这样修改后可直接体现修改效果。服务地址：http://IP:端口（端口默认8080）。首页：/x5/UI2/hello/ index.w。

下面的资源都不要选。

2）填写应用名：hello。

3）填写版本号：一定要是三段的，如1.0.0。

4）填写应用包名：com.justep.x5.hello。该包名不能跟自己开发的其他应用相同，是应用的唯一ID。

5）选择“完成后启动App生成向导”，单击“完成”按钮。

6）选择安卓；不选择为“本地快捷打包”。如果使用未越狱的苹果手机调试，要使用服务器打包才可以。

7）经过几分钟，就完成打包。

8）使用安卓手机扫描二维码，下载安装后使用数据线连接到计算机上。