《AppCan初级工程师》基础教程

AppCanHybrid开发技术AppCan

HybridAppCan

Hybrid开发技术，使你一起分享移动互联网红利AppCan初级工程师基础教程前言这三、四十年，以电子技术、通信技术和软件技术为代表的技术革命浪潮一浪高过一浪，它们彻底地改变了我们的工作方式和生活方式。三十年前，电脑很贵，它是身份和地位的象征；二十年前，电脑开始进入寻常百姓家；十年前基本家家都有一台电脑。二十年前，互联网开始出现了；十年前它开始普及应用；现在它成了我们生活中最重要的一部分。二十年前，手机很贵，它是身份和地位的象征；十年前，手机开始进入寻常百姓家；现在高性能智能终端已经基本人手一台。技术的发展给我们带来了电脑、手机、互联网及移动互联网，基于电脑、手机、互联网及移动互联网的应用和发展使我们的生活产生了翻天覆地的变化。而应用的发展有赖于软件平台及开发技术的发展，如Microsoft的Windows操作系统及浏览器技术的发展带来PC软件和互联网的发展。这几年在3G和高体验智能手机的推动下，移动互联网真正进入了爆发式发展的阶段，移动应用已经由简单的短信、WAP等通道进入到了高体验时代。移动用户对手机移动应用的需求也越来越多，各种创意层出不穷，各种新技术不断推出。世界历史上从没有哪种设备像移动设备这样与我们的生活如此紧密。然而在移动互联网爆发式发展的光环下，作为移动互联网重要发展动力的移动应用，也面临着新的瓶颈和挑战。与PC互联网行业Windows一统天下不同的是移动操作系统三足鼎立，Apple的IOS、Google的Android、及Microsoft的Winphone，可预期的是今后还会出现更多的操作系统；同时手机作为消费类电子产品，它的个性化非常严重，不同型号手机屏幕大小可能不一样，输入方式可能不一样，功能也可能不一样。同时各手机的操作系统版本、UI风格也可能使移动应用开发面临碎片化开发环境；移动应用开发正面临着开发人员门槛高，开发成本高，运营维护难的问题。它使众多普通创业者无法进入这一领域，无法分享移动互联网发展带来的红利。挑战即机遇，为了解决这些问题，众多厂家给了众多的解决方案。有基于JAVA的跨平台方案、有基于C#的跨平台方案、有基于LUA语言的方案、还有基于HTML5的跨平台解决方案。这些方案都希望通过采用一种更容易被普通开发者接受和掌握的技术，来规避移动系统的差异性问题，提高开发效率，降低开发成本。其中HTML5跨平台混合开发技术借助HTML5的强大能力，最被移动互联网企业和广大开发者所关注。本书希望通过对HTML5混合开发技术的讲解，能够帮助开发者进入移动开发领域，一起分享移动互联网红利。

前言 1第一章移动应用开发技术 71.1移动原生开发技术-Nativedevelopment 71.2移动WEBAPP开发技术-WEBAPPdevelopment 81.3移动HybridAPP开发技术-HybridAPP 10第二章AppCanHybrid开发简介 162.1AppCan简介 162.2AppCanHybrid应用程序框架 17第三章AppCanHybrid开发环境搭建 18第四章HiAppcan 244.1创建应用 244.2模拟器调试 314.3调试中心 354.4本地打包 424.5正式编译发布 444.6IDE3.2新增功能点 494.6.1AppCanIDE开发流程之加密 494.6.2全入口开发-App、Web、微信一个都不能少 514.6.3边改边看，实时预览 61第五章Appcan程序设计基础 645.1AppCan程序框架 645.1.1AppCan应用目录结构 645.1.2AppCan应用解析 665.2AppCanUI工具 66第六章多窗口框架 706.1窗口 706.2FRAME 746.3MultiFRAME 746.4对话框 756.5界面间通讯 776.5.1全局参数 776.5.2窗口事件驱动 796.6生命周期 806.7窗口层叠 836.8窗口动画 866.9手势 866.10拖拽刷新 87第七章界面布局 897.1设计来源——弹性盒子模型 897.2分辨率适配 947.3栅格系统 947.4代码实例 947.4.1目标效果 947.4.2资源准备 957.4.3代码实现 967.4.4补充实例 1027.5首页制作 1037.5.1切图 1037.5.2页面布局分析 1047.5.3页面制作 106第八章控件 1178.1按钮（button） 1178.1.1插入按钮 1178.1.2效果图片 1188.1.3依赖 1188.1.4JS对象 1188.1.5实例代码 1188.2单选框（radio） 1198.2.1效果图片 1198.2.2依赖 1198.2.3实例代码 1208.3复选框（checkbox） 1208.3.1效果图片 1218.3.2依赖 1218.3.3实例代码 1218.4下拉选择框（select） 1228.4.1效果图片 1228.4.2依赖 1228.4.3JS对象 1228.4.4实例代码 1238.5文本输入（input，texarea） 1238.5.1效果图片 1248.5.2依赖 1248.5.3实例代码 1248.6消息框（dialog） 1268.6.1效果图片 1268.6.2依赖 1268.6.3实例代码 1268.7图片轮播（slider） 1278.7.1效果图片 1278.7.2依赖 1288.7.3JS对象 1288.8列表（list） 1298.8.1效果图片 1308.8.2依赖 1318.8.3JS对象 1318.8.4实例代码 1328.9标题导航栏（header） 1358.9.1效果图片 1358.9.2依赖 1358.9.3JS对象 1358.9.4实例代码 1368.10开关（switch） 1368.10.1效果图片 1378.10.2依赖 1378.10.3JS对象 1378.10.4实例代码 1388.11选项卡（tab） 1388.11.1效果图片 1388.11.2依赖 1388.11.3JS对象 1398.11.4实例代码 1398.12图标 1418.12.1效果图片 1418.12.2依赖 1418.12.3实例代码 1428.13树状列表（treeview） 1428.13.1效果图片 1428.13.2依赖 1438.13.3JS对象 1438.13.4实例代码 144第九章网络通讯 1469.1AJAX 1469.2get 1489.3getJSON 1489.4post 1499.5postForm 150第十章项目实战 15110.1项目案例详情说明 15110.2预期效果 15110.3项目开发流程 152

