APPCAN IDE 开发流程文档(修改版)

看到网上一些关于AppCanIDE的开发资料，要么不全，要么需要“券”“豆”“分”，本人四方搜罗并结合自己开发流程，先将开发文档免费奉献给大家原版内容已经很全面了,只是有些图片上传不显示了(下载原版,在本地打开设置视图Web版式视图显示就正常了),修改版只是修改了一下图片尺寸便于在线浏览,如果下载还是下载我的原版1、IDE概述AppCanIDE是基于Eclipse定制的移动集成开发环境，专为无Native开发经验的HTML开发人员设计。AppCanIDE帮助HTML开发人员在无需任何原生环境辅助下即可完成高体验效果应用的开发、调试、跟踪和模拟，并可借助内嵌的应用打包功能，创建可直接安装到手机的本地应用安装包以便后续测试应用。跨平台开发支持AppCanIDE可以用于支持iOS、Android、WindowsPhone平台手机和平板的高体验Hybrid应用的开发。通过AppCanHybrid技术，HTML开发人员遵循基于标准CSS技术的AppCan移动开发UI参考框架，即可完成一次开发，多平台适配，在各种分辨率的移动终端上保持相同的体验。AppCanUI框架提供了极高的适配性和自主性，开发人员可以没有束缚地根据需求、UI设计完成应用界面及逻辑的开发。HTML5支持AppCanIDE采用国际通用的HTML语言作为跨平台支撑语言，同时借助于AppCanHybrid技术以终端内嵌浏览器为核心的设计理念，使开发人员可以直接采用HTML5技术完成应用功能的开发。基于业界公认的HTML5的强大能力和广泛的开发用户群体，开发人员不需要重新学习私有标准，即可完成复杂功能的实现。应用模板支持AppCanIDE内嵌了电商、新闻等多套业界经典应用模板，开发人员可以基于模板快速构建应用框架，同时IDE还内嵌了登录、注册、个人信息、购物车等等超过百款移动经典窗口布局模板，并以界面向导方式交付，有效帮助开发者快速完成应用的界面和功能拼装。本地打包支持AppCanIDE内嵌开发版应用打包服务，开发人员可以在个人PC机上完成开发版本应用安装包的生成，并可在手机中安装验证应用的实现效果与问题解决情况。开发人员可以在本地配置应用启动界面、图标，还可以动态选择应用所用的公共插件和自定义插件。打包服务会自动聚合各插件库、引擎和应用HTML代码。通过生成的安装包，可以直接验证插件的功能，便于插件开发人员与HTML开发人员进行联调，同时还可验证应用图标、启动图片等资源的实际展示效果。本地模拟调试AppCanIDE提供基于Chrome内核的模拟器，可以在PC上完成移动应用的界面模拟、通讯模拟、设备模拟。开发者可以在模拟器中动态跟踪和调试代码，变更显示效果，作断点调试。后端业务对接集成MAS开发支持AppCanMAS是基于NODEJS开发的企业移动后端整合系统，负责承担连接移动App与企业后端系统的中间数据、协议转换与安全管理工作。AppCanIDE内嵌MAS开发调试环境，开发人员可以在IDE中创建MAS工程，开发和调试业务接口。2、IDE新版特色AppCanIDE3.0版本更加人性化，提供应用向导和界面向导，内置数百种界面模板，提供包括新闻、电商、通讯等多套应用模板，支持本地应用打包和本地模拟调试，支持MAS开发，可帮助开发者快速上手，高效创建专业应用。AppCanIDE3.0新版特色如下：1)预置应用模板和界面模板AppCanIDE3.0中集成了多套应用模版，可以在新建项目时生成电商、新闻、阅读、移动OA及空模板，供开发者套用和定制，完成快速开发。AppCanIDE3.0还预置了上百套页面布局模板，支持各种形式的布局样式。如页面只有顶部栏、页面既有顶部栏又有底部栏、抽屉等；支持内容区域布局样式，如列表、表单、九宫格、表格等。2)MAS服务、项目开发调试支持AppCanIDE3.0新增MAS服务开发支持，支持创建多个MAS开发项目。户可在IDE3.0上直接生成相应的MAS接口供移动App调用，省去繁琐的配置定制操作。ppCanIDE3.0中可以右键单击项目中的MAS.js文件调试运行MAS接口，查看返回的数据。3)打包插件自动选择AppCanIDE3.0版本打包时，无需手工选择打包插件，系统自动选择插件，直接生成开发者本地测试的安装包。3、IDE项目开发流程3.1、新建项目AppCanIDE3.0中集成了大量的电商、新闻、阅读、移动OA等模板。开发者可以直接套用模板快速定制项目。下面以一个示例介绍如何生成一个App页面项目。(1)依次点选菜单“文件”—“新建”—“项目”。在生成AppCan项目对话框中，填上项目名称、应用名称、应用ID、应用KEY。这里的应用ID和应用KEY保证开发的App的唯一性。和IDE2.0一样，普通开发者可在官网上新建一个项目，会自动生成一个ID和KEY。每个APP都会有自己独一的ID和KEY。普通开发者获得项目的ID和KEY的流程如下：在AppCan官网上，用户可创建一个项目，注册帐号并登录。点击导航“应用服务”进入下图所示：点击“创建应用”，弹出上图的提示框。输入相应的信息。点击“确定”，创建项目过程中出现下图生成完项目之后，显示页面如下点击应用名称或图标，进入页面。上述图中会显示生成这个项目的相应的ID和KEY，还有上传地址。上传地址用作SVN管理。回到IDE3.0中，我们新建一个helloworld为例：点击“下一步”:选择自己想要建的类型项目，例如电商、新闻、阅读或移动OA。空模板是用户可以自己建立自己想要的App类型，开发者也可在3.0上加上自己做的比较好的项目模板。这里我们选择一个移动OA的项目，点击“下一步”选择自己想要设置的各部分的颜色。例图如下，可设置顶部栏颜色、页面背景色、字体颜色、边框颜色、按钮颜色。点击完成，就会建成一个helloworld的项目。项目工程例图如下：helloworld是我们新建的项目名称，android_iphone是默认生成的一个文件夹名，下面的都是每个页面的文件。打开config.xml可以看到默认配置信息。起始页index.html，应用ID和应用KEY是在创建本项目的时候生成，log服务器地址可以填写本机的地址，可供开发者在开发的时候查看log信息。找到起始页index.html点击右键选择”预览”，会在模拟器中出现的移动OA项目的首页。例图如下：用户可在创建的项目里面添加单个页面模板和相应的js，调用数据功能接口等。3.2、新建页面模板IDE3.0中内置模板如不满足开发者的需求时，用户就可以在上述新建项目的时候，新建一个空模板，自己在里面创建页面模板，建立自己想要的APP界面。或者在生成的项目中缺少自己想要的页面，也可以再新建页面模板，加上自己想要的APP界面。新建页面模板操作步骤，以上述移动OA的项目中新建页面为例说明如下:（1）点击项目，右键选择“新建”—“其他”，（2）会出现“选择向导”弹出框如图：选择“页面”，点选“下一步”。（3）在新建AppCan页面中，输入要建的页面名，点选下一步。（4）点选“下一步”进入到各种页面模板类型，供用户选择。例如左边的页面框架布局类型，右边的内容区域样式类型，如列表、表单、九宫格、表格。左边和右边下面都有左右切换页面的箭头，用户选择自己想要的页面类型时，左右两边的内容区域需要先点击一下选中的布局缩略图，例如红色区域选中的内容区缩略图，才可在中间显示这张图片的预览效果。点击“完成”按钮，直接生成默认的第一个模板。如下图：选择其中一种类型，就可完成生成相应的页面。3.3、项目页面调试IDE3.0页面调试过程和IDE2.0版本一样。找到相应的页面，在相应要查看代码的地方加上断点，刷新页面即可。3.4、项目本地生成安装包建完项目之后，可以在本地生成安装包，安装到手机上查看效果。流程如下：点击项目的下的android_iphone文件夹，右键选择“生成安装包”。示图如下：点选“生成安装包”，出现应用打包的界面。可改变应用名称，也可上传图标。点选“下一步”。选择平台，Android或是iPhone或是iPad，上传各个分辨率的启动页图片。点选“下一步”。选择在项目中用到的插件，或者点击“自动选择插件”。即可把项目中用到的插件自动选择上。点击“完成”，会提示打包成功。项目包会放在本地的一个文件夹中。用户可安装在手机中查看当前效果。