(如何快速理解WeX5中UI2的应用和页面2.docxVIP

　本篇文章以最简单的hello应用为例，介绍WeX5中UI2前端框架的应用、页面的概念，以及页面的两种编译方式和应用的三种部署方式。　目录　 1 UI2的应用和页面　 2 制作一个简单的hello应用　3 运行hello应用4 编译和部署hello应用 4.1 页面编译方式一　 4.2 页面编译方式二　 4.3 UI三种部署运行方式　　1 UI2的应用和页面　启动WeX5 Studio，可以看到模型资源目录下有UI2、Native和Bass三个目录：　UI2：包含了所有WebUI的资源(.w、html、js、csss、图片等)，为啥叫UI2，因为这是WeX5的第二代Web UI;　Native：用作移动app开发;　Baas：后端即服务Backend as a Service，为前端展现提供后端服务，例如访问数据库等等。　　看上图UI2下的目录，所有的Web资源按目录组织，可以任意多级目录。system目录包含UI2框架的核心js库、css和组件等资源。UI2下除system目录之外的第一级目录我们通常称为一个Web应用，比如Demo、takeout就是WeX5自带的综合演示和外卖两个应用。每个应用由多个页面和相关的资源组成，比如外卖有一个页面(index.w)，demo应用就可以看到很多个页面。开发WeX5的应用，就是利用系统js库、css库和组件编写应用页面(.w)。　页面是UI2的核心，页面是一个相对独立可复用的界面展现和交互单元，它即可作为Web页面独立运行，也可作为一个页面片段嵌入到别的页面运行。每个页面包括.w、.js和.css三个同名文件，.w是页面的主文件，.js和.css可以没有。如果页面有.js和.css文 件，.w在编译运行时会自动引入, 不需要手工在.w里链接引用。比如外卖页面包含index.w、index.js、index.csss三个文件，在浏览器请求index.w时，index.w会自动请求index.js和index.css。　2 制作一个简单的hello应用　下面开发一个简单的hello应用，该应用只包含一个hello页面。hello页面包含hello.w和hello.js两个文件，没有特殊样式，所有不需要hello.css样式文件。在这个页面里放一个输入框(input)、一个输出框(output)，功能就是在input里输入名字，output就会立即动态显示“hello,名字!”。在Studio里新建一个hello的空白页面，把下面代码拷贝粘贴到相应文件。　hello.w ?xml version=1.0 encoding=UTF-8? div xmlns=/1999/xhtml xid=window class=window component=$UI/system/components/justep/window/window design=device:mobile div component=$UI/system/components/justep/model/model xid=model/ !-- 绑定可监控对象 -- input bind-textinput =name/input !-- name有值就显示output，否则隐藏 text绑定了表达式-- output bind-visible = name bind-text =hello, + name.get() + !/output /div　hello.js　 define(function(require){ var $ = require(jquery); var justep = require($UI/system/lib/justep); var Model = function(){ this.callParent(); //定义可监控对象 = 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服务　调试模式下每次打开或刷新页面都会刺激重新编译页面，并且让浏