移动应用开发技术应用是具有UI和数据交互能力的独立界面通过业务逻辑进行有机组合而成的软件包。而各种开发技术都是为了实现上述目标而提供的开发体系。1.1移动原生开发技术-NativedevelopmentNative即原生开发，是一种基于智能手机本地操作系统（如：IOS、Android、WP官方推荐语言编写运行）的第三方应用程序。应用程序最终会编译成二进制包，供安装使用。基于Native开发的应用最终运行于系统平台之上，作为独立应用安装使用。NativeApp因为位于平台层上方，支持对系统提供能力的完全访问能力。通过对系统能力的各种封装实现了目前移动市场中千变万化的移动应用海洋。但是由于移动平台厂商众多，设备碎片化，同一个功能，开发人员需要使用不同平台的不同语言重复开发，例如Android的Java、iOS的ObjectC等，这造成App的开发成本相比于PC时代的单一版本开发复杂度和成本都高很多，同时维持多个版本的更新升级比较麻烦。原生开发技术面向的开发人群需要最少一个平台开发语言的开发能力，要对嵌入式开发有一定的技术基础。一个熟练的原生开发人员最少需要半年的学习期，才可能承担项目的主要工作。尤其在国内，移动信息化需求旺盛，尤其是随着企业信息化需求的爆发，对人员的需求更加迫切。目前国内的原生开发人员从数量和质量上完全不能满足需求，且随后几年这一趋势依然会保持。优势：1、可充分发挥系统API能力2、针对不同平台提供不同体验3、有官方的开发调试工具，便于调试4、可访问本地资源5、与第三方SDK对接简单劣势：1、移植到不同平台上比较麻烦2、维持多个版本的成本比较高3、对开发人员技能要求较高4、项目周期较长5、源码知识转移周期较长1.2移动WEBAPP开发技术-WEBAPPdevelopmentWebApp概念的兴起，起源于HTML5标准的逐渐成熟和大型互联网公司的推动。这其中包括百度的框计算、Google运行于Chrome上的WebAppStore以及Facebook的HTML5项目“斯巴达”（ProjectSpartan)。前两个项目当前主要侧重于PC端，而Facebook的Spartan可以说主要是瞄准了移动端的用户市场。目前国内用户最长接触的微网站就是WEBAPP的典型代表。究竟什么是WebApp？很多人从WebApp字面上理解就是运行在网页上的应用。可普通用户的理解：应用就是App，网页就是web，是两个不同的东西怎么结合？另外，综合当前的软件和硬件环境来看，显然不是所有的应用都能跑在网页上的。还有，应用要有应用的“样子”，WebApp和普通的网页从UI和UE的层面也有比较大的差别……这种种的区别和不解造成的疑惑让很多人认为WebApp就是更像应用的WAP。那到底什么是WebApp？标准的WEBAPP一般具有如下要素：1、WebApp也是App，为用户完成一个或多个功能而设计的程序2、使用HTML5技术开发3、应用代码部署在服务器端4、使用HTML5离线缓存技术进行代码缓存5、应用运行于浏览器容器中6、广泛采用AJAX技术进行数据同步7、交互体验方式接近于NativeApp但由于HTML5离线缓存技术在各大移动系统上实现并不成熟，因此一般即使没有采用离线缓存技术的类应用网站，我们也称其为WebApp。移动端WebApp和WAP有什么不同？最直接的区别就是功能层面。WAP更侧重使用网页技术在移动端做展示，包括文字、媒体文件等。而WebApp更侧重“功能”，是使用网页技术实现的App。总的来说，WebApp就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。WebApp有众多的优点。首先使用W3C标准的HTML语言开发，能够轻松实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。与此同时，使用HTML开发的WebApp在投入上会大大的低于传统的NativeApp。对比WebAppNativeApp平台跨平台iOSAndroidWindowsPhone……开发语言HTML/JavaScript…Object-CJavaC#……其次，基于当下开始普及流行的HTML5，WebApp可以实现很多原本NativeApp才可以实现的功能，比如LBS的功能、本地文件和数据存储、音视频播放的功能，甚至调用照相机和结合GPU的硬件加速功能。第三，移动应用的迭代周期平均不到1个月，用户需要不停的重新下载与升级。而WebApp则无需用户下载，并且和传统网站一样可以动态升级。第四，WebApp有App的特性，但是更有Web的特性。每一个NativeApp在当前的用户使用场景下是相对孤立的，而WebApp则可以像传统互联网网页那样相互链接，从一个WebApp直接跳转到另外一个WebApp。这无论是从用户的使用体验层面还是从应用之间的数据传输来看都是非常不错的选择。WebAppWebAppWebAppWebAppWebAppWebAppWebAppWebAppWebApp当前也有很多的缺陷。首先是标准的规范尚未定案。WebApp的实现需要多个层面的标准配套，如WAC标准、DeviceAPI标准以及HTML5标准。在这些标准都尚未完善之前，WebApp还无法实现NativeApp的常用功能。且由于存量设备原因，即使规范完善后，也无法完成向前兼容适配。其次，最大的问题就是移动设备浏览器的性能还不能支持与NativeApp体验媲美的WebApp。WebApp受限于浏览器规范和实现，无法向Native应用一样自由的展现各种效果。同时由于浏览器是在原生体系上又构建了一层，造成WebApp的运行效率低于原生应用，体验不流畅和响应速度慢是WebApp当前面临两个最大的硬伤。1.3移动HybridAPP开发技术-HybridAPP基于NatvieApp和WebApp各自的优势和劣势，在2010年，HybridApp的概念被提出。这种兼具NativeApp和WebApp的优势又能将彼此的缺陷最小化的移动应用开发模式成了一种全新的选择。国内外知名的HybridApp移动应用开发框架有Phonegap、Appmobi以及AppCan等。从2011年底开始，这些移动应用开发框架逐渐进入移动应用开发者的视野。究竟什么是HybridApp？如何定义？汽车有混合动力Hybrid，移动应用同样也有混合模式。HybridApp（混合模式移动应用）兼具“NativeApp良好用户交互体验的优势”和“WebApp跨平台开发的优势”。很多人不知道市场上一些主流移动应用都是基于HybridApp的方式开发，比如国外有Facebook、国内有百度搜索等。但究竟什么是HybridApp？如何定义？HybridApp：HybridAppisamobileapplicationthatiscodedinbothbrowser-supportedlanguageandcomputerlanguage.TheyareavailablethroughapplicationdistributionplatformssuchastheAppleAppStore,GooglePlayetc.Usually,theyaredownloadedfromtheplatformtoatargetdevice,suchasiPhone,AndroidphoneorWindowsPhone.Thesubscribersneedtoinstalltorunthem.我们来拆解一下里面的含义：1、mobileapplication：HybridApp就是一个移动应用；2、bothbrowser-supportedlanguageandcomputerlanguage：同时使用网页语言与程序语言编写；3、availablethroughapplicationdistributionplatforms：通过应用商店进行分发；4、atargetdevice：区分目标平台；5、installtorun：用户需要安装使用。综合一下就是：“HybridApp同时使用网页语言与原生程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用”。总体特性更接近NativeApp，但是和WebApp区别较大。只是因为同时使用了网页语言编码，所以开发成本和难度比NativeApp要小很多。因此说，HybridApp兼具了NativeApp的所有优势，也兼具了WebApp使用HTML5跨平台开发低成本的优势。HyrbidApp为什么会兴起？HybridApp的兴起是现阶段移动互联网产业的一种偶然，也是技术发展的必然。移动互联网的热潮刮起后，众多公司前赴后继的进入。但是很快发现移动应用的开发人员太少，所以导致疯狂的人才争夺。市场机制下移动应用开发人才的待遇扶摇直上，最终变成众多企业无法负担养一个具备跨平台开发能力的专业移动应用开发团队。而HTML5的出现让WebApp露出曙光，HTML5开发移动应用的跨平台和廉价开发成本的优势让众多想进入移动互联网领域的公司开始心动。可是当下基于HTML5的WebApp更是雾里看花，在用户入口习惯、分发渠道和应用体验这三个核心问题没解决之前，WebApp也很难得以爆发。正是在这样是机缘巧合下，基于HTML5低成本跨平台开发优势又兼具NativeApp特质的HybridApp技术杀入混战，并且很快吸引了众人的目光。大幅度降低了移动应用的开发成本，可以通过现有应用商店模式发行，在用户桌面形成独立入口等等，这些让HybridApp成为解决移动应用开发困境不错的选择，也成为普通开发者进入移动市场的最有力武器。可以预见，随着技术的不断成熟完善，HybridApp将会占领更多的移动APP开发市场。HybridApp是如何实现网页语言与程序语言的混合？谁占主体？HybridApp依然是一个App，只是在编程过程中采用了HTML5或其他脚本技术。我们先看看一个普通的应用是如何构成的：ViewViewViewViewViewViewViewViewViewViewView一个应用是由众多界面根据功能逻辑进行组织的产物。使用任何开发技术都是为了完成界面、逻辑和组织的研发。以原生应用为例需要使用原生技术实现UI、通讯、内部逻辑（例如：数据校验等）；需要实现界面的动画效果和参数传递；处理界面的生存周期和逻辑；封装整合基础库供开发调用；配置开发环境、工程、编译参数并最终完成应用的编译发布。上述这些工作都由原生开发人员完成开发，且不同平台之间基本上都要完成一次。Hybrid开发技术希望引入HTML5或脚本技术来达到减少原生开发人员工作量的目标。目前国外比较知名的混合模式开发技术为PhoneGap。PhoneGap的应用开发模型参考下图： 目前采用PhoneGap进行开发大多采用AllInOnePage的模式。开发人员：需要使用网页技术在DIV内实现各独立界面的功能，完成UI、通讯和内部逻辑；使用JQMobile、SenchaTouch等JS框架完成DIV界面间的切换和参数传递；使用JQMobile、SenchaTouch处理界面的生存周期和逻辑；PhoneGap封装系统设备能力基础库供开发调用，原生人员可以开发新插件扩展PhoneGap能力；需要依赖各平台独立SDK，因此需要配置开发环境、工程、编译参数并最终完成应用的编译发布；上述模型为移动应用开发者提供了新的开发途径，但是也带来了一些问题。依然需要依赖于各平台SDK；依然要求开发人员配置开发环境等才能完成应用的最终编译；依赖第三方JS框架完成窗口管理和动画，受限于系统能力，体验较差；采用ALLinOnePage方式，所有界面都在同一页面内，开发调试复杂，不利于团队协同开发。PhoneGap可以认为是一个为有原生开发能力的团队或个人提供的混合应用开发工具，受限于国内开发人员能力、环境等，从国内使用情况反馈看，对其体验和开发方式并没有达到预期的好评。AppCan作为国内首家Hybrid应用开发技术提供商，他的开发模型如下：目前，采用AppCan进行开发，大多采用OneFeatureOnePage的模式。开发人员：需要使用网页技术在独立页面内实现各独立界面的功能，完成UI、通讯和内部逻辑；使用原生引擎提供的接口完成窗口管理和动画处理；使用原生引擎提供的窗口栈管理窗口生存期和逻辑；封装系统设备能力基础库、系统能力库、高级功能库、第三方对接库、高体验UI扩展库供HTML5开发调用，原生人员可以开发新插件扩展AppCan能力；不需要依赖各平台独立SDK，不需要配置开发环境、工程、编译参数。上述开发模型中可以看到，AppCan技术是以HTML5开发人员作为开发主体，原生开发人员辅助的开发体系。HTML开发人员聚焦于独立界面逻辑、交互的开发。AppCan通过插件引擎在体验、能力、效率、安全各方面提供支撑。不再需要依赖于各平台SDK；不再要求开发人员配置开发环境等才能完成应用的最终编译；使用原生技术完成窗口管理和动画；采用OneFeatureOnePage方式，所有界面可独立开发，更便于调试，利于团队协同开发。

