拿WeX5自带的外卖来说举例,它由三部分组成
1. UI2/takeout 这个是页面,由页面文件.w和js以及css等构成,js中有$.ajax的请求
2. Native/外卖 这个是本地app的工程,用来打包app
3. tomcat的webapps/baas 这个是服务端,提供步骤1中的$.ajax访问
启动服务
开发工具Studio中启动Tomat,这个将启动两个服务,一个是tomcat的webapps下的baas服务,另外一个是用于解析运行UI2资源的UIServer(在runtime\UIServer)。为描述方便,这里假设本机ip地址是192.168.1.1, tomcat的端口是8080
浏览器访问
浏览器输入
[code]http://192.168.1.1:8080/x5/UI2/takeout/index.w[/code]
这样就可以访问外卖功能,这个在电脑浏览器或者手机浏览器都可以(电脑推荐使用chrome浏览器)。
解释一下这个URL:8080后面的x5是UIServer的名字,在tomcat的server.xml中定义,具体请参考tomat的相关说明,表示访问UIServer,UI2/takeout/index.w 这个会请求到UIServer后,由UIServer做编译,生成html和js供前端使用。
本地App
首先要生成App,先看看默认的App定义,在 Native/外卖 上点右键选择“编辑本地App”,向导中有三个重要的参数:
1. 服务地址:这里应该写 http://192.168.1.1:8080, 因为baas在这个服务上
2. 首页: 就是默认打开的页面 写 /x5/UI2/takeout/index.w,这里 x5那个可以写成任意的,和前面介绍的UIServer的那个x5名字没任何关系
3. 需要打包的资源:默认选择了takeout,这里如果选择了,那UI2/takeout下的资源会被打包到App里面,也就是说tomat中没有UISever那个服务运行也是正常的,如果不选择,则首页那个就必须写成/x5/UI2/takeout/index.w,因为默认的UIServer的名字叫x5,App启动时是通过UIServer来获取页面,和浏览器访问完全相同
补脑
如果takeout资源打包了,服务地址写 http://localhost 可否?
还真不行,因为资源中有$.ajax 的请求会发到 192.168.1.1:8080/baas 上,如果写localhost,那页面打开没问题,但ajax请求会遇到传说中的跨域问题,导致失败,所以这里服务地址要写baas服务的地址。换句话说,对于资源打到App的情况,服务地址更多是告诉ajax请求当前域是谁,从而避免跨域问题(所有请求都是http://192.168.1.1:8080/xxx,但app内部做了处理,会优先找打入app的资源,没有找到的资源在去请求服务端,对于app来说,是读取本地资源还是服务端请求没任何区别,从而解决跨域问题)。当然,如果没有任何ajax请求或者用插件方式发http来访问,实际上可以写 http://localhost。而如果要访问多个地址,那就只能写成 http://localhost,在配合http的插件发请求(自带的plugin.http.request插件),就不能使用jquery的了(其实纯html可以用jsonp方案,不过比较麻烦,具体baidu,推荐插件方案)。
本文由WeX5君整理,WeX5一款开源免费的html5开发工具,H5 App开发就用WeX5!
阅读其他app 开发相关文章:http://www.wex5.com/?p=3443