AppCan初级工程师教师版-V7.15（含讲师讲课思路）

附录二：讲师手册标准幻灯片1:根据自己的讲课特色，做一个简单的开场白。幻灯版2：介绍一下官方微信，AppCan官方微信平台，有及时推出最新的移动互联网的技术发展趋势，移动开发平台的技术分享，鼓励学员关注转发官方微信。幻灯片3：讲师自己补充各地区的AppCan学习的QQ群，微信群，建立一个学习交流，讨论AppCan技术的平台，鼓励学员积极参与技术讨论，参与答疑环节，在交流讨论的过程中相互学习，不断进步。幻灯片4：进入到讲师，学员的自我介绍环节，在市场化经济迅猛发展的今天，人们已是越来越重视所谓的“人脉”对自身发展的重要性，甚至有些人叫嚷”人脉比技能更重要”，“人脉就是钱脉”。人脉就好比是一座金矿，拥有了人脉，就等于拥有了取之不尽的财富。你的人脉资源越丰富，赚钱的门路也就越多。经营人脉的关键，就是让别人认识你，向别人传递你的价值。鼓励学员大胆的自我介绍，自我推销，经营人脉，扩展人脉。幻灯片5：介绍一下今天培训的主线。幻灯片6：随着智能手机的普及，手机app也成忽如一夜春风来，千树万树梨花开之象，深入到人们的生活之中。手机app已经成为我们生活、工作、学习当中必不可少的工具，“像来自星星的你一样”，深刻的改变地球人的生活。举例说明如微信、掌上淘宝、美妆相机等。借助互联网+的概念，各类行业、企业、个人开发app的需求呈爆炸式的增长，。幻灯片7：介绍传统的APP开发技术，原生APP,与WEBAPP,最后突出前二种APP开发技术的缺点，开发门槛高，开发难。引出下一张幻灯片。幻灯片8：一方面是企业在移动化道路上最头疼的问题，开发难，成本高的问题，另一方面是：引出下一张幻灯片。幻灯片9：市场上WEB开发人员随着互联网的发展已经慢慢成为廉价劳动力，出现劳动力剩余的现象。一方面是企业的APP原生开发成本高的问题，一方面是WEB开发人员廉价劳动力的问题，如何协调市场的矛盾，引出下一张幻灯片。幻灯片10：AppCan平台的出现，WEB前端开发人员的春天来了，介绍AppCan平台开发的优势。幻灯片11：介绍AppCan的成功案例，如威海八爪团，是威海本地生活服务类团购APP，为用户提供各城市美食、酒店、娱乐、电影等各类优惠及电子兑换券信息。，是爱威海网精心打造的手机客户端，简单顺畅的操作体验让手机用户随时随地享受便捷的团购服务。引出下一张幻灯片。幻灯片12：用AppCan平台开发的APP,在用户体验和界面效果上和原生开发的APP没有区别，因为我们用的是混合开发技术，也就是HTML+原生的开发方式，为各位提供大量的原生模块，演示HIAppCan。引导学员扫描HIAppcan的二维码，体验AppCan的高大尚。幻灯片13：介绍一下今天培训的主要案例，用到是页面效果超炫的六棱柱插件，从六棱柱的六个页面可以分别打开其他六个页面，有公司简介，成功案例等。幻灯片14：介绍项目开发工具--企业版开发工具SDK：AppCanSDK移动应用开发系统，是专为AppCanHybrid开发团队设计的移动应用开发环境。它帮助企业紧密地把HTML开发人员、Native开发人员、测试人员、代码配置管理员、项目管理人员联系起来，组成有序高效的开发团队。AppCanDSS开发支撑系统以AppleMacmini硬件和MacOSX系统环境为依托，为降低企业移动开发投入设计的企业移动应用编译和管理服务器。无缝地融合HTML开发人员和Native开发人员，通过集成化的Web管理界面灵活地配置管理服务，实现移动应用的测试、发布、配置的一体化管理。幻灯片15-21：AppCanIDE移动集成开发环境，为HTML开发人员提供功能全面的跨平台、高体验的移动应用开发调试环境。介绍IDE的新特性。幻灯片22：介绍SDK移动应用开发系统三种管理员角色。系统提供独立的系统管理员，负责管理系统中的所有用户。管理员可以指定用户为应用管理员，负责应用项目的维护。每个应用可以有多个管理员，应用管理员可以为应用设定应用开发人员，测试人员。讲师再介绍清楚应用管理员和普通用户的角色区别。幻灯片23：以应用管理员的角色进入系统，有首页，应用管理，操作日志，帐号设置四个模块。首页模块将显示该管理员的登录信息、项目信息统计等与该管理员所管理的项目相关的信息，应用管理模块，将显示该管理员管理的所有应用，同时还可以添加应用，或者导入已有的应用。着重讲一个如何添加一个应用，及应用唯一的标识，ID和KEY。幻灯片24：在SDK上创建的应用如何开发，需要在前端IDE中完成，启动IDE。介绍客户端如何登录。幻灯片25：介绍如何在IDE中进行本地模拟调试。幻灯片26-28：在AppCan有一个最新功能-真机调试，那如何使用真机调试，首先需要介绍如何生成AppCan调试中心，如何使用AppCan调试中心。在使用真机调试的时候需要注意事项，即PC端和移动端需要在同一WIFI环境下。幻灯片29：在程序的开发过程中，离不开断点调试，AppCan平台也支持断点调试，讲师在IDE中模拟一个简单错误，介绍如何进行断点调试。幻灯片30：简介一下什么是UI,UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。界面布局是AppCanHybrid移动应用开发直观展现的基础，深入了解AppCanHybrid移动应用界面布局方式，让我们的开发变得更好、更快、更强。简单介绍一下本次培训项目的UI。幻灯片31-32：AppCanUI设计来源——弹性盒子模型，解释弹性盒子模型。弹性盒子模型是CSS推出的一种布局机制。这种机制与常见的流式布局有很大区别。简单的理解为，流式布局是通过内容决定父容器大小，弹性盒子模型是在指定大小的父容器里来为子元素分配空间幻灯片33-35：介绍三种利用弹性盒子UI布局。幻灯片36：介绍AppCan封装的三种UI样式。幻灯片37-38：介绍一下AppCan平台的CSS样式的封装规律，AppCan平台支持二次开发，开发者可以在此基础上做二次开发，但是需要遵循AppCan的命名规则。幻灯片39：AppCan平台上封装了包括按钮，文本框，列表等多种控件，利用这些控件，可以提高开发效率，结合实例案例，利用选项卡控件完成企业招聘的页面布局。幻灯片40：结合图片滑块控件完成产品介绍页面。幻灯片41：讲师自己发挥，列举一个列表控件的案例，讲解列表控件的使用。幻灯片42：在实际开发中，如果已经存在的控件不能满足开发需要，开发者可以自己完成页面拼装，利用幻灯片中的案例讲解一下，如何利用盒子模型拼装页面。幻灯片43：总结前面的几种控件，引入到下一张幻灯片。介绍一下AppCanjavascriptsdk是appcan根据自己的需求封装的一个开发库，对底层的接口进行更高层的封装，该库依赖backbonejs、zeptojs、underscorejs，默认打包在基础库中，开发者不需要进行额外的引用，另外在该库的基础上提供了丰富的插件，能让开发者更高效的开发app。AppCan页面的窗口模块是如何来定义的？切换到下一张幻灯片。幻灯片：44-45介绍AppCan的窗口的命名，以及config.xml文件中配置的应用自动加载的第一个窗口。了解的窗口的命名规则，那么窗口的生命是如何建立的？切换到下一张幻灯片。幻灯片：46介绍窗口建立的方法appcan.window.open()，及参数说明。幻灯片47：以实际项目为案例，讲解一下如何从六棱柱页面打开经典案例页面。详细说明open方法的使用。幻灯片48:窗口是AppCanHybrid移动应用界面的最基本单位。窗口是所有原生控件、Frame等的容器，是每个界面布局的基础。而Frame是覆盖在主窗口之上的独立页面，window用来处理整体的布局框架。因此可以看出window窗口中的page与屏幕大小相同。并且内容不超出屏幕，不能够滚动。其中content只是起到定位作用。而frame中可以显示超过屏幕高度的内容。由于是一个独立的原生view，他的滚动等都是原生实现的，因此会比使用iScroll等JS框架进行界面内容滚动的效果会更加流畅。下面着重介绍一下打开frame窗口的方法。切换到下一张幻灯片。幻灯片49：详细介绍appcan.frame.open()打开一个浮动窗口的方法，及方法的参数说明。在实际应用中，会用到一个window,加载多个frame,这种情况如何完成？切换到下一张幻灯片。幻灯片50：根据实际案例企业招聘页面，着重讲解打开多浮动窗口。幻灯片51：在应用开发过程中我们会经常需要给用户一些直观的提醒，引导用户执行进一步的操作。AppCan封装了多个标准的对话框来帮助开发者处理类似场景。AppCan封装了三种对话框。消息提示框：appcan.window.openToast警告对话框：appcan.window.alert提示对话框：mpt介绍三种对话框的使用场景。幻灯片52：结合实际案例，着重讲一下，消息提示框。总结前面所讲的JSSDK中常用的方法，在app中，页面与页面之间离不开数据传输，AppCan平台如何实现数据的传输？切换到下一张幻灯片。幻灯片53：AppCan平台提供了appcan.locStorage.setVal()、appcan.locStorage.getVal()等方法支持数据存储。介绍这二种方法的使用方法，及参数说明。幻灯片54：讲师自己设计一个案例，讲解一下数据存储。全局参数更多应用于具有确定先后顺序的场景，源窗口写然后启动目标窗口，目标窗口启动时获取参数。但很多场景并没有固定的先后顺序，更多的是相互间的状态变化。对于此种场景，我们可以采用窗口事件机制来提供支撑。切换到下一张幻灯片。幻灯片55-56：结合实际案例，详细介绍以下这二种方法的使用，appcan.window.subscribe接口来监听订阅一个自定义的频道appcan.window.publish向订阅的频道，发送消息。目前绝大部分移动应用都需要服务端的数据支撑来支持其具体业务实现。而在移动通讯开发中最常用的即为基于HTTP/HTTPS协议的数据交互。AppCan对于我们的通讯提供了appcan.request对象来支撑。引入到下一张幻灯片。幻灯片57：appcan.request对象包含多个通讯方法ajax、get、getJSON、post和postForm，其中最核心的是ajax接口，其他接口是根据具体场景对ajax接口进行的简化封装。详细介绍appcan.request.ajax()方法及参数说明。幻灯片58：讲师提供了一个获取公司简介信息的接口，首先可以直接在浏览器的地址栏中输入一下地址，学员对接口返回的数据有一个直观的了接。结合实际案例，获取接口的公司简介数据，在页面中显示出来。幻灯片59-60：拖拽刷新是移动应用开发中一种非常常见的场景，通过拖拽屏幕完成数据的更新，相比于使用按钮来更新数据，体验更加的协调。与PhoneGap等纯JS框架完成拖拽刷新不同，AppCan采用了原生技术来支持此效果，体验更加流畅。讲师自己设计一个案例，讲解appcan.window.setBounce()方法的使用。幻灯片61：授人以鱼，不如授之以渔，给学员介绍在线文档，及如何使用在线文档，学员通过在线文档获取其他JSSDK的相关知识。幻灯片62：API（ApplicationProgrammingInterface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。AppCan平台提供了50多种插件来扩充AppCan的开发能力。介绍一下API的分类。幻灯片63-64：着重介绍一下打电话的API的几种方