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	姓名
	E-Mail	邮件地址
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，在此基础上修改，以避免引发文中所述或其他的一些问题。

posted @ 2012-12-13 14:49 plums 阅读(1248) 评论(0) 编辑收藏举报

刷新页面返回顶部

plums

BAE WebApp开发 [2]——WebApp组织结构介绍

公告