AppCanHybrid开发简介2.1AppCan简介AppCan是正益无线为移动开发者提供的面向HTML5技术的跨平台开发技术品牌。AppCan的目标是让移动应用开发不再受限于开发复杂度、平台差异性甚至不再依赖于平台。AppCan努力为开发人员找到一条更加便捷高效且具有良好体验的应用开发之路，使更多的开发人员投入到移动浪潮中，一起推动移动互联网发展，一起分享移动互联网红利。AppCan得到了广大开发者和众多大企业的认可。目前作为企业移动战略的重要组成部分，已经应用于东方航空、国家电网、泰康人寿等近百家企业。同时众多中小企业、开发团队和个人开发者也在使用AppCan的技术为其客户提供移动开发和支撑服务。AppCanHybrid开发技术具有如下几个特点：开放AppC作为AppCan品牌的官方网站，为开发者免费提供了全部文档、教程、代码管理、应用编译发布等开发服务。同时，AppCan也开放了JSSDK和全部插件的源代码，也开放了插件开发SDK，后期还会逐步开放核心引擎，供开发人员学习和使用。AppCan希望通过这一开放平台，与广大开发者一起打造一个标准化、开放式的移动开发生态系统。低门槛AppCan从初始设计开始一直秉承着降低移动开发技术壁垒，使普通人也可以开发应用的目标，在开发技术、开发环境等各个环节都围绕这一目标进行设计构建。AppCan建立的移动开发体系模型，现在已经成为Hybrid应用开发技术的基本参照，成为其他公司参考的榜样。目前使用AppCan的移动开发者有资深的研发人员，有普通的没有任何原生开发经验的学生、创业者，也有大企业的项目团队。随着技术的发展，AppCan也在不断进步完善，移动开发门槛进一步降低。有创意，就开发。高体验高体验应用时代，体验是应用开发的重要组成部分。AppCan一直遵循着低门槛、高体验并重的设计理念，通过对应用开发中体验能力的原生优化封装，可以让HTML5开发的移动应用体验与原生媲美，打破了Hybrid应用体验不佳的魔咒。2.2AppCanHybrid应用程序框架知其然知其所以然，我们先来了解一下AppCanHybrid的应用体系架构：平台平台ApplicationHTML5\CSS\JavaScriptCodeAppCanJSSDK原生插件JS映射HybridEngine插件管理器BrowserEngineiOSAndroid…uexWindowuexCamerauexCall。。。引擎插件层系统层JS框架层应用代码层从上图可以看出，AppCanHybrid应用分为3层，从上到下分别是应用代码层、框架层、引擎插件层。AppCanHybrid应用与原生应用相同，是直接运行于操作系统之上的独立应用。1、应用代码层应用代码层是开发人员使用HTML5\CSS\Javascript技术编写的应用UI、逻辑等程序。例如登录界面等。2、框架层框架层是AppCan为了减少开发人员开发复杂度，提高体验效果封装的JS开发框架和原生插件的JS对象映射，供应用代码层调用。包含DOM对象操作、MVC、事件、通讯、列表、按钮、电话、短信、二维码等等JS组件和原生组件JS映射。3、引擎插件层引擎插件层，是AppCan在系统浏览器内核上进行扩展的高体验应用引擎和为提高用户体验封装的各种插件的引入、管理服务。包含窗口管理、电话、短信、二维码等的原生实现。AppCanHybrid开发环境搭建以HTML5技术为移动应用开发主体的开发模式，需要专为此设计开发的开发环境支持。AppCanHybrid开发环境AppCanIDE是专为此目的开发实现的集成开发环境。他可以让开发人员脱离开复杂的原生开发环境安装、配置、调试，帮助开发人员更简单快速的完成代码编写、调试、试运行、最终发布的全体系开发工作。AppCanIDE基于Eclipse进行重新定制支持WindowsXP及其以上版本。AppCanIDE的安装非常简单，分如下几步：1、访问AppCan官网()的文档中心在文档中心首页，点击下载图标，进入AppCanIDE下载界面。在下载界面，下载安装包，支持迅雷等第三方下载工具。下载完成之后，我们双击下载后的IDE安装包，进入欢迎界面开始进行安装。点击“下一步”，可点击或手动更改安装目录。默认安装在C:\AppCan\AppCanStudioPersonalV3.1目录下点击“下一步”，确定是否安装。点击“安装”，等待程序安装。因为IDE中内置了很多插件、界面模板资源，因此安装需要一段时间，请耐心等待。安装完成后，点击“完成”关闭安装程序。接下来我们点击AppCanIDE的启动图标打开IDE。启动IDE时，如果您初次安装使用，会弹出登录界面。如果您没有AppCan的开发账号，可以点击立即注册，成为AppCan的开发者。

