微信小程序开发边做边学 教案全套 吴晓春 第1--10次课 1.1小程序账号注册及开发工具安装 ---10.4 云开发案例讲解.docx

微信小程序开发边做边学课程教案授课内容1.1 小程序账号注册及开发J1.具安装1.2 He1.1.oWor1.d小程序1.3 tabBar配置项教学目的与要求了解做信小程序产生的省景、应用前景，了解小程序开发工具的安装与使用，掌握他信开发环境的安装与he1.1.oworid项目发布.改戊难点正点：小程序的定义、特征.搭建微信小程序开发环境,通过开发者工具快速创建一个HeIIoWorId程序项目”,碓点：了解a.js.3pp.soapp.w×ss等文件的作用,这些文件是怎么配合联动工作的？教学进程安排1.1.1 微信小程序的产生背景，什么是微佶小程序（10分钟）1.1.2 小程序特征、应用前景（10分钟）1.1.3 微信公众平台的账号注册与使用（10分钟1.1.4 微信小程序开发者工具的下载及项目创建过程（15分忡）1.2通过he1.1.owor1.d例子了解小程序开发原理（20分钟1.3.1 添加、刷除,修改tabBar配置项看看会发生什么变化（25分钟）1.3.2 试试windows配置项.修改RavigationBarBackgroundCoIor的值会发生什么25分钟1.3.3 归纳、总结内容，引导学生思考还能怎么修改以及更多功能如何实现20分钟）课后学习任务布IS总结本次课内容,完成课后练习,思考其他修改方式和效果,提交实验心得.主要参考资料1.中国大学MOOC课程：httpswvw.icourse1.63.orgcourseHZIC-12059018132.微（S1.方课后总结分析总结并逐步深入体会澈信小程序的概念；初步了解做信小程序开发的流程：初步了解做信小程序开发的技术细节.授课内容2.1 心理测试小程序安装2.2 增加选项并修改遨库2.3 C语言测试逻辑修改2.4 添加做题结果2.5 小程序发布发程教学目的与要求掌握微信开发环境卜案例入门，指岸学生代码开发能力，如何在现有的代码基础E.进行简单修改实现自身的功能需求.作为简单案例开发.让学生迅速r解微信小程序开发基本方法.曲点潍点明点：通过对网上下靓的简项案例进行修改来去试掌握简单的小程序项目开发.下我一个心理测试程序的源代码，了解如何蟋改成C语言习题测试的案例，碓点：了解C语言习题测试的答对统计逻轼，修改对应的WXmI文件和js文件，教学进程安排2.1.1 心理测试小程序安装调试（10分钟）2.1.2 心理测试小程序知识点理解（IS分钟）2.2.1 增加D选项（15分仲）2.2.2 修改题摩（IS分钟）2.3诉决出现的bug（20分钟2.4.1 test页面修改（20分髀）2.4.2 resu1.t页面修改20分神）2S1发布前准备（10分钟）2.4.3 小程序上戏（10分钟）课后学习任务布置总结本次课内容，完成课后练习,思考其他修改方式和效果，提交实脸心得“主要参考资料1.中国大学MOOC课程：httpswvw.icourse1.63.orgcourseHZiC-12059018132.微（S1.方课后总结分析以一个完整的案例开发，中联多个案例中涉及到的知识点,提升学生对修侑小程序框架的理解，并提高学生的小程序开发能力，并鼓励学生根据自身衢求修改代码,实现对应的功能需求.授课内容3.1 授权登录页面开发3.2 注册页面的页面布局3.3 我的页面基本实现教学目的与要求完成“我的”页面开发,首次接触前端与数据库的联动方式，初步了解代码逻辑上的实现与修改;东握小程序逻辑层数据的定义和修改、页面处理函数、自定义少件函数、页面的跳转、页面的参数传递和模板的概念和应用：掌握小程序视图层中数据绑定、条件演染、列表渲染、模板的概念和应用。电点中点巾点：在app.js文件的wxhgin（）方法中进行微信授权登陆的一些逻辑的实现.然后往数据库写入该用户的注册信息1.完成注册的流程.漆加我的页面,显示刚刚注册时填入的注册信息.碓点：理解bindchange与b1.ndta绑定函数的作用：教学进程安排3.1.1 授权页面知识点的讲解（20分神）3.1.2 授权登录页面实现（25分仲）3.2.1 注册页面知识点讲解（20分钟）3.2.2 注册页面实现（25分钟）3.3.1 "我的”页面知识点讲解（20分钟）3.3.2 “我的”页面实现（25分仲）读后学习任务布置总结本次课内容,完成课后练习.思考其他修改方式和效果,提交实验心得.主要参考.资料1.中国大学MOOC课程：httpswvw.icourse1.63.orgcourseHZIC-120S9018132.徵信1方课后总结分析本章主要任务是完成我的页面模块开发，其中信息的添加和修改茂辑都涉及到了数据库.是较为综合的一次深,能加深学生对于一个完整页面开发的理解.授课内容4.1 myinfo页面调整4.2 change页面实现4.3 配置文件的使用教学目的与要求在上一章的基础上实现我的页面信恩修改功能的完善，并创建相应的change页面，在ChangeJs中对页面卷数进行处理并反映在页面Ht1.e和p1.aceho1.der中。三.难点理点：逻辑层数据的定义和修改、页面处理函数、自定义事件函数班点：页面的跳转、页面的多数传递和模板、数据绑定、条件洽染、列表渲染、模板的概念和应用，在配置文件中通过宏定义的方式实现相应数据的调用。教学进程安排4.1.1 性别信息显示调整（20分钟4.1.2 增加页面跳犯25分钟421Change页面布局（20分钟）4.1.3 Change页面逻辑（2S分伸）4.1.4 添加任件处理函数（20分钟）4.3配置文件的使用（25分钟）课后学习任务布置总结本次课内容，完成课后练习,思考其他修改方式和效果，提交实脸心得.主要参考资料1.中国大学MOOCiSf:httpswww.icourse1.63.orgcourseHZIC12059018132.微信官方课后总结分析本节主要内杵为实现“我的”页面信息的动态修改，学生书要掌握更多组件和函效的调用，对于页面带卷快转等送辑上的理解更为充分。授课内容5.1 申请课程号5.2 课程模块页面布局5.3 课程模块页面逻辑实现教学目的与要求实现课程页面开发，初步了解曲、后台与数据底之间的无合过程.三.难点理点：在后台数据派注册课程后，通过app.js中向后台发送请求,执行加入课程逻辑，显示用户的注册信息，显示课程的相关信息。难点：加入课程设辑代码的编写。教学进程安排5.1申请课程号（20分钟）5.2.1 课程信息模块页面布局（30分钟5.2.2 课程练习模块页面布局30分仲）5.3.1 谢求加入课程逻辑30分钟）532获取当前课程送辑（25分钟）课后学习任务布置总结本次课内容，完成课后练习,思考其他修改方式和效果，提交实脸心得.主要参考资料1.中国大学MOOCiSf:httpswww.icourse1.63.orgcourseHZIC12059018132.微信官方课后总结分析本章内容较难，首次涉及小程序的全校开发，对于初学者来说有些难度.I可样的学完后收获也会很大。本章班点在于加入课程和获取课程的逻辑，衙要用到接口的概念向后台发送请求，获取信息后再显示在前瑞。授课内容6.1 姐引用驾校考题做题页面6.2 完成练习功能模块6.3 实现答错与收藏功能教学目的与要求参考驾校考避小程序中模拟考试、专项练习、章节练习等模块的页面布局完成深程练习模块页面开发。实现小程序主体功能的开发，还有收藏和错题功能，让学生熟练掌握常见的容器现件，里点难点虫点；通过复用和修改驾校考试海码中文件中专题练习、章节练习与做题页面的程序代码,并在appjson文件中加上对应的所有页面路径,修改引入题库文件的API.修复跳转、股序练习做跑数等功能.:碓点：理解做时模块框架功能及超阵文件API调用的方法.教学进程安排6.1.1 驾校考题各类练习页面（10分钟）6.1.2 WXm1.文件引用（15分钟）6.1.3 各类练习页面逻辑修改（10分钟）6.2.1 小程序的data-*破性（10分仲）6.2.2 实现页面跳转20分钟）6.2.3 添加页面样式（20分钟）6.2.4 显示做起数量（20分钟）6.3.1 显示答错数与收藏数（15分神6.3.2 答错与收藏页面跳转（15分钟读后学习任务布置总结本次课内容,完成课后练习.思考其他修改方式和效果,提交实验心得.主要参考.资料1.中国大学MOOC课程：httpswvw.icourse1.63.orgcourseHZIC-120S9018132.徵信1方课后总结分析本次课程完成小程序主要功能也就是做啊练习功能,需要理解帙块框架功能的实现以及一些AP1.的调用。授课内容7.1 签到测距页面布局7.2 位置信息相关ApI调用7.3 实现测距功能教学目的与要求理解与掌握位附信息相关AP1.的调用；实现实时答到功能,里点难点西点：完成选择位置、获取当前位置以及测出所选位过与自己当前所在位置之间的距离的页面布局,给测地按钮加个bindtap为Ca1.CUIate的函数.并在index*中完成测距的逻辑.碓点：如何实现当完成了位置选择与获取后，才能点击测距button进行测距.教学进程安排7.1.1 添加签到tabBar（20分钟）7.1.2 签到测距页面基本布局（25分钟7.2.1 选择位跟AP1.（20分钟）7.2.2 获取当前位置Ap1.（25分钟）7.3.1 巧用button的disab1.ed同性（20分钟）7.3.2 js实现羟纬度测距（25分伸）读后学习任务布置总结本次课内容,完成课后练习.思考其他修改方式和效果,提交实验心得.主要参考.资料1.中国大学MOOC课程：httpswvw.icourse1.63.orgcourseHZIC-120S9018132.徵信1方课后总结分析本章内容主要分为两个部分完成签到测距页面布局，首先是在app.json文件的tab8ar同性中添加一个1.ist,使得签到测距页面也作为tab8ar中的一栏，然后根据签到测距模块的需求，从WeUI样式库中找到所需样式完成整到测距页面基本布局.授课内容8.1本地环境安装与测试8.2后台API开发教学目的与要求本章需要完成本地小程序运行环境的搭建.本地环境无法实现小程序的发布：初步了解后台AP1.开发.改戊难点直点：软件的安装、后台代码在本地运行，数据阵增删收杳功能雄点：理解后台接口与前蛤请求之间的呼应教学进程安排8.1.1 安装WaEPSeVer与SUb1.ime（30分钟）8.1.2 搭建本地环境（35分抻）8.2.1 AP1.实现前台与后台交互（30分钟）8.2.2 数据库的增加、删除、修改和杳询40分钟）课后学习任务布置总结本次课内容，完成课后练习，思考其他修改方式和效果，提交实脸心得。主要参考资料1.中国大学MOOC课程：httpswww.icourse1.63.orgcourseHZIC12059018132.徵信官方课后总结分析本次课需要搭建本地运行环境,首次对后价代码和数据库文件进行配力对一个完整的小程序由哪些部分组成有了更为深刻的认识.同时会试写一个后台接门并在前台进行相应的清求，对数据库的增删改查功能也有了一定了解，是非常笈合性的一次课程，对学生的能力提高有很大的帮助。授课内容9.1 查石做鹿情况API开发9.2 阿里云环境配比教学目的与要求在:了解前台与后台荷华交互以及数据库增删改查的基础匕开发一个完整、有逝义的API,用于查看做题情况.包括总做腮数、正确时数、单选遨数、多选Sfi数以及判断鹿数。上点难点虫点；做趣情况API的获取己经更新做题数据。难点：在理解的基础上如何改写这些代码实现|'|已想要的功能.教学进程安排9.1.1 做题情况页面布局（15分钟9.1.2 新建数据表（15分钟）9.1.3 获取做题情况API开发（30分钟）9.1.4 更新做JS数据AP1.开发30分神）9.2.1 创建阿里云应用（15分钟）9.2.2 代码版本管理20分钟9.2.3 开启共享型MySQ1.服务（10分钟课后学习任务布置总结本次课内容，完成课后练习,思考其他修改方式和效果，提交实脸心得。主要参考资料1.中国大学MOOC课程：httpswww.icourse1.63.orgcourseHZIC12059018132.微信官方课后总结分析本章主要有两块内容，第一个是在后台1.；一个更新做题情况的AP1：第二个是在阿里云创建一个云应用，并进行云湘数据标和云应用的管理，理解云端应用搭建的含义、方法和作用。授课内容10.1 我的第一个云开发小程序10.2 云开发数据库指引10.3 快速新建云函数10.4 片开发案例讲解教学目的与要求介绍小程序开发工具自带的A开发功能，新建一个公开发项目，同时通过蟆仿一个云开发项目案例进行学习相关的开发流程和技巧。重点用点网点：云开发至本概念与使用方式.碓点：云函数、云开发数据库.教学进程安排101.1.新建云开发项目（10分钟10.1.2开通云开发（10分钟）1.1.1 1新建集合15分神）1.1.2 2新增记录（10分钟）1.1.3 3杳询记录（10分钟）1.1.4 4更新记录10分钟1.1.5 5删除记录（15分神）10.3 快速新建公函数（15分钟1041待办事项案例讲解（20分钟）10.4 .2所写好助手案例讲解（20分钟）课后学习任务布置总结本次课内容，完成课后练习,思考其他他改方式和效果,提交实验心得，1.¾参考资料1.中国大学MOOC课程：https:/WwW.i8urse1.63.org/course/HZ1.C-12059018132.咸信官方课后总结分析本章主要讲解如何使用开发者工具自带的云开发功能进行小程序的开发,同时讲解两个云开发案例.最后体会云升发的使捷拓效的开发特点,同时对比自建后台开发的优势.