DEV文档 > 技术资源 > 永远的HelloWorld 目录 1、创建一个新工程 2、在模拟器中预览效果 3、在AppCan Player中预览效果 4、打包成手机安装包 5、下载 永远的HelloWorld 作为开发者，每接触一门新的开发平台，第一个应用都是HelloWorld。他能使开发者熟悉整个开发平台的最基本步骤，帮助开发者最快的对整个系统建立一个最直观的了解。 在开始本教程之前，请先安装我们的AppCan 集成开发调试环境。如果没有安装，请参考APpCan SDK安装向导页面。 1、创建一个新工程 1. 打开AppCan IDE,在选择文件>新建>项目… 在打开的对话框中会包含一个AppCan的条目。 2. 选择"项目" 并且点击下一步 3. 按照如下条目填充项目相关参数 项目名称(为了保证兼容性必须使用英文和数字名称)：HelloAppCan 应用名称：Hello AppCan 应用类别：其他应用 应用描述：我的第一个AppCan应用 点击完成。 各个可配置项目的功能如下： 项目名称 这是AppCan项目的名称，它同时也是用于存储项目文件的文件夹名称。此文件夹默认建立在C:\AppCan\ADK\emulator\disk\widgetone\widgetapp目录下。 应用名称 这是一个显示给用户的名字，用于在开放平台提供下载和安装到手机后显示在主界面中的名字。 应用类别 这是在AppCan平台上用于标明应用分类的字段，方便使用者通过分类进行查找。 应用描述 这是在AppCan平台上用于展示应用信息，供下载者了解应用基本功能的字段。 4. 在弹出的信息验证框里输入AppCan平台注册的用户名密码，用于为应用申请AppCan平台唯一ID。如果没有注册过可以点击注册按钮进行注册。AppCan平台将会为用户分配云端存储空间来进行代码同步和应用在线打包等服务。 5. 获取应用ID成功后，你的第一个AppCan项目已经建立完成。在IDE中的"包资源管理器"中可以看到我们创建的项目。 6. 这时，在IDE环境中，我们可以看到我们新建的项目中,已经包含了我们的第一个页面index.html。其中界面代码如下所示 现在让我们修改一些代码。 修改AppCan为Hello AppCan. 修改Hello. AppCan!!为这是我的HelloAppCan. 保存代码。 2、在模拟器中预览效果 在菜单中选择 运行>运行 AppCan IDE会自动加载内嵌的模拟器来查看运行效果。第一次启动时需要20秒时间请耐心等待。在模拟器中运行的效果如下图所示。 3、在AppCan Player中预览效果 1. 首先在移动终端中安装AppCan Player 2. 拷贝代码到目标路径 Andorid平台 拷贝Android_Iphone目录到sdcard/widgetone/widgetapp路径下 iOS平台 拷贝Android_Iphone目录到Documents/widgetone/widgetapp目录下 3. 运行手机中的AppCan应用，可以看到在管理器中显示了Hello AppCan。点击运行。我们的Hello AppCan完美的显示了出来。 4、打包成手机安装包 1. 在"包资源管理器"中选择Android_Iphone文件夹。点击鼠标右键，弹出菜单中选择"生成安装包" 2. 本地打包程序界面如下 开发者可以为应用设定发布名称，配置ICON和启动界面闪屏图片。选择生成平台后，点击生成安装包 3. 稍候片刻等待打包结束提示。点击"打开安装包目录"，即可看到打包生成的安装程序。 4. 运行我们的 Hello AppCan。 5、下载 源文件下载 DEV文档 > 开发文档 > AppCan移动应用开发框架开发文档 > AppCan开发框架 目录 1、AppCan的页面 1.1、页面的创建 1.2、页面的布局 1.3、页面间的切换 1.4、页面间共用标题或页脚 1.5、页面的色彩 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 2、AppCan的控件 2.1、IOS导航条 2.2、文本输入框和文本输入域 2.3、列 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 视图 2.4、下拉列表控件 2.5、网格控件 2.6、图片按钮 2.7、复选框 2.8、折叠按钮 2.9、按钮 2.10、开关按钮 2.11、单选框 3、JSON2View 3.1、支持常见的几种JSON数据格式 3.2、模板中支持的关键字 4、代码安全 5、Config.xml文件 1、AppCan的页面 1.1、页面的创建 AppCan的页面使面向用户的最小屏幕单元，它只是一种推荐的页面管理方案，是一种使用HTML处理界面布局的参考，用来划分用户进行交互操作的UI界面。当然开发者也可以自己定义页面管理方案。如下图的网页大纲显示的是一个名字叫page_0的页面。 创建AppCan页面可以通过AppCan集成开发IDE中的页面创建向导进行创建。 1.2、页面的布局 AppCan的页面一般由标题、内容区域和页脚组成。常见的布局方式有固定标题页脚和自适应布局两种。 ▶ 固定标题页脚 标题和页脚位置固定，当内容进行滚动时标题和页脚不随之滚动。当内容区域内容不能撑满一屏时，标题和页脚依然固定在最上部和最下部。如图： 如下图网页大纲所示，在页面page_0中，包含标题fixheader、页脚fixfooter和内容content部分 标题和页脚不一定必须包含于页面中，当多个页面共用一个标题或页脚时可以定义在页面外部，如下图大纲所示，两个页面page_0和page_1共用一个标题和页脚。 ▶ 自适应布局 自适应布局中，标题和页脚在屏幕中位置不固定，标题保持在整个网页的最上边，页脚在整个网页的最下边，随着内容区的扩大自动排列。当滚动时，标题和页脚随之滚动。 如下图网页大纲所示 页面Page_1中包含header footer和content三个部分，与固定布局方案框架保持一致，只是对应的CSS属性稍有差别。 1.3、页面间的切换 一个窗体可以由多个页面组成，AppCan提供了一组基于页面切换动画效果的接口，这些页面间可以通过调用这些预制接口实现切换效果。接口封装在zy_anim.js中，开发者可引用这个文件，来实现动画效果调用。页面间的切换类型如下 ▶ 左右滑入切换 ▶ 上滑入/下滑出切换 调用可参考如下代码 onclick="zy_anim_slide('page_0','page_1','slide_left')" 如果希望在动画结束后执行某项定制操作，可以在动画调用函数里指定回调函数，供动画结束后调用，可参考如下代码 function anim_cb(){}; onclick="zy_anim_slide('page_0','page_1','slide_left',anim_cb)" 1.4、页面间共用标题或页脚 多个页面间可以共用一个标题和页脚，通过导航按钮，用户可以方便的实现功能的变更。如下图所示 通过共用的标题和页脚，实现内容区域的变换。如下图，范例网页大纲所示， 网页分为5个页面，这五个页面共用一个header和footer，通过点击页脚的图标实现页面的变化。 　　 1.5、页面的色彩方案 AppCan选用的是JQueryMobile的色彩方案，它提供了5套可选方案供开发者选用，黑、蓝、灰、白和黄，每一中色彩方案，分别为页面、容器和控件进行了定义。开发者可以参考这5套色彩方案，快速的添加自己的页面色彩。 　 2、AppCan的控件 AppCan的控件是一套基于HTML5、CSS3和JavaScript的预定义代码段，开发者可以通过AppCan集成开发调试环境的向导快速的引入到界面中，并可以进行有效的配置。控件类别如下 2.1 iOS导航条 AppCan提供了类iOS效果的导航条控件，并预置了6张预置图片供开发者选择。开发者可以通过替换自己的图片或者添加自己的效果类来扩展导航条。导航条支持预置的5中色彩方案。 2.2 文本输入框和文本输入域 文本输入框和文本输入域使常用的用户信息录入控件，AppCan提供了封装完善的数据输入控件公开发者选用。 2.3 列表视图 列表是应用开发中作为应用数据展示控件使用率最高的。AppCan提供了丰富的可配置项，开发者可以通过集成开发环境的想到快速的生成列表。 2.4 下拉列表控件 下拉列表控件可以帮助用户快速的选择所选条目，减少输入频率，提高用户感受性。AppCan提供了标准的Select控件公开发者选用。 2.5 网格控件 网格控件是用来平分屏幕，常作为导航条使用。 2.6 图片按钮 图片按钮常作为图片预览控件使用，与网格控件组合使用可以快速的实现图片预览布局。 2.7 复选框 复选框常用来进行多项选择，AppCan提供了横排与纵排两种布局的复选框组件供开发者选用。 2.8 折叠按钮 折叠按钮经常用来把大段的内容进行隐藏，当用户点击时张开，这样可以在有限的界面内提供给用户更多的可用信息。AppCan提供了标准的折叠按钮，如下图所示。 2.9 按钮 按钮是每个界面中都不可缺少的组件，AppCan提供了丰富的按钮样式，如下图所示。 2.10 开关按钮 开关按钮是复选框的一种特殊应用，AppCan提供了类iOS效果的开关按钮供开发者选用。 2.11 单选框 AppCan提供了横排与纵排两种布局的单选框组件供开发者选用。 3、JSON2View JSON是网络应用常用的数据格式，AppCan提供了快捷的JSON到View的转换接口，可以帮助开发者方便的管理界面，减少代码结构复杂度，提高代码质量。 一般网页中使用XMLHttpRequest获取到数据后，开发者经常使用字符串拼接方法组合数据和页面标签为目标HTML代码块。AppCan提供了Data Model接口，通过设定与JSON数据格式对应的模板，快速生成目标HTML代码块，两行代码即可完成之前复杂的操作。 var tmpl = '${catname}'; var result=zy_tmpl(tmpl,json,zy_tmpl_count(json)); 如上述代码所示，开发者定义模板tmpl, 通过调用zy_tmpl接口传入模板tmpl，与模板对应的JSON数据对象json, 传入通过zy_tmpl_count获得的json中包含条目个数，直接获得目标代码段。开发者可以把用到的模板整理成外接JS文件，当界面需要修改时，只需要调整对应的模板即可完成界面效果的变化。 3.1 支持常见的几种JSON数据格式 数组类型 [{"catid":"16","catname":"CSS3\u6559\u7a0b","articles":"96"},{"catid":"9","catname":"HTML5\u8d44\u8baf","articles":"557"}] 对于数组类型，需要调用zy_tmpl(tmpl,json，count)来处理。 对象类型 {"1":{"catid":"16","catname":"CSS3\u6559\u7a0b","articles":"96"},"445":{"catid":"9","catname":"HTML5\u8d44\u8baf","articles":"557"}} 对于数组类型，需要调用zy_tmpl(tmpl,json，count)来处理。 单条数据 {"catid":"16","catname":"CSS3\u6559\u7a0b","articles":"96"} 对于单条数据，需要调用zy_tmpl_s(tmpl,json)来处理。 3.2 模板中支持的关键字 通过模板生成网页视图时，经常用到的是ID的替换和对首尾条目进行的UI特殊处理。AppCan的Json2View接口可以通过使用关键字来帮助应用适配这种情况。 ${index:} 通过在模板中引入index关键字，JSON2View将替换${index:}为索引。例如 Var tmpl=''; Var data="a,b,c,d,e,f".split(","); zy_tmpl(tmpl,data,zy_tmpl_count(data)); 得到的结果如下 可以看到${index:}被替换为索引0,1,…,5 ${first:} 通过在模板中引入first关键字，可以为第一个JSON元素指定定制属性。例如 var tmpl='${first:key}'; var data=[{"key":"1"},{"key":"3"},{"key":"5"},{"key":"7"},{"key":"9"}]; var c=zy_tmpl(tmpl,data,zy_tmpl_count(data)); 得到的结果如下 1> 可以看到当首条记录时 ${first:"corner_top"} 中包含的字符串corner_top被添加到条目，而 ${first:key} 中的key则被对应的JSON数据所替换。 ${last:} 通过在模板中引入last关键字，可以为最后一个JSON元素指定定制属性。例如 var tmpl='${last:key}'; var data=[{"key":"1"},{"key":"3"},{"key":"5"},{"key":"7"},{"key":"9"}]; var c=zy_tmpl(tmpl,data,zy_tmpl_count(data)); 得到的结果如下 9 可以看到当最后一条记录时 ${last:"corner_bottom"} 中包含的字符串corner_bottom被添加到条目，而 ${last:key} 中的key则被对应的JSON数据所替换。 4、代码安全 简介 使用HTML5+CSS+JavaScript编写应用，所有代码都是明文字符串，即使把页面打入安装包也被解压出来，很容易被非开发者查阅，因此如果在代码中需要使用私密的信息时，将会非常不安全，例如进行OAuth2验证的应用AppKey和AppSecurt Key。 为了解决此问题，AppCan平台提供了专有的代码加密工具，可以快速的对HTML页面进行加密，加密后的页面只能被AppCan中间件引擎读取，避免用户私密信息的泄露。AppCan HTML页面加密工具可以在 下载。 使用指南 AppCan HTML加密工具为绿色软件无需安装。通过双击应用图标打开应用 点击选择文件，打开文件选择器，单选或多选文件后，点击打开按钮，把选中的文件加入文件列表。 点击加密按钮后，完成对所选HTML页面的加密。同时会在加密文件同目录下生成同名的备份文件。 注意：由于加密过程不可逆，请最好在加密前备份原始代码。 5、Config.xml文件 每一个AppCan应用都会有一个Config.xml存放在其应用代码根路径下。这个Config.xml文件定义了应用的必要信息和配置。主要信息如下： ▶ 应用的基本信息如应用ID，用来作为应用的唯一标识 ▶ 应用的名称，用来在开发、调试、发布时帮助开发者更直观的区分应用。 ▶ 应用的控制参数-图标、默认加载页、是否支持加密、调试服务器、升级链接、背景色控制等。他设定了应用在运行时的一些处理机制和配置。 ▶ 应用的版权信息-作者信息、版权摘要和链接等。 Config.xml的文件结构: 所有在config.xml中出现的元素都列在默认顺序列在下方。这些定制元素能够被AppCan中间件识别。目前不允许开发者添加自定义元素。 格式： 描述： 定义了应用的基本关键信息。是整个config.xml的主元素。其他元素都是其子元素。 属性： widgetId AppCan保留参数 appId 在通过AppCan创建应用时向服务器申请的唯一标识ID.用于区分应用。 channelCode 3位整数，当把应用向多个发布渠道推广时，开发者可以为每个渠道自定义ID，用于在AppCan统计时能够得到分类的统计结果 Version 当前AppCan应用的版本.版本定位三个部分 主版本 2位整数 定义应用的关键发布版本 小版本 2位整数 定义版本发布后的重大变更版本 修改次数 4位整数 定义版本发布后的微调版本 Jsproload True或False可选。Symbian平台专用，定义是否开启默认UEX接口库自动引用。一般情况下不需要配置此选项。默认开启。 格式： HelloWorld 描述： 定义了应用的名称。用于在集成开发环境、打包、后端服务器中帮助用户标识应用。 属性： 无 格式： 这是我的第一个AppCan应用 描述： 定义了应用的描述，用于发布系统上提供给下载者了解应用的作用。 属性： 无 格式： AppCan研发组 描述： 定义了应用的开发作者，用于在发布系统上显示开发者信息给应用下载者。 属性： Email 应用开发者的Email地址。 格式： 描述： 定义了应用的图标，用于显示在发布系统上作为应用图标显示，同时用于在AppCan Player中标识应用。 属性： src 应用的默认图标名称，图标一般保存在config.xml同级目录下 格式： 本程序版权属于正益无线（北京）科技开发有限公司。程序源码用于AppCan开发者研究。未经同意，不得随意拷贝传播。 描述： 定义了应用的基本版权信息和版权详细信息链接。 属性： href 应用的版权信息链接，在发布系统中，让下载者可以查看详细的版权内容 格式： 描述： 定义了应用的默认启动页面。 属性： src 应用的默认启动页面文件名。 格式： 192.168.1.33 描述： 定义了开发者用于开发应用的AppCan集成调试环境的IP地址，当使用AppCan Player调试应用时，可以通过IDE环境获取到应用使用uexLog接口发出的文本信息。 属性： 无 格式： false 描述： 当应用中有使用AppCan HTML加密工具的网页时，需要打开此功能，使AppCan引擎能够处理加密的HTML页面，正常的展示给用户。此属性默认为False 属性： 无 格式： http://download.xxxx.com/update.jsp 描述： 应用的升级检查路径，当有新版本提供下载时，可以通过此URL获取。 属性： 无 格式： true 描述： True/false可选, 控制定制版本是否显示AppCan空间图标。 属性： 无 格式： #FFFFFF 描述： 颜色定义格式为#RRGGBB,控制应用启动时的闪屏界面背景色，如果开发者在打包应用时设定了背景图片，则此背景色无效 属性： 无 格式： 描述： Symbian平台专用，定义AppCan应用使用的AppCan引擎的版本。用于检查引擎版本是否 需要升级。 属性： Version AppCan Symbian平台WidgetOne引擎的版本。