WeX5 App与服务端交互原理

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_text]拿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

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20px” padding_bottom=”” padding_left=”” padding_right=”” hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”” class=”” id=””][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_text]

 相关链接 >

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_portfolio layout=”carousel” picture_size=”fixed” boxed_text=”unboxed” filters=”no” columns=”6″ column_spacing=”12″ cat_slug=”apps,new” exclude_cats=”videos” number_posts=”1000″ offset=”” excerpt_length=”35″ strip_html=”yes” carousel_layout=”title_on_rollover” scroll_items=”” autoplay=”no” show_nav=”yes” mouse_scroll=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ animation_offset=”” class=”” id=””][/fusion_portfolio][fusion_text]

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container background_color=”#303030″ background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=”” hundred_percent=”yes” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”” class=”” id=””][fusion_builder_row][fusion_builder_column type=”1_6″ last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” hover_type=”none” link=”” border_position=”all” border_size=”0px” border_color=”” border_style=”solid” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ animation_offset=”” class=”” id=””][/fusion_builder_column][fusion_builder_column type=”1_2″ last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” hover_type=”none” link=”” border_position=”all” border_size=”0px” border_color=”” border_style=”solid” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ animation_offset=”” class=”” id=””][fusion_text]

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_5″ last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” hover_type=”none” link=”” border_position=”all” border_size=”0px” border_color=”” border_style=”solid” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ animation_offset=”” class=”” id=””][fusion_separator style_type=”none” top_margin=”” bottom_margin=”20″ sep_color=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”” class=”” id=””/][fusion_text]

[/fusion_text][fusion_text]

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” hover_type=”none” link=”” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ animation_offset=”” class=”” id=””][fusion_text]

    友情链接    |    法律说明          北京起步科技股份有限公司  ©2006-2016        京ICP备13007148号

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]