BAE WebApp开发 [2]——WebApp组织结构介绍
本片中所指WebApp均指运行在中国移动自出研发的WebApp平台—BAE上的WebApp程序。
WebApp是采用HTML/CSS/JavaScript编写的Web应用程序，可以使用传统Web开发中的所有功能和API，并可调用BAE扩展的移动终端和业务能力接口，通过这些接口可以提供通讯录、多媒体、终端信息等终端能力及位置、地图等业务能力。
每个WebApp应用都是一个符合ZIP规范的压缩文件，可以通过ZIP解压缩工具查看内部文件。一个完整的WebApp包含如下文件：
- config.xml WebApp属性和配置信息：存储WebApp名称、ID等属性，以及调用BAE业务能力的声明
- icon.png WebApp应用图标
- index.html 应用页面
- UI图片
- JS文件
- CSS文件
1、WebApp配置文件config.xml
> 属性配置列表：
|
字段名 |
字段含义 |
|
|
Widget |
ID * |
Widget通用标识 |
|
Version |
Widget版本，系统默认为01.00beta |
|
|
VersionCode |
Widget版本编号，数据类型为整数，系统默认为1 |
|
|
Height |
Widget默认的屏幕显示高度 |
|
|
Width |
Widget默认的屏幕显示宽度 |
|
|
Name |
Widget名字 |
|
|
Description |
Widget文字描述信息 |
|
|
Icon * |
Widget图标 |
|
|
License |
许可证信息 |
|
|
Name |
许可证名称 |
|
|
Link Reference |
许可证引用链接 |
|
|
Author |
Widget作者信息 |
|
|
Name |
姓名 |
|
|
|
邮件地址 |
|
|
Content * |
规定的程序呈现入口，将显示的第一个页面 |
|
|
Feature |
Feature声明信息，声明使用哪些扩展API。每个Feature对应的声明信息： |
|
|
Name |
API声明 |
|
> Feature声明信息：
|
能力扩展API对象 |
Feature声明信息 |
|
AccelerometerInfo |
http://jil.org/jil/api/1.1/accelerometerinfo |
|
AddressBookItem |
http://jil.org/jil/api/1.1/addressbookitem |
|
ApplicationTypes |
http://jil.org/jil/api/1.1.5/applicationtypes |
|
AudioPlayer |
http://jil.org/jil/api/1.1/audioplayer |
|
Camera |
http://jil.org/jil/api/1.1.2/camera |
|
Device |
http://jil.org/jil/api/1.1/device |
|
DeviceStateInfo |
http://jil.org/jil/api/1.1/devicestateinfo |
|
Message |
http://jil.org/jil/api/1.1/message |
|
MessageTypes |
http://jil.org/jil/api/1.1/messagetypes |
|
Messaging |
http://jil.org/jil/api/1.1/messaging |
|
Multimedia |
http://jil.org/jil/api/1.1/multimedia |
|
PIM |
http://jil.org/jil/api/1.1.1/pim |
|
PositionInfo |
http://jil.org/jil/api/1.1/positioninfo |
|
Widget |
http://jil.org/jil/api/1.1/Widget |
|
CMap及其下属对象 |
cmap |
|
CPay |
cpay |
示例：
<?xml version="1.0" encoding="UTF-8"?> <widget xmlns="" id="WebAppDemo01" version="1.0" width="480"> <name short="Demo">WebApp Demo</name> <description>WebApp Demo</description> <icon src="icon.png"/> <author email="limuchen12@126.com"/> <content src="index.html" /> <feature name="http://jil.org/jil/api/1.1/widget" required="true"/> <feature name="http://jil.org/jil/api/1.1/multimedia" required="true"/> <feature name="http://jil.org/jil/api/1.1/audioplayer" required="true"/> </widget>
注意事项：
- config.xml文件名必须小写
- 若要使用BAE自适应布局能力，需设置widget节点的width属性为页面布局尺寸的实际宽度 如：width="480"，不需设置height属性；否则页面按原始样式加载
- widget节点的id属性是WebApp的身份标识，请使用一个唯一的字符串，建议使用UUID作为应用的标识
- icon节点用于引用WebApp的图标，content节点用于标识程序入口页面，可以更换为其他文件，注意文件名区分大小写
- 当WebApp应用name过长时，可以为name节点添加short属性来设置一个简短的名字，BAE平台会自动调用short属性的值作为当前应用的名称
- WebApp中的路径、文件名均区分大小写
- 只声明当前应用使用到的BAE业务能力
2、index.html 配置文件中指定的WebApp入口页面，运行WebApp时，显示该页面的内容。
<!-- index.html 示例 --> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta align="center" name="viewport" content="user-scalable=yes" /> <meta content="telephone=no" name="format-detection" /> <!-- 告诉设备忽略将页面中的数字识别为电话号码 --> <link rel="stylesheet" type="text/css" href="themes/base-0.1.css" /> </head> <body> <div class="app-background-adapt" id="appBackgroundAdapt"> <div class="ui-header"></div> <div class="ui-container"></div> <div class="ui-footer"></div> </div> <!-- class library 类库 --> <script src="library/zepto.min.js"></script> <!-- 移动js框架 --> <script src="library/json2.js"></script> <!-- 为不支持JSON对象的浏览器创建JSON对象 --> <script src="library/iscroll.js"></script> <!-- iOS滚动模拟类库 --> <script src="library/template.js"></script> <!-- template模板引擎:artTemplate --> <script src="library/template-syntax.js"></script> <!-- template模板引擎:artTemplate 语法扩展 --> <!-- js coding --> <script src="script/plums-0.3.js"></script> <!-- 一些额外的js功能扩展 --> <script src="script/common-0.1.js"></script> <!-- Widget应用常用的方法 --> <script src="script/domReady-0.1.js"></script> <!-- DOM ready 处理 --> </body> </html>
注意事项：
- index.html页面的编写与PC Web页面的开发相同，所以，同样遵守传统Web页面的开发规范。诸如html书写规范、语义化标签、使用外部样式文件、javascript脚本文件等
- 目前移动智能机对HTML5的支持良好，建议使用HTML5文档声明，以及CSS3的安全样式
- 避免大量使用HTML5自定义标签，自定义标签元素较之原生标签元素的渲染要花费更多的时间，呈现给用户的就是该标签元素内容显示有延迟
- 在页面布局开发时，建议使用480*762为应用的全屏尺寸，config.xml文件widget节点的width属性设置为width="480"；若使用其他尺寸的布局如640*920，记得修改config.xml文件widget节点的width属性，修改为width="640"，并修改common.js文件中common.appLayoutAdaptive方法对基准尺寸的配置(相关介绍参考BAE WebApp开发 [1]——解决各分辨率终端适应问题)
- 只需按一套页面布局尺寸进行开发，对于不同的手机的分辨率自适应问题，由BAE引擎和common.js文件的common.appLayoutAdaptive方法来完成
3、WebApp的打包发布
WebApp打包的操作方法是：
> 在应用根目录，选择要打包的文件，添加到ZIP压缩包
> 修改压缩包扩展名为.wgt
WebApp的发布有两种方式：
> 将*.wgt的应用包上传到服务器，用户通过手机安装的BAE平台下载安装应用
> 或将*.wgt应用与BAE平台打包成一个.apk文件，上传到应用市场，供用户下载使用
总结，建议开发人员在创建WebApp应用时，拷贝本文中的config.xml和index.html，在此基础上修改，以避免引发文中所述或其他的一些问题。