输入AppCan帐号的邮箱、密码，点击“登录”按钮，进入IDE开发环境。如不想登录，可点击“跳过登录”，直接进入IDE开发环境。只有登录之后,AppCanIDE才可以完成服务器和本地代码的同步，便于我们在服务端完成最终的应用编译、发布和升级管理。如果您连接互联网需要经过代理服务器，那么您可以点击下图“设置”按钮，切换至代理设置界面，支持浏览器代理和http代理。登陆成功后，进入AppCanHybrid集成开发环境IDE上部是菜单、工具栏，左侧是项目代码管理器、右侧是代码调试区域。下部是状态栏，显示开发人员的工作账号。简单吧，没有复杂的配置和环境设定，到此我们就完成了AppCanHybrid集成开发环境的安装。接下来我们就可以进入移动应用开发之旅了。HiAppcan我们先构建我们第一个AppCan应用，来学习如何使用AppCanIDE完成应用的开发调试。4.1创建应用1．以账号及密码登录会员系统，进入应用开发或应用管理界面。2．单击“创建应用”按钮，输入应用名称及应用描述创建应用3．启动IDE开发环境3.1，进入开发界面。4．创建项目方法一：同步项目执行“文件/新建/AppCan项目命令”，在弹出的对话框中选择“同步AppCan”项目命令；导入后如下图所示：方法2:新建项目选择“新建项目”按钮点击下一步进入新建项目界面，输入项目名称、应用名称、应用ID及应用KEY。注：[如果只做本地打包，其ID及KEY可以随便输入]5．点击下一步，进入构建项目模板界面。自定义模板：根据自己的需求及软件内置内容选择“页面结构布局和内容”拼装模板完成后，输入文件名称。可以把自定义的模板保存为项目[此模板只适用于当前项目]或保存为模板[所有项目都可以使用]。内置模板：根据需要选择OA、电商、新闻或阅读模板，项目文件自动生成。6．选择主题。7．修改配置文件，CTRL+S保存。8．项目开发，包括页面布局、样式添加、插件调用、后台数据调用。4.2模拟器调试我们使用模拟器查看应用界面的展示效果。在index.html文件上点击鼠标右键。如下图：IDE会自动打开模拟器显示界面效果。如下图：我们可以通过分辨率选择按钮来选取合适的设备分辨率来展示界面。例如：模拟器基于Chrome内核开发，默认携带HTML调试器。我们在模拟器中点击F12，或者在页面中点击鼠标右键，选择审查元素来打开调试器。调试器主要包含界面调试、源码跟踪、控制台等调试功能。界面样式调试在模拟器中的应用蓝色标题部分点击鼠标右键，选择审查元素。打开调试器。可以看到调试器目前处在Elements元素调试界面。蓝色焦点位置为我们鼠标所指向元素的HTML代码，右侧区域为元素的样式和CSS类。我们可以直接在左侧代码区和右侧CSS样式区直接修改代码，你的修改会直接反馈到模拟器手机界面上。JS断点调试我们点击调试器的Sources标签，进入JS调试器。左侧为文件管理区，管理我们加载的各个页面、JS、CSS文件。中间区域为调试区，我们可以对JS代码设定断点进行跟踪。右侧为信息区。主要有变量监听、调用栈、变量、断点等。我们在左侧区域选择index.html，在JS调试区appcan.ready下一行加入断点。然后按F5键重新加载页面。页面加载时当执行到此行时，会停止运行。如下图所示：代码运行到我们设定的断点行，停止运行。右侧可以看到CallStack调用栈、ScopeVariables变量。点击F10，我们可以单步执行，可以看到代码又执行了一行，右侧CallStack和ScopeVariables会根据运行结果产生即时变化。在实际开发时，我们可以通过调试器即时跟踪程序运行情况，分析问题原因。4.3调试中心AppCan调试中心可以同步所有项目，更改后保存回到手机刷新就可以看到效果，不用重新打包及安装[适应于苹果越狱及安卓手机]1、打开IDE，执行“AppCan/AppCan调试中心”命令，完成AppCan调试中心打包；2、将安装程序安装至后手机3、执行“AppCan/启动AppCan调试中心”命令，启动AppCan调试中心[红线处为AppCan调试中心服务器地址，无线网卡地址]；4、手机启动AppCan调试中心[确保手机、服务器在同一WIFI下]；5、点“开始使用”按钮，输入服务器地址，连接服务器[手机和服务器通过同一无线网络连接]；6、连接成功后，会同步你的所有项目；7、选择调试的项目，测试功能及效果；8、服务器端更改样式或添加内容，CTRL+S保存；9、手机端返回到项目界面，重新单击调试项目，更改后的内容会刷新过来；10、执行“AppCan/启动真机同步调试服务”命令；11、手机进入AppCan调试中心，选择要调试的APP页；12、服务端选择该页面[绿色为选中状态]，进入元素调试窗口并选择某个元素；选中某个元素后，进行手机端效果预览。13、右侧更改样式[双击样式区域，输入属性及值并回车确认];手机端同步效果。4.4本地打包当代码基本调试完成后，我们还需要真正生成安装包，检查应用运行是否正常。为此AppCanIDE提供了本地打包服务，来帮助你快速验证安装包，而不需要任何原生环境支持，这就是AppCan的强大之处。在工程phone目录上点击鼠标右键，选择生成安装包：我们可以设定真正的应用图标和修改应用名称可以配置正式的应用启动图片通过自动选择插件按钮，选择我们代码中使用到的插件。点击完成开始打包。完成时，会自动打开安装包路径，我们可以直接安装应用到手机。4.5正式编译发布当真机验证完成后，我们最终还是要发布正式版的应用。AppCan结合互联网技术，在云端部署了Android、iOS编译环境，通过代码同步，应用配置，完成应用的最终编译。这样普通的开发人员不再需要在本地安装任何原生环境。我们先同步代码到AppCan服务器。在IDE中项目工程目录phone上点击右键，选择team->提交。在提交其中，输入提交备注。确认提交文件，点击OK最终提交代码。提交成功后，我们就可以进入最后的编译发布环节。进入AppC页面，使用我们的账号登陆，进入应用开发界面。在这里可以找到我们刚才创建的应用。点击应用名称进入应用开发管理面板。点击左侧的应用打包进入应用打包界面。像本地打包一样，我们配置好应用图标、应用启动图片、应用插件，并上传我们的证书等文件，最后进入云端打包。在云端打包界面，我们配置好需要生成的平台、运行参数和版本号。最后点击生成安装包。AppCan会根据选择完成应用的最终编译。编译完成后，AppCan会自动生成应用二维码。通过扫描工具我们可以直接下载安装生成的安装包。至此我们就完成了一个AppCan应用开发的全部流程。接下来我们将要进入真正的应用开发。4.6IDE3.2新增功能点4.6.1AppCanIDE开发流程之加密AppCanIDE为开发者提供了应用加密功能，支持全包（.html文件、.css文件、.js文件）加密及部分（可选文件）加密，以保证您的代码安全。在IDE中应用开发完成后，修改config.xml文件，默认为全包加密。若勾选“部分加密”，则显示当前应用下的目录结构（css目录、js目录及html文件）。选择全部或部分加密后，保存confi.xml文件，当前应用目录下会自动生成一个obfuscation.xml文件，里面存放了被加密的文件名。提交代码至线上，在线上打包，代码被加密。4.6.2全入口开发-App、Web、微信一个都不能少随着移动互联网的爆发，入口之争愈演愈烈。从大的趋势看，App、Web、微信成为最火热的三大入口。这给移动开发者和移动创业者带来新的考验，需要考虑多个入口下的开发与管理。顺应这种趋势，AppCan全新升级IDE系统，为开发者提供全入口开发支持，即一次开发，多平台，多入口，全适配。基于AppCan新版IDE，开发者可一键生成App、Web/微信App两种形式，轻松应对市场需求，在竞争中更胜一筹。使用范围当您的应用中仅涉及到了以下方法，均可支持生成Web/微信App。uexWindow.openuexWindow.cbOpenuexWindow.closeuexWindow.cbCloseuexWindow.closeByName

