AppCan初级认证工程师之移动座位预定项目功能分析（9课时）讲义

产品介绍讲义幻灯片1话述：首先自我介绍，以自己最擅长的方式介绍自己经过前面几部分内容的学习，我们已经对appcan的各个知识点有了一定程度的认识，那么，到底这些知识点在项目开发中怎么样应用呢？为了让大家更好更系统的掌握appcan技术,接下来我们一起做一个完整的案例“我要抢座”，把以前各部分内容连接起来，进一步加深对各部分内容的理解，好，先来分析下案例，切到第二张PPT幻灯片2话述：(首先参考ppt流程图讲解案例流程)首先来看一下这个案例的功能，此案例将我公司PC端网站上的抢座栏目移动化，在手机端实现了抢座功能。首页上有三个入口，分别是“首页”，“会员中心”以及“更多”，“首页”上首先显示各大培训城市列表信息，点击各城市列表可进入“抢座”页;进入“会员中心”页面之后首先要登陆，登陆之前先注册，注册成功返回登陆页面登陆，登陆成功跳转到“抢座”页面，并且登陆成功后可以分别进入“预约”页面和“修改密码”进行操作，进入“抢座”页后，可单击“抢座”图标进行抢座。下面我们来演示一下这个案例的功能切到第三张PPT幻灯片3演示项目，演示过程中说明哪部分用了动态获取，动态获取需要后台提供的接口，对照下面三张幻灯片接口进行说明，大家用的时候直接在以下这几张幻灯片上复制需要的接口。切到第4张PPT幻灯片4讲完此页接口在项目中应用后切到第5张PPT幻灯片5讲完此页接口在项目中应用后切到第6张PPT幻灯片6讲完此页接口在项目中应用后话述：好，以上我们对这个案例的功能，流程以及要用的接口有了一个大致的了解，现在我们一起来完成这个项目，首先在官网上同步一个项目。切到第6张PPT幻灯片7话述：当然啦，没有登陆的需要先登陆了，然后我们一起在官网上创建项目，并同步到本地。首先来看下此案例的几个重要页面的UI布局。切换到PPT8幻灯片8话述：首先我们来看界面布局，首页部分上面是控件中的滑块，然后是控件中的选项卡，下面用控件中的列表显示城市信息，这块主要采用控件中的内容;底部栏“footer”部分用DIV+CSS进行页面布局;“抢座”页面可以用模板，也可以全部自己定义，用模板也需自己重新布局，DIV+CSS仍然很需要，因此，在UI部分我们需要掌握的知识点是：切换到PPT9幻灯片9话述：这部分内容的完成会让我们系统的掌握模板，样式，响应式布局以及控件的使用，然后看下功能部分需要掌握的内容：切换到PPT10幻灯片10看下主要页面功能：单击首页各列表可跳转到抢座页面，抢座页面要显示当前是哪个城市的相关信息，如：地点，培训时间，以及具体内容等等。因此，在功能部分需要掌握的内容为：切换到PPT11幻灯片11话述：首先页面跳转要用到appcan.window.open,然后多浮动窗口部分要用到appcan.frame.open,动态获取用appcan.ajax，数据传值用locStorage和publish等，这是这个项目非常重要也是最难的一部分内容。然后，案例还用了几个常用插件。切换到PPT12幻灯片12话述：本案例用到了微信的分享功能，以及百度地图功能。【讲的时候切到PPT13】幻灯片13话述：常用插件的基本功能咱们appcan文档里都有详细介绍，有些插件难度比较大，方法比较多，需要用到哪个方法的时候还需要在文档中详细学习。各部分UI及更能完成之后，并且本地测试成功之后上传提交到官网，然后官网打包，打包流程我们也在第二章详细介绍过。【切到PPT14】幻灯片14话述：好，现在我们对“抢座”项目大概有些了解，接下来就进入最重