如何提升服务质量.doc
《如何提升服务质量.doc》由会员分享,可在线阅读,更多相关《如何提升服务质量.doc(14页珍藏版)》请在文库网上搜索。
1、本篇文章以最简单的 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 的第二代 We
2、b UI;Native:用作移动 app 开发;Baas:后端即服务 Backend as a Service,为前端展现提供后端服务,例如访问数据库等等。看上图 UI2 下的目录,所有的 Web 资源按目录组织,可以任意多级目录。system 目录包含 UI2 框架的核心 js 库、css 和组件等资源。UI2 下除 system 目录之外的第一级目录我们通常称为一个 Web 应用,比如 Demo、takeout 就是 WeX5 自带的综合演示和外卖两个应用。每个应用由多个页面和相关的资源组成,比如外卖有一个页面(index.w),demo 应用就可以看到很多个页面。开发 WeX5 的应用,
3、就是利用系统 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
4、制作一个简单的 hello 应用下面开发一个简单的 hello 应用,该应用只包含一个 hello 页面。hello 页面包含 hello.w和 hello.js 两个文件,没有特殊样式,所有不需要 hello.css 样式文件。在这个页面里放一个输入框(input)、一个输出框(output) ,功能就是在 input 里输入名字,output 就会立即动态显示“hello,名字 !”。在 Studio 里新建一个 hello 的空白页面,把下面代码拷贝粘贴到相应文件。hello.whello.jsdefine(function(require)var $ = require(“jquery
5、“);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
6、,通过这个 URL 在浏览器中就能够打开这个页面。上面说到启动 tomcat,这儿 tomcat 服务主要用来做开发调试,应用发布为 app 后,就可以不需要 tomcat 服务了。有两个地方可以启动 tomcat:一是点击 studio 的工具栏 的第一个图标,这是启动调试模式 tomcat 服务调试模式下每次打开或刷新页面都会刺激重新编译页面,并且让浏览器加载最新的页面而不使用任何缓存。调试模式对开发更方便,每次修改保存后,直接刷新页面即可。调试模式下,由于每次运行都会重新编译页面,所以页面运行会稍慢。二是运行 WeX5 目录里的“启动 X5 运行平台.bat”命令,这是启动正常模式 to
7、mcat 服务正常模式下如果页面或资源有缓存可用,就会使用缓存。所以,修改且保存了页面,但刷新浏览器看不到最新的修改时,就要检查下是不是启动了正常模式 tomcat。一般情况下,我们在开发阶段都用调试模式运行 tomcat。正常模式的作用在后续文章会讲到。感兴趣的同学可以动手对比下这两种模式,分别启动这两种模式,修改页面并保存,刷新浏览器,看看修改是否立即起作用。4 编译和部署 hello 应用hello 应用开发好了,我们需要部署应用,在部署前我们需要编译页面,为什么需要编译呢?页面(.w) 包含有加快开发的自定义的组件标签和属性,不能直接在浏览器里运行,需要编译转换为标准 html 格式页
8、面后才能加载到浏览器里运行。根据页面编译的时机和输出目标不同,页面有下面两种编译方式。4.1 页面编译方式一页面编译方式一利用编译工具把页面(.w)编译为标准的 html 页面,然后把标准的 html页面和相关的资源做发布。发布的资源即可部署到任意的 Web 服务器,也可打包到本地app。这种方式,如何操作才能把页面编译为标准的 html 页面呢?我们把刚才做的 hello 应用编译一下,步骤如下:第一步,在 Native 下新建 hello 本地 app,不要奇怪,就是 Native 下,因为 Native 需要编译 UI 资源。设置如下图第二步,Native 下的 hello 应用创建好后
9、,点击右键菜单-“编译使用到的 UI 资源”,弹出界面后点编译,hello 应用就编译好了。编译好的资源在 Native/hello/www 目录下,如下图:页面资源编译好后,就可以把这些资源按下文的部署方式部署了。4.2 页面编译方式二页面编译方式二是通过 UIServer 动态编译页面(.w)。编译过程是,当对页面 (.w)的请求到达 UIServer 后,UIServer 会先检查是否有该页面的编译转换结果( 标准 html 页面)的缓存,如果有缓存就用缓存响应返回;如果没有缓存,就会先编译页面(.w) 为标准 html 页面,然后缓存并且响应返回。4.3 UI 三种部署运行方式根据上面
10、两种编译方式,WeX5 的 UI 有下面三种部署运行方式。部署方式一:页面等应用资源打包到本地 app,通过本地 app 直接访问(编译方式一)这种部署的具体操作可参考 app 打包。部署方式二:页面等应用资源部署到标准 Web 服务器,通过浏览器或本地 app 壳访问(编译方式一)标准 Web 服务器,可以是 tomact、apache、nginx、IIS 等任意 web 服务器。为了方便我们以 tomcat 为例来部署前面已经编译好的 hello 应用资源。第一步:把 hello/www 目录下的 app 目录整个拷贝到 tomcat 下的 webapps;第二步:把 app-templa
11、te 下的 WEB-INF 目录复制到 app 目录下;如果还没启动 tomcat,启动 tomcat。在浏览器地址输入localhost:8080/app/hello/hello.w,就可以访问了,这时我们就完全不依赖 WeX5 的调试运行环境(UIServer) 了。小知识点:1、编译后的 URL 还是保持了 .w 后缀;2、UI2 前的 webpath 可以自己根据需要设定,这儿就用了 app,没有用 x5,另外这个webpath 也可以是多级目录。1一 月 二 月 三 月产品名称 数量 金额 利润 产品名称 数量 金额 利润 产品名称 数量 金额 利润合 计 合 计 合 计四 月 五
12、月 六 月产品名称 数量 金额 利润 产品名称 数量 金额 利润 产品名称 数量 金额 利润合 计 合 计 合 计下午 13:00 17:00B实行不定时工作制的员工,在保证完成甲方工作任务情况下,经公司同意, 可自行安排工作和休息时间。312 打卡制度3.1.2.1 公司实行上、下班指纹录入打卡制度。全体员工都必须自觉遵守工作时间,实行不定时工作制的员工不必打卡。3.1.2.2 打卡次数:一日两次,即早上上班打卡一次,下午下班打卡一次。3.1.2.3 打卡时间:打卡时间为上班到岗时间和下班离岗时间; 3.1.2.4 因公外出不能打卡:因公外出不能打卡应填写 外勤登记表 ,注明外出日期、事由、
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 提升 服务质量