uexWindow.

openPopoveruexWindow.closePopoveruexWindow.setPopoverFrameuexWindow.setBounceuexWindow.refreshBounceuexWindow.evaluateScriptuexWindow.evaluatePopoverScriptuexWindow.alertuexWindow.closeAlertuexWindow.confirmuexWindow.toastuexWindow.closeToastuexWindow.actionSheet(buggly)

uexWindow._cbActionSheetuexWindow.bringPopoverToFront另外，想要使用微信接口，需要后端提供一个签名服务器（该版面提供nodejs版本），并且再所有用到接口的页面进行签名否则所有接口失效，该版本提供一个setWeiXinConfig(url)方法，进行自动签名，URL是签名接口的完整路径。已兼容接口：startRecord<==>uexAudio.startBackgroundRecordstopRecord<==>uexAudio.stopBackgroundRecordonVoiceRecordEnd<==>uexAudio.cbBackgroundRecordplayVoice<==>uexAudio.open&&uexAudio.playpauseVoice<==>uexAudio.pausestopVoice<==>uexAudio.stoponVoicePlayEnd<==>uexAudio.onPlayFinishedchooseImage<==>uexImageBrowser.pick&&uexImageBrowser.pickMultipreviewImage<==>uexImageBrowser.opengetNetworkType<==>device.getInfo('13')openLocation<==>uexBaiduMap.open&&uexBaiduMap.setZoomLevel&&uexBaiduMap.setCentergetLocation<==>uexBaiduMap.getCurrentLocationscanQRCode<==>uexScanner.open如想用微信其他接口，可自行封装。使用方法1、在IDE中应用开发完成后，如要生成Web/微信App，需先配置当前应用的config.xml文件，勾选”Web/微信App”选项并保存；注：勾选“Web/微信App”后，请避免使用页面实时预览、模拟器调试及svn代码上传功能。如想使用，请提前在config.xml文件中勾掉不选。2、在当前应用中选择phone目录右键，1）、选择“启动Web/微信App服务”，可启动本地服务在内网中预览应用效果，此时控制台会显示本机IP及端口在手机浏览器或微信中输入或扫描IP+端口地址，直接预览应用效果；2）、选择“生成Web/微信App”，在安装目录中的WebApp-Applications中生成一个zip包将zip包部署至外网服务器即可访问。3、项目开发完成后需要部署到服务器上才能访问，首先你需要一台外网机器，以我的测试机器为例，登录到服务器上可以自己部署服务器，也可以用我们提供的nodejs包，按照nodejs，可以参考,按照完成后输入node–version;查看nodejs是否安装成功部署我们提供的nodejs包，可以在index.js中修改端口号，你的webapp应该放在public文件下，该目录默认为静态文件目录，你也可以在index.js中修改把该包传到服务器上然后，切换到相对应目录用nodeindex.js来启动服务我们就可以在手机上访问我们的webapp网站了地址为：http://ip：port/loader.html，如果需要配置默认也面可以设置index.jsapp.use(express.static(path.join(__dirname,'public'),{index:'loader.html'}));如果我们想生成微信的app，调用微信的接口，我们需要修改一下配置文件，来启动签名服务。打开config目录下面的config.js文件在微信的公众号管理后台中找到这些参数，参考：/wiki/17/2d4265491f12608cd170a95559800f2d.html/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html配置完成后重写启动node服务器后，可以打开默认的签名服务接口然后修改loader.html中setWeiXinConfig(url);url为该完整路径包括后面的要签名的url在微信中打开然后所有的接口都可用了，demo效果常见问题及解决方法1、名称冲突：如果你修改了一个元素属性或者一个元素的样式不起作用时，你可以考虑一下去检查是不是元素命名冲突了，因为我们要把所有的popover合并到一个页面中所以会有冲突问题2、css样式覆盖：如果你加载一个页面后原始页面的其他样式乱了，你可以考虑一下新页面中的样式是否把原有样式覆盖了，因为我们要把所有的popover合并到一个页面中所以会有冲突问题3、css样式不起作用：如果你打开一个新的popover页面，引用的css文件中修改样式不起作用，可以考虑这个问题，同一个样式在同一个win中只会加载一次，后续的不会加载。4、js冲突问题：如果你新打开一个浮动窗口，然后关闭了，以前写的某个方法原本好的现在报错了，可以考虑一下这个问题，因为我们要把所有的popover合并到一个页面中所以会有冲突问题5、js判断问题：如果你新打开一个浮动窗口，执行一个判断某一个变量是否存在，或者不是按照正确的方式，可以考虑一下这个问题，因为我们要把所有的popover合并到一个页面中所以会有冲突问题，所以后面执行后会修改已存在的变量6、body、html样式问题：如果你在body、html上面加了一些样式，在webapp中可能不显示，因为我们默认会把所有的body、html、head等元素删掉。7、白色popover问题：由于popover会相互覆盖，webapp默认会把所有的popover设置成白色，所有如果遇到这些问题的话可能是popover的问题。8.height设置相对值不起作用：因为我们会在所有的popover上面加上IScroll保证滚动效果，会在外部加一层，会根据实际内容来算滚动高度，所以不会起作用，可以设置固定高度解决这个问题。9、返回按钮：因为我们默认会加上一个#index来打开新页面，如果回退到首页的话，会再重新刷新页面，因为我们的首页是一个空白页面，来管理整个窗口。10、修改页面高度多出内容会覆盖：因为我们用的是IScroll加载页面，如果内容修改需要重新刷新页面保证页面滚动，请调用refreshBounce（）来保证页面效果。11、页面展示内容覆盖：可以考虑内容是否是异步加载的，因为我们是直接取现有的高度如果你异步加载某些内容的话重新修改高度可能会把原来的已经算好的popover覆盖掉。12、页面不能滑动：如果你在某一个元素上面绑定了事件，同时阻止了事件的传播这一块可能造成IScroll接受不到事件导致页面不能滑动。13、功能不能用：请检查是否用到了没有封装的接口，目前我们只对uexWindow做了封装，如果是微信内运行的话还有一些微信的插件可以支持，另外如果取数据的话可以把appcan.request.ajax改为Zepto.ajax,同时保证参数问题，因为Zepto传文件会有问题，建议复用函数，这些多多少少还是有一点不同的，getJSON，get，post这些方法完全可以使用。4.6.3边改边看，实时预览在App的开发过程中，往往需要多次调试、修改，每一次改动都需要耗费开发者很大的精力，步骤繁琐、费时费力。并且开发者很难判断，后台的代码，是否能满足功能的需求、界面设计的需求。AppCan在全真模拟器功能上，进一步升级，新版本支持边改边看、实时预览的功能，开发者只需在菜单栏中点击“实时预览”，即可在IDE中展示当前开启的页面效果，修改当前页面内容并保存，预览区内即可自动刷新页面展示修改后的内容，让开发者专注编程工作，快速、高效的完成移动项目。1、支持预览界面的大小设置，选择已有尺寸或自定义尺寸查看页面适配效果。2、支持代码调试。当前页面，点击“”，或右键（支持F5刷新、F12调试）3、支持插件模拟。 Appcan程序设计基础5.1AppCan程序框架上一章我们建立了HiAppCan项目，完成了一个应用从建立到最终发布的全周期的开发。但应用的代码是由AppCanIDE自动生成的，我们并没有真正编码。这一节，我们将结合HiAppCan的代码对一个AppCanHybrid应用的目录结构、文件类型及其功能进行分析。5.1.1AppCan应用目录结构我们在IDE中，打开HiAppCan项目，可以看到应用的目录非常简单。根路径文件phone目录为项目的基础目录；icon.png是应用的图标；index.html和index_content.html是实际应用界面代码；config.xml是应用配置文件。CSS样式目录css目录包含了AppCanHybrid应用的基础，依赖于CSS文件；ui-base.css是通用css类，主要定义常用的css样式；ui-box.css是AppCanHybrid应用的布局css类；ui-color.css是应用的配色方案文件；Appcan.control.css是基于UI基础类之上定义的AppCan基础控件。例如按钮、列表等；appcan.icon.css是AppCan提供的默认图片图标；js目录下包含了AppCanJSSDK的js库文件；fonts目录下是AppCan引用的font-awesome字体图标库文件，内置了丰富的图标。JavaScript脚本目录appcan.js是AppCanJSSDK的核心文件，用于封装DOM对象处理、窗口操作、通讯服务等基础操作；appcan.control.js是AppCanJS基础控件，例如按钮、开关等；appcan.listview.js是listview控件的js对象实现；appcan.slider.js是图片滑块的js对象实现；appcan.treeview.js是treeview对象的实现。资源目录wgtRes目录为应用资源路径，我们可以在应用中放置资源图片为原生控件提供资源。在应用中通过res://格式传递给原生控件。由于HiAppCan应用本身没有用到资源，因此项目中没有此目录。此目录可以手工建立。config.xml是应用的项目配置文件，类似于Android应用开发中的AndroidManifest.xml文件。我们通过IDE的config编辑器对其进行编辑管理。应用ID和应用KEY是应用的唯一标识，一般由AppCan项目创建时生成。也可在创建本地项目时自行设定；起始页是应用启动时应用默认加载的第一个页面。可以认为是应用的直接入口。在HiAppCan应用中index.html即为其入口文件；调试服务器地址是应用的Log输出地址和真机调试地址。我们可以在对应IP的IDE中查看LOG输出和真机同步调试；真机同步调试，只有打开此开关，才可以使用真机调试服务远程调试安装在手机中的应用界面；网页加密，当上传代码到AppCan服务器后，如果此开关打开，则所有页面会自动加密。此时编译的安装包的网页源码不再可见，保护你的私密数据和配置。启用此功能时，开发人员代码不需要进行任何调整。5.1.2AppCan应用解析上一节我们对AppCanHybrid应用的目录构成进行了分析。接着我们将深入代码了解一下AppCan应用构造。AppCan应用的核心代码在HTML页面中。AppCan的应用界面一般是由主框架页面和内容区域页面组合而成。例如HiAppCan应用中的index.html即为框架窗口，称之为window。index_content.html为内容区域窗口,称之为frame。通过框架窗口和Frame叠加显示构造界面。当然也可不使用Frame只使用window，例如常见的登录界面等内容区不需要滚动的场景。由一组Frame和window构成一个界面，这样的多个界面根据逻辑拼装在一起就构成了应用。例如一个window处理登陆，一个window处理注册，一个window加上frame显示公司通讯录，一个window处理信息编辑和发送。我们通过代码根据用户交互逻辑控制应用从一个界面进入另一个界面。当新的window打开时，之前的window会进入休眠，并保存在AppCanHybridEngineWindow栈中，当关闭当前窗口，则会销毁它，并从栈里的前一个窗口。这套窗口管理体系与原生应用窗口架构非常类似，开发人员更容易理解和操作。5.2AppCanUI工具AppCan在IDE中提供了很多已经编写好的window框架和frame窗口。通过IDE的界面向导，可以很方便的根据项目要求配置生成对应的界面。打开IDE，在phone目录上点击鼠标右键，选择新建->AppCan页面，进入页面构建向导。为新界面起一个名字，这里我们设定新界面名称为login然后我们可以从IDE内置的布局结构参考中选择框架页面，然后选择内容展示模板。屏幕右侧为拼装后的展示效果。组合成功后，我们点击完成生成最终代码。可以看到工程目录下自动创建了login.html和login_content.html两个页面。可以通过模拟器检查，与我们的选择相符。AppCan应用界面模板库是支持网络更新的，并且会不断发布新的界面范例，开发人员可以根据需要选择使用。多窗口框架6.1窗口窗口是AppCanHybrid移动应用界面的最基本单位。窗口是所有原生控件、Frame等的容器，是每个界面布局的基础，他负责处理界面间的逻辑、动画等基础工作。根据config.xml中的配置，应用会自动加载创建第一个窗口。其他窗口都需要显式调用。 appcan.window.open对窗口进行创建。每个窗口都会有一个名字。由应用自动加载的第一个window，名称自动设定为root。其他窗口的名称在appcan.window.open调用时需要开发者指定，名称支持中文。HiAppCan中的index.html即为一个标准的window。我们对其进行分析。Index.html的布局框架如下图所示：FFooterContentBodyPageheader显示区HTMLHeadscript脚本区对应index.html页面中，分为head、body和script三大部分。Head部分为标准html页面的资源引入和配置区域<head><title></title><metacharset="utf-8"><metaname="viewport"content="target-densitydpi=device-dpi,width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"><linkrel="stylesheet"href="css/fonts/font-awesome.min.css"><linkrel="stylesheet"href="css/ui-box.css"><linkrel="stylesheet"href="css/ui-base.css"><linkrel="stylesheet"href="css/ui-color.css"><linkrel="stylesheet"href="css/appcan.icon.css"><linkrel="stylesheet"href="css/appcan.control.css"></head>其中<metaname="viewport"content="target-densitydpi=device-dpi,width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">定义了我们的网页采用设备精度，屏幕宽度，不缩放。这种配置可以充分发挥手机设备屏幕的显示能力，使用户界面更加美观精致。<linkrel="stylesheet"href="css/fonts/font-awesome.min.css"><linkrel="stylesheet"href="css/ui-box.css"><linkrel="stylesheet"href="css/ui-base.css"><linkrel="stylesheet"href="css/ui-color.css"><linkrel="stylesheet"href="css/appcan.icon.css"><linkrel="stylesheet"href="css/appcan.control.css">这一部分默认引入了AppCan屏幕自适配方案的基础CSS文件、图标字库awesome样式文件和控件样式文件。开发人员可以添加其他第三方CSS样式或自定义样式的引用，例如JQMobile、SenchaToucn等。Body部分是应用界面布局和展示的主体部分。Body一般由一或者多个page组成。<divid="page_0"class="upubub-verbc-bg"tabindex="0">每个页面我们需要为其起个名字，多个page我们一般在使用HTML技术实现多页面处理时采用。多个page中，必须只有一个处于显示状态，其他配置需要使用uhide类进行隐藏。<divid="page_1"class="upubub-verbc-bguhide"tabindex="0">为了提高体验性减少开发复杂度，一般只在一些简单内容展示切换时使用。绝大部分场景我们都使用一个页面。页面一般由三个部分组成header、content和footer。Header部分是一般展示窗口的标题和标题按钮。Content一般作为frame的屏幕映射存在，用于定位frame。Footer一般作为下导航或状态展示。Header和Footer根据需求设定，并不一定必须存在。Body区域还包含了一些script标签。这里主要用来引入我们依赖的js文件。<scriptsrc="js/appcan.js"></script><scriptsrc="js/appcan.control.js"></script>上述页面布局模型能够适配绝大部分场景。当然开发者也可完全使用其他框架重新构造页面。Script区域用来编写代码，处理我们的界面逻辑。index.html中有一些默认代码，appcan.ready(function(){vartitHeight=$('#header').offset().height;appcan.frame.open("content","index_content.html",0,titHeight);window.onorientationchange=window.onresize=function(){appcan.frame.reisze("content",0,titHeight);}});上述代码中appcan.ready是窗口网页和所有依赖原生组件初始化加载完毕后的回调。我们可以在此函数运行后调用原生组件。在上述appcan.ready的回调中，我们使用appcan.frame.open创建了一个浮动窗口，这个窗口的大小与content元素相同，顶点在header下方。window.onorientationchange=window.onresize=function(){appcan.frame.resize("content",0,titHeight);}用来处理当屏幕横竖屏切换时，重新使用appcan.frame.resize设定浮动窗口frame的大小。从上述代码可以看出，AppCan应用界面中window和frame的框架层次。如下图：FFooterContentHeaderFrameframe是覆盖在主窗口之上的独立页面，window用来处理整体的布局框架。因此可以看出window窗口中的page与屏幕大小相同。并且内容不超出屏幕，不能够滚动。其中content只是起到定位作用。而frame中可以显示超过屏幕高度的内容。由于是一个独立的原生view，他的滚动等都是原生实现的，因此会比使用iScroll等JS框架进行界面内容滚动的效果会更加流畅。我们在加入下述代码，使用户通过点击标题栏按钮打开之前添加的登录界面。首先在header部分进行如下修改，为标题栏添加一个图标：<divid="header"class="uhbc-text-headubbc-head"><divclass="nav-btn"id="nav-left"></div><h1class="utub-f1ulev-3ut-stx-c"tabindex="0">AppCan</h1><divclass="nav-btnfafa-user"id="nav-right"></div></div>然后我们在script区域加入如下代码appcan.button("#nav-right","btn-act",function(){appcan.window.open("login","login.html",10);})上述代码我们使用appcan.button来监听nav-right这个DOM对象的点击事件，并为其附加上点击效果btn-act的CSS类。同时制定回调函数来处理点击事件。在回调函数内部，我们使用appcan.window.open打开了login.html，同时为其设定名称为login。打开login窗口时的动画设定为10，从右向左切入。6.2FRAMEFRAME是内容展示的主体区域，与window负责界面主题框架布局不同，FRAME是为用户最直接交互提供服务的容器。Frame叠加在创建他的window之上，当window关闭时，其随之关闭。例如我们在index.html页面中通过appcan.frame.open("content","index_content.html",0,titHeight);创建了覆盖在index.html页面中content区域上的浮动窗口，此浮动窗口加载了页面index_content.html。我们可以在index.html页面里调用appcan.frame.close来关闭浮动窗口。例如：appcan.button("#nav-left","btn-act",function(){appcan.frame.close("content");})6.3MultiFRAMEAppCan专为Frame提供了支持拖拽效果的MultiFrame组件。我们可以使用multiFrame构建并列多内容区域的浮动窗口组，且可以通过手指拖拽完成FRAME间的切换。在index_content.html页面中添加一些代码进行标注。如下：<bodyclass="um-vp"ontouchstart>A<scriptsrc="js/appcan.js"></script><scriptsrc="js/appcan.control.js"></script></body>复制index_content.html为index_content_b.html，修改新的页面中的内容如下：<bodyclass="um-vp"ontouchstart>B<scriptsrc="js/appcan.js"></script><scriptsrc="js/appcan.control.js"></script></body>然后我们在index.html中对代码进行修改。appcan.frame.open({id:"content",url:[{"inPageName":"P1","inUrl":"index_content.html",},{"inPageName":"P2","inUrl":"index_content_b.html",}],top:titHeight,left:20,index:0,change:function(err,res){console.log(res.multiPopSelectedIndex);}});上述代码中我们可以看到，我们打开了包含两个页面的浮动窗口，并且设定了当前展示的页面索引为0，即展示第一个。在上述代码中，我们注册了一个回调函数change，当使用手指拖拽浮动窗口完成页面切换后会自动调用此回调函数，告知我们当前的页面索引。6.4对话框在应用开发过程中，我们会经常需要给用户一些直观的提醒，引导用户执行进一步的操作。AppCan封装了多个标准的对话框来帮助开发者处理类似场景。警告对话框appcan.window.alert({title:"提示",content:"您是否要支付当前订单?",buttons:['确定','取消'],callback:function(err,data,dataType,optId){$("#info").html("您按下了按钮["+['确定','取消'][data]+"]");}});上述代码会弹出一个提示框，提示框包含了标题、内容和两个按钮，当点击任一个按钮都会触发callback函数，其中回调函数中的参数data代表具体按下了哪个按钮。Buttons以数组方式设定按钮，最多支持三个按钮。提示对话框提示对话框会弹出一个包含编辑框的对话框，如下述代码，mpt({title:"提示",content:"请输入您的手机号",buttons:['提交','稍后再说'],defaultValue:"13",callback:function(err,data,dataType,optId){$("#info").html("返回的数据"+data.value+"["+['提交','稍后再说'][data.num]+"]");}});上述代码与警告对话框相似，其中defaultValue定义编辑框的默认值。回调函数内部，data.value为用户输入的数值。Data.num代表我们具体按下了哪个按键。消息提示框appcan.window.openToast("正在校验中,请稍后",2000,5);上述代码中我们创建了一个消息提示框，这个提示框在屏幕中央显示2000毫秒后自动关闭。消息提示框有四个参数，第一个参数我们可以设定提示语。第二个参数我们设定提示时间，如果希望他一直提示，直到我们关闭提示，则传入<=0的参数即可。第三个参数是提示框在屏幕中的显示位置索引。我们把屏幕分为9个区域，如下图1123456789如果屏幕居中显示，我们设定位置索引为5即可。最后一个参数表示是否有等待动画效果，如果有则传入1，则消息提示框会自动显示动画。我们经常会执行一些比较长时间的操作，我们希望提示用户等待这些操作结束，这时我们设定toast一直显示。当我们执行完相关操作后，可以调用appcan.window.closeToast()接口来关闭当前正在显示的消息提示框。当上一个提示框尚未消失，我们又一次调用appcan.window.openToast接口时，会替换掉上一次打开的消息提示框，即当前应用在同一时间仅存在一个消息提示框。6.5界面间通讯我们的应用都是由各种界面组合拼装而成的，必然会涉及到界面间参数的传递和互动。在AppCanHybrid应用中，常见如下场景:由一个窗口打开进入另一个窗口，并传递参数；关闭一个窗口返回前一个窗口，并传递参数；窗口或Frame产生变化时，通知其他窗口或Frame；其他。上述场景可以归纳为数据的传递和事件的传递，在应用开发中，