appcan初级认证讲师讲义手册

AppCan初级工程师讲师讲义手册AppCan初级工程师讲师讲义手 AppCan的应用开发流 AppCan的UI布局与控 JS API简 项目实 一站式移动开发幻灯片培训如我培训部XX今由我给座的位次课程希望过本次各位能够有所收获，过程中如果有什么问题可以随时提问，本次主要从下三个面进行【切到下一张T】幻灯片•HybridApp开发技•一站式移动开发平一站式移HybridApp开发技术、一站式移动开发平台及一站式开发服务平台，我们先第一个内容【切到下一张PPT】幻灯片HybridApp开发技幻灯片HybridApp开发技Hybrid；APPWEB语言开发，那有没有两种语言混合HybridApp幻灯片HybridApp开发技HybridApp（混合模式“NativeApp良好用“WebApp跨平台开WEBAPPHTML5客户端、掌上及淘宝客户端都是使用混合技术开发的。幻灯片HybridApp开发技 前面我们HybridApp开发技术是使用WEB及程序语言同时进行开发，到底谁占主体呢？PPT】幻灯片HybridApp开发技Hybrid网 程语 语谁占主体APPAPP开发过程中开发者的工作量来进行幻灯片应用组幻灯片应用组APP工作量有多大【讲的时候切到下一PPT】幻灯片原生开发技一次【PPT】幻灯片原生开发技原生开发人员完成开发，且不同平台之间基本上都要完成次 Hybrid开发技术即希望引入HTML或技术来达到减少以致忽略原phonegap【PPT】幻灯片混合模式开发技国外混合模式开发技术为phonegapallinonepage，具体可参照备注列举几条或按图幻灯片PhoneGap不 采用ALLinOnePageAppCanphonegap来说有哪些优势呢？接下来我PPT】幻灯片AppCanOneFeatureOnePageAppCan优势，AppCanHTML5开发人员作为开发主体，原生开发人员辅导的开发体系【PPT】幻灯片AppCan技术是以HTML5开发人员作为开发主体，原生发人员辅助的开发体HTML开发人员聚焦于独立界面逻辑、交互的开发，我们先看一站式移动开发平台，这也是我们今天讲的第幻灯片一站式移动开发平、、幻灯片?幻灯片幻灯片2、人性化开发环境-UI控件封幻灯片平台特3、人性化开发环境-内置多套模幻灯片平台特3、人性化开发环境-自定义模幻灯片平台特4、支持安装包全名或部分加幻灯片平台特5、支持真机调幻灯片平台特6、丰富的插件资幻灯片平台特7、插件同步勾幻灯片AppCan大家介绍下我们的产品线【PPT】幻灯片MEAPSDKMAS，SDK包幻灯片开发支撑系统幻灯片移动业务整合系统幻灯片企业移动信息移动化应用与企业各个业务系统之间的集企业移动信息化就是移动化应用与企业各个业务系统之间的集B【讲的同时切到下一张幻灯片企业集幻灯片EMM平ppCaE。EMM应用的管理服务，包括以下模块【按PPT讲】幻灯片 幻灯片在帮助开发者完成p开发的同时，ppCa还整合了众多服务能力，式 供括创业会技术培、指导、公司合作、工作推荐、品牌支、项目支持等一系列支持，速 发利。幻灯片人才培拥有9大实 、广州、西安、重庆 、厦门、哈尔幻灯片人才培每月开发者固定2天幻灯片人才培学生培训1-6个幻灯片线 每周1幻灯片通过培训定期为客户输送合格人幻灯片优秀创业者全家幻灯片优秀创业者剑幻灯片幻灯片合作加幻灯片合作加讲师\工程师招只要有能力，薪资不是问幻灯片合作加幻灯片相信自谢AppCan的应用开发流课程的主要内容有：PPT】在本次培训的，主要围绕三个：AppCan开发环境的搭建、 上一下大众版的IDE。引导学员学会访问文档。需要提醒学员注意，目前不支持xpsp2及其以下操作系统和MacOSX操作系统。当IDE完成的时候，就可以点击他，按成后，需要了解一下，相关的信息。找到对应的安装路径Mas-ApplicationsMas服务-ApplicationsApp项目使用大众版IDE，进行项目开发，首先需在要 号，下面介绍一下帐号的方法【切到下一张PPT】 录【切到下一张PPT】应用的ID和KEY。9- 结构【切到下一张PPT】 CSS样 AppCanHybridCSSui-box.cssAppCanHybridcssAppcan.control.cssUIAppCan AppCanJSSDKjs JavaScriptappcan.js是AppCanJSSDK的文件，用于封装DOM对象处理、窗口appcan.control.jsAppCanJSappcan.listview.jslistviewjsappcan.slider.js是滑块的js对象实现；appcan.treeview.jstreeviewconfig.xml【切到下一张PPT<metaname="viewport"content="target-densitydpi=device-dpi,width=device-width,initial-scale=1,user-scalable=no,minimum- AppCanCSS样式文件和控件样式文件。开发人员可以添加其他第CSS样式或自定义样式的Body部分是应用界面布局和展示的主体部分Body一pagepage我们一般在使用HTML技术实现多页面处理时采用。多个page中，必须只有一个处于显示状态，其他配置需要使用uhide类进行隐藏。为了大部分场景我们都使用一个页面。页面一般由三个部分组成header、content和footer。Header部分是一般展示窗口的标题和标题按钮。Content一般作为frame的屏幕映射存在，用于定位frame。FooterHeaderFooterBody区域还包含了一些script这里主要用来引入我们依赖的js文<script<scriptPPT】AppCan支持本地模拟调PPT】AppCanPPT】17-PPT】20-总结前面所讲的AppCan平台上如何进行应用的创建及开发，当开发完 器，右键单击phone ，点击team，完成源码提交到官网服务器。25-AppCanHybrid开发团队设计的移动应用开发环境。它帮助企业紧密地把HTML开发人员、Native开发人员、测试人员、代码配置管理AppCanSDK结合HybridAppCanSDKAppCanDSS系统是AppCanSDK的子系统，为AppCan系统提供集成化的编译和Web管理服务。登录sdk: AppCanSDK系统管理能力指定用户为应用管理员，负责应用项目的。每个应用可以有多个管理员。应用管理员可以为应用设定应用开发人员、测试人员。通过AppCanSDK，可以获取的引擎更新版本以适配的系统和系统提供公共插件管理，通过AppCanSDK，获取版本的插件或系统提供Android、iOS系统的编译打包服务。通过WEB界面，开发人员、项目经理、配置管理员可以便捷地完成应用参数的配置，编HybridHTML5NativePluginHybridEngine，编译生成目标WEBApp用于拼装HTML5代码，压缩为网页文件包，并自动生成符合HTML5WEBApp可以不依附于MAS系统，直接作为移动HTML5为AppCanEMMAppCanSDK系统有三种用户角色：系统运维人员、项目管理员和开发者。系统运维人员默认帐号为admin，初始口令为admin以应用管理员角色登录系统后，有首页、应用管理、操作日志、帐号首页模块将显示该管理员的登录信息、项目信息统计等与该管理员所管以添加应用，或者AppCanSDK系统本身自带丰富的插件供应用开发调用。如果开发者自点选“添加插件”，在页面中输入相应的信息后，点击“创建”，即表，同时还可点击“添加开发者”按钮，将显示系统运维管理员(admin)添加的所有（注意不hybrid点击应用列表的hybrid打包按钮，打包应用。SVNPPThybridPPT可以为相应的客户端上传多分辨率的启动页，上传后保存。启动页有全屏和非全屏之分，如果选择iPad或Android可以选择Android系统或者iOS基于AppCanSDK系统的应用引擎开发的移动应用，内置多种开关设PPT】包括企业、发布和Android管理。如果企业申请了企业证书，并且希望应用的发布通过Apple公司的AppStore，那么需要上传iOS企业按照界面提示要求填写信息，并上传相应的及发布文件，最后点击“保存”即可。发布是Apple公司面向普开发者的应用发布，有此的应用只能在AppStore中发iOS企业和iOS发布两个功能只提供对应的上能，应用打包时可以选择使用哪个。Android用于Android应用的数字签名，中指定了应用的有效时间、开发者信息等内容。可使用JDK中自带的keytool工具生成自定义的数字签名文件【切到下PPT】选择要打包的系统，填写版本号、名称等，点击“生成安装包”。生成安装包后在应用列表点击“查看版本”，可以看到应用已经打包完成。可以点选“”或者“提交测试”。至此，hybrid打点击“查看版本”按钮，显示当前项目的版本列表，包括hybrid打包、WebApp在版本列表中点击“提交测试”，该打包将出现在该项目的测试人员的测试列表中。同时测试状态变为测试中，待测试人员测试通过后，测试如在云端打包中点击生成安装包时，出现提示“应用的config.xml文当对应用进行了一些小的升级后，可以生成补丁包。填写原始名称和新名称后，点击打包，生成补丁包。点击“查看版本”查看生AppCanUI布局与控以自己的方式，介绍一下今天培训的UI布局及控件，看一下主要目PPT】本次课程的主要内容，介绍一下今天培训的主要内容：UIUI及UIPPT】介绍弹性盒子结构，什么是弹性盒子？讲师按照PPT的内容讲解明白即PPT】IDE<div<divstyle='disy:-webkit-box;height:400px;border:1pxsolidblue;-webkit-<div<div<div9-AppCanCSSPPTIDEUIIDEUI为了使应用能够根据设备的不同分辨率自动调整页面效果AppCanPPT的文述讲清楚分PPT】14-AppCan提供了一套响应式、移动设备优先的流式栅格系统，结合弹性盒f1等类）的组合来创建页面布局，将内容放入这些创建好的布局中。PPTui-box架构可以更容易更方便的适配不同分辨率不同屏幕尺寸的AppCan平台封装了很多控件，供开发者使用，在IDE中介绍滑块的PPT】JS幻灯片PPT】幻灯片幻灯片AppCan应用最基本的单位。AppCan的应用界面采用的是引擎中了个窗口栈就打开窗口一个一个往aait”,它是起始页的名igl，，PPT】幻灯片AppCan使用uexWidget对象管理应用应用的生存周期。如上图所示，当应用有其他第应用启动时，会调用uexWidget.onLoadByOtherApp回调，并可以获取到其他应用传递来的参数。当其他应用打开，当前应用进入，则会调用幻灯片当需要打开一个窗，首先是启动uexWindow，然后加载全局进行解析，完成后，加载window，window.onload函数通知UEXUEX对象都附加完毕后，再调用appcan.ready（uexWindow.uexOnload函数。这里就要注意了：appcan.readyAppCan页面准备就绪的一个标志然后下来就是窗口的运行，挂起或重新开始，然后通过appcan.window.close来关闭窗口。在这个函数调用后，我们不能够再UEXclose前，一定要关闭interval（间隔、区间）或timeout(过期、超时)这两个，如果destory销毁，这样会释放掉所有的UEXShutdown，整个窗口关闭。幻灯片（PPT】幻灯片一个标准的主窗口是由头部header、内容区content和底部栏footer三部分构成的一个window是全屏显示的header和footer没有footer，则content大小是全屏大小减去header大小。了解了窗幻灯片Appcanappcan.window.open行窗口的打开操作。然后按照ppt介绍各个参数的作用。由于参数很幻灯片幻灯片windowframe。它是PPT】，，幻灯片按照pptwindow和幻灯片（然后我们来做个案例，看下使用情况【PPT】幻灯片appcan.frame.open。自己再举一个打开浮动窗口的windowframe，AppCan幻灯片AppCanMultiFrame组建来实现幻灯片url处用数组来表示。浮动窗口切换幻灯片作AppCan封装了多个标准框如alert警告prompt提示和幻灯片系统默认的alert比较死板，使用Appcan封装的框，可以灵idePPT】幻灯片Idetoast带加载滚动条和不带滚动条各举一个例toasttoast，数据toast；如果仅仅作为提示，可以不需要滚动幻灯片AppCan中，有两种传参先来看下第式。我们通过appcan.locStorage对象来实现appcan.locStorage.setVal()来存值，幻灯片demo，来演示“存”和幻灯片AppCan还提供了第二种通讯机制——窗口驱动PPT】幻灯片demo，实现“订阅”和幻灯片AppCan提高用户体验的一种【切到下一张PPT】幻灯片幻灯片幻灯片网络通讯与数现。而在移动通讯开发中最常用的即为基于HTTP/HTTPS协议的数据交互。AppCanappcan.requestappcan.requestajaxgetgetJSONpostpostFormappcan.request.ajaxoptionsajaxoptions.type:请求的类型，包括GET、POSToptions.data:要请求的URLdata例如：传a.jpegoptions.contentType:默认:false要传给服务端的数据内容的options.dataType:服务端的响应类型，包括json,jsonpscriptxml,html,text中的一种options.beforeSend(xhr,settings):请求发送之前的回调,返回options.success(data,status,xhr):请求发送成功后的回调plete(xhr,status):请求完成后的回调，不管是否出错gress(progress,xhr):上传的进度，只有包含上传文件的options.:添加信 {password:'',path:''}其PPT】PPT】GetPPTAJAXGETPOSTPOSTAJAXPOSTPOSTHTMLFORMpostFormpostFORM9postForm在IDE中，利用appcan.request.ajax()方法获取的数据，并显PPT】appcanlocStorage模块，这个模块是关于的封装。我们可以使用这个对象快速的和获取数据，也可以完成界面间参数的传在IDE中，利用appcan.request.ajax()方法获取数据，实现页面的动态加载。当点击执行时，加开商户详情页面，同时，利用appcan.locStorage.setVal(ID,存IDID,获取对应商户的其他信息。API简PPT】什么是API？讲师按照PPTPorigInr）目的是提供应用程序与开发人员基于某软件或硬件得以一组例程的能力，又无需源码或理解部工作制细节。据功能分为六个模块。网络通讯、系统功能、第API、界面布局、功能扩展、API对象。先来看一下网络通讯PPT】详细介绍常用的网络通信的API。讲师介绍一些API【切PPT】APIAPI的主要功能及应用PPT】利用uexCall.call()完成打 他几个方法【切到下一张PPT】在IDE中，利用uexWeixin完成商品详情页面的 下一张PPT】IDEPPT在IDE中，利用uexScanner插件完成 幻灯片后，从动态获取数据是须要做的事情之一。那么，要想从获取我们需要的数据，就必须要有对应的接口与前进行数据们去认识一个接口封装的工具，MASPPT】幻灯片MASMAS接口如何去封装？MAS移动业幻灯片MAS就是MEAP转接（整合）系统的缩写。在第一节课程上，大MEAPMASMEAP移动支撑MAS接明确的说明MASAPPPPT幻灯片用户内网的一套数据整合系统。第一，它可以统一对的接口进行管理，因为的用户业务系统比较多，用什么语言开发的都有，对于接口的管理都不太统一，对于不同的系统，还需要找到懂对应IDE开发环境中有一个MASAJAXODBCSOAPMAS系统不但可以封装和管理接口，还可以对数据进行整合，抽取我们关心的数据。第三，如果有多套MAS系统，可以起到负载均衡的作用。大家可以想一下，如果我在其中一套MAS系统上专门管理ODBCMASAJAX类型的接口，这样就起到一个分流的作用，从而对服务器起到减轻负荷的作用。MAS系统支持基于集群方案的部署，对于大数据的而言，其讲述的MAS系统、IDE、用户业务系统之间的业务逻辑关系是幻灯片MEAPMAS管理平台（即：移动业务整合系统）、SDKIDE、在IDE环境中进行APP移动应用开发的时候，如果用户的OA/ERP/DB系统可以直接向开发者提供接口的话，那么，我们可以以JSON的方式直接进行接口调用，从用户系统中获取我们在开发APP上显示；App上显示的数据信息。开发商如何解决这一难题？、要想解决上面的问题，这就需要我们自行创建接口来解决。anIE封装了日常开发p可以使用E开发环境中内嵌的MSanMS移动业务整合系统。通过MS移动业务整合系统将用户的业务系统数据，以企业总线的形式P开发（66PPT】幻灯片MAS服务。因为我们的接口是存在于项目