服务器界面文档,UI2前端框架基础01：应用和页面

define(function(require){

var $ = require("jquery");

var justep = require("$UI/system/lib/justep");

var Model = function(){

this.callParent();

//定义可监控对象

this.name = justep.Bind.observable("");

};

return Model;

});

hello应用页面的目录和文件如下：

3 运行hello应用

hello应用和页面制作好了，怎么运行呢？启动tomact，在浏览器地址栏中输入http://localhost:8080/x5/UI2/hello/hello.w，hello应用和页面就运行起来了。如图：

每个页面都有一个URL，通过这个URL在浏览器中就能够打开这个页面。

上面说到启动tomcat，这儿tomcat服务主要用来做开发调试，应用发布为app后，就可以不需要tomcat服务了。有两个地方可以启动tomcat：

一是点击studio的工具栏的第一个图标，这是启动调试模式tomcat服务

调试模式下每次打开或刷新页面都会刺激重新编译页面，并且让浏览器加载最新的页面而不使用任何缓存。调试模式对开发更方便，每次修改保存后，直接刷新页面即可。调试模式下，由于每次运行都会重新编译页面，所以页面运行会稍慢。

二是运行WeX5目录里的“启动X5运行平台.bat”命令，这是启动正常模式tomcat服务

正常模式下如果页面或资源有缓存可用，就会使用缓存。所以，修改且保存了页面，但刷新浏览器看不到最新的修改时，就要检查下是不是启动了正常模式tomcat。

一般情况下，我们在开发阶段都用调试模式运行tomcat。正常模式的作用在后续文章会讲到。感兴趣的同学可以动手对比下这两种模式，分别启动这两种模式，修改页面并保存，刷新浏览器，看看修改是否立即起作用。

4 编译和部署hello应用

hello应用开发好了，我们需要部署应用，在部署前我们需要编译页面，为什么需要编译呢？

页面(.w)包含有加快开发的自定义的组件标签和属性，不能直接在浏览器里运行，需要编译转换为标准html格式页面后才能加载到浏览器里运行。根据页面编译的时机和输出目标不同，页面有下面两种编译方式。

4.1 页面编译方式一

页面编译方式一利用编译工具把页面(.w)编译为标准的html页面，然后把标准的html页面和相关的资源做发布。发布的资源即可部署到任意的Web服务器，也可打包到本地app。

这种方式，如何操作才能把页面编译为标准的html页面呢？

我们把刚才做的hello应用编译一下，步骤如下：

第一步，在Native下新建hello本地app，不要奇怪，就是Native下，因为Native需要编译UI资源。设置如下图

第二步，Native下的hello应用创建好后，点击右键菜单-“编译使用到的UI资源”，弹出界面后点编译，hello应用就编译好了。编译好的资源在Native/hello/www目录下，如下图:

页面资源编译好后，就可以把这些资源按下文的部署方式部署了。

4.2 页面编译方式二

页面编译方式二是通过UIServer动态编译页面(.w)。编译过程是，当对页面(.w)的请求到达UIServer后，UIServer会先检查是否有该页面的编译转换结果(标准html页面)的缓存，如果有缓存就用缓存响应返回；如果没有缓存，就会先编译页面(.w)为标准html页面，然后缓存并且响应返回。

4.3 UI三种部署运行方式

根据上面两种编译方式，WeX5的UI有下面三种部署运行方式。

部署方式一：页面等应用资源打包到本地app，通过本地app直接访问(编译方式一)

这种部署的具体操作可参考app打包。

部署方式二：页面等应用资源部署到标准Web服务器，通过浏览器或本地app壳访问(编译方式一)

标准Web服务器，可以是tomact、apache、nginx、IIS等任意web服务器。为了方便我们以tomcat为例来部署前面已经编译好的hello应用资源。

第一步：把hello/www目录下的app目录整个拷贝到tomcat下的webapps；

第二步：把app-template下的WEB-INF目录复制到app目录下；

如果还没启动tomcat，启动tomcat。在浏览器地址输入http://localhost:8080/app/hello/hello.w，就可以访问了，这时我们就完全不依赖WeX5的调试运行环境(UIServer)了。

小知识点:

1、编译后的URL还是保持了.w后缀；

2、UI2前的webpath可以自己根据需要设定，这儿就用了app，没有用x5，另外这个webpath也可以是多级目录。

部署方式三：页面等应用资源部署到UIServer，通过浏览器或本地app壳访问(编译方式二)

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!