WeX5 App与服务端交互原理

千里之外2

拿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

浏览器访问

浏览器输入

[http://192.168.1.1:8080/x5/UI2/takeout/index.w

这样就可以访问外卖功能，这个在电脑浏览器或者手机浏览器都可以（电脑推荐使用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://doc.wex5.com/?p=3443

abc3240660

多谢总结