《微信小程序开发》教学大纲

01.

课程说明

课程名称	微信小程序开发
学时	45
适用对象	电子信息类、通信工程、计算机科学与技术、软件工程专业、物联网工程、数据科学与大数据技术、信息安全、网络工程和电子商务等专业
先修课程	C语言 ，计算机基础

02.

课程描述

“微信小程序开发”是工科类本科教学中的一门重要实践课，让想从事微信平台、微信小程序开发的同学能更快地掌握开发语言和开发项目的具体实施内容，让每个参与课程的学生都能开发自己想做的内容，以微信小程序的形式展现出来，课程通过丰富的案例教学，让学生轻松依托新浪云建立基于云服务的在线实践平台，培养同学独立开发微信小程序加云平台的在线信息处理能力。

03.

教学目标

通过本课程的理论教学和相关实验训练，使学生具备如下能力，并对应三个教学目标。

1. 认知能力：通过本课程的学习，使学生了解小程序的诞生的特点、应用方式和应用前景；了解微信生态的强大性；理解小程序项目结构，HTML、JavaScript、css与小程序的关系；理解小程序的框架结构；理解小程序组件的概念；理解小程序页面样式的概念；理解小程序布局方法；了解小程序常用的接口分类，掌握常见的接口；理解小程序前端、后端以及数据库之间的配合联动方式；理解云开发的意义。

2. 开发能力：通过本课程的学习，使学生掌握微信小程序开发工具的使用方式，将一个项目按模块从头开始完整复刻，最后进行自主修改并能把自己的成果发布到微信平台；熟练掌握小程序生命周期函数、数据绑定和渲染等基础技术；能灵活使用小程序组件；能在wxss中设计页面样式；能在页面布局中使用box模型、传统布局和flex布局；能使用JavaScript技术来实现事件操作和常见的交互；掌握使用wx.request网络接口调用第三方接口和自编接口的能力；掌握本地开发和云端开发能力；掌握基于云平台的网络应用搭建流程，使用微信小程序提供的编译开发环境开发整体项目的基础能力；掌握常见的交互和开放接口；掌握云开发中云存储、云函数和云数据库；能独立完成中小型小程序项目。

3. 综合能力：通过本课程的学习，使学生在掌握小程序项目开发基本流程和技术的同时，也能了解设计开发模式，项目分工、团队合作及创业竞赛等概念，为学生后期团队合作进行真实项目开发做出很好的铺垫。通过竞赛形式真正提高学生的综合素质。

04.

课程目标对毕业要求的支撑

毕业要求	微信小程序开发	课程目标
具备复杂项目开发的分析、设计、开发和维护能力	1.1 具有较强的分析问题能力	教学目标1
	1.2 能够综合运用所学知识，应用相关工具进行计算机软工程问题的系统设计、开发和维护	教学目标2、3

05.

教学内容

教学内容参考教材配套的教学视频展开，也可以在中国大学MOOC上观看本课程视频，并参与教学互动。

第1章  Hello微信小程序(教学目标1)

重点内容：搭建微信小程序开发环境，通过开发者工具快速创建一个Hello World程序项目。

难点内容：了解app.js、app.json、app.wxss等文件的作用，这些文件是怎么配合联动工作的？

教学内容：

1.1 小程序账号注册及开发工具安装

1.2 Hello World小程序

1.3 tabBar配置项

思考点：对app.json内容进行简单修改，看看会发生什么变化。试试Windows配置项，修改navigationBarBackgroundColor的值，会发生什么？怎么修改底部tab栏的内容和颜色？

第2章   习题练习案例开发(教学目标1)(教学目标2)

重点内容：通过对网上下载的简单案例进行修改来尝试掌握简单的小程序项目开发。下载一个心理测试程序的源代码，了解如何修改成C语言习题测试的案例。

难点内容：了解C语言习题测试的答对统计逻辑，修改对应的wxml文件和js文件

教学内容：

2.1 心理测试小程序安装

2.2 增加选项并修改题库

2.3 C语言测试逻辑修改

2.4 添加做题结果

思考点：如何解决心理测试题目与选项顺序每次都不一样的问题？

第3章   我的页面模块开发(教学目标1)(教学目标2)

重点内容：在app.js文件的wx.login()方法中进行微信授权登录的一些逻辑的实现，然后往数据库写入该用户的注册信息，完成注册的流程，添加“我的页面”，显示刚刚注册时填入的注册信息。

难点内容：理解bindchange与bindtap绑定函数的作用。

教学内容：

3.1 wx.login()方法实现小程序登录

3.2 授权登录页面开发

3.3 WeUI基础样式库

3.4 注册页面的页面布局

3.5 注册页面功能实现

3.6 我的页面基本实现

3.7 媒体组件image属性

思考点：为什么会出现点击提交弹出姓名不能为空？为什么会出现注册页面点击提交没反应？

第4章   信息修改模块开发(教学目标1)(教学目标2)

重点内容：在上一章“我的”页面基础上添加修改信息的功能，并创建相应的change页面，在change.js中对页面参数进行处理并反映在页面title和placeholder中。

难点内容：在配置文件中通过宏定义的方式实现相应数据的调用。

教学内容：

4.1 myInfo页面调整

4.2 change页面布局

4.3 change页面完善

4.4 添加事件处理函数submit

4.5 性别的修改

4.6 配置文件的使用

思考点：如何解决修改信息后“延迟”响应的问题？理解userInfo数组更新代码所在的位置。

第5章   课程页面模块开发(教学目标1)(教学目标2)

重点内容：在后台数据库注册课程后，通过app.js中向后台发送请求，执行加入课程逻辑，显示用户的注册信息，显示课程的相关信息。

难点内容：加入课程逻辑代码的编写。

教学内容：

5.1 申请课程号

5.2 课程信息模块页面布局

5.3 课程练习模块页面布局

5.4 请求加入课程

5.5 获取当前课程信息

思考点：申请课程号时选择错误题库的解决方法？

第6章   课程练习模块开发(教学目标1)(教学目标2)

重点内容：通过复用和修改驾校考试源码中文件中专题练习、章节练习与做题页面的程序代码，并在app.json文件中加上对应的所有页面路径，修改引入题库文件的API，修复跳转、顺序练习做题数等功能。

难点内容： 理解做题模块框架功能及题库文件API调用的方法。

教学内容：

6.1 引用驾校考题做题页面

6.2 完成练习模块

6.3 显示做题数

6.4 收藏模块

6.5 错题模块

思考点：如何理解answer文件夹目录下各个文件的含义及相互的逻辑关系。

第7章  签到测距模块开发(教学目标1)(教学目标2)

重点内容：获取课程相关信息，在调试器中console一栏，查看错题数与收藏题数，并在index.wxml中收藏后面的view中加入收藏数和错题数的变量，实现查看藏数和错题数；新增实现错题收藏结果的页面，完善index.wxml中的bindtap函数。

难点内容：理解bindUrlToStore收藏函数和bindUrlToWrong错题函数的功能实现。

教学内容：

7.1 新建签到页面tab

7.2 选择位置api

7.3 获取当前位置api

7.4 巧用button的disable属性

7.5 JS实现经纬度测距

思考点：current_course数组中的内容包括哪些？

第8章   初识后台与数据库(教学目标1)(教学目标2)

重点内容：完成选择位置、获取当前位置以及测出所选位置与自己当前所在位置之间的距离的页面布局，给测距按钮加一个bindtap为calculate的函数，并在index.js中完成测距的逻辑。

难点内容：如何实现当完成了位置选择与获取后，才能点击测距button进行测距？

教学内容：

8.1 Wampserver与Sublime的安装

8.2 搭建本地环境

8.3 api实现前后台交互

8.4 数据库记录的查询与增加

8.5 数据库记录的删除与修改

思考点：如何提高测距的精度？

第9章   接口开发与云平台(教学目标1)(教学目标2)

重点内容：在新浪云创建一个数据库，并进行数据库的管理。

难点内容：理解本地与云端数据库搭建的含义和作用。

教学内容：

9.1 查看做题情况前端页面开发

9.2 做题数据表添加与获取做题数据api开发

9.3 更新做题数据api开发

9.4 前端代码完善

9.5 新建云应用

9.6 svn实现代码管理

9.7 阿里云后台部署

思考点：注册api接口出现问题该如何解决？

第10章   初识云开发及实战(教学目标1)(教学目标2)

重点内容：基于成功发布的小程序进行手机端操作，豆豆云助教项目创建，对修改后的代码进行重新编译，上传豆豆云助教代码、提交审核、发布。

难点内容：理解小程序源码中的逻辑关系。

教学内容：

10.1 我的第一个云开发小程序

10.2 云开发数据库指引

10.3 快速新建云函数

10.4 待办事项案例讲解

10.5 听说读写案例讲解

思考点：如何解决新建立案例项目后安装失败等问题，如遇到域名配置错误提示该如何解决？

第11章   优秀案例深度实战(教学目标1)(教学目标2)

重点内容：基于前述所学的内容自主开发前端小程序并搭建后台，完成开发后提交审核、发布。

难点内容：综合运用能力。

教学内容：实战开发。

思考点：如何解决开发过程中遇见的各类问题？

06.

教学安排

该课程每周3学时，15周，根据观看教学视频完成实验内容，建议教学进度如下表。

章节	学时数
第1周  hello微信小程序	3
第2周  习题练习案例开发	3
第3周  我的页面模块开发	3
第4周  信息修改模块开发	3
第5周  课程页面模块开发	3
第6周  课程练习模块开发	3
第7周  签到测距模块开发	3
第8周  初识后台与数据库	3
第9周  接口开发与云平台	3
第10周  初识云开发及实战	3
第11周  优秀案例深度实战	3
第12周  小程序综合案例开发	3
第13周  小程序综合案例开发	3
第14周  小程序综合案例开发	3
第15周  PPT汇报验收递交小程序成果终版	3

07.

教学方法与手段

线上、线下相结合，视频教学翻转课堂的形式，在教学过程中注重能力的培养，以实际豆豆云小程序案例为例，提高学生分析和解决实际问题的能力。另外，本课程基于中国大学MOOC平台课程：https://www.icourse163.org/course/HZIC-1205901813，学生可以进行自主学习、提交作业、讨论问题。

08.

考核方式及成绩评定

考核方式：成绩评价体系为线上和线下融合、过程性评价与终结性评价相结合的多元化课程评价体系；成绩是以“完成作业、测试情况、论坛讨论和提交小程序项目申报书”为计算依据，各项目占比如下:

1.作业成绩占20%

作业批改标准：每次作业5分

(1)上传2个截图(PC端和手机端)2分，每个1分；

(2)对功能进行个性化修改1分；

(3)有心得1分，心得质量好1分。

2.测验成绩占50%

每次10道客观题，10分。

(1)课程讨论成绩占 10%;

(2)提交小程序项目申报书，占20%。

小程序项目申报书除了教师评价外，还可以通过第三方评价：

● 参加微信小程序大赛，获奖满分，报名参赛85分以上。

http://edu.weixin.qq.com/cgi-bin/newreadtemplate?t=edu_portal/zh-hans/intro/intro-match/index

● 其他基于微信小程序的各类学生科技竞赛，比如互联网+、挑战杯、新苗计划、国创项目等，成功立项或者获奖满分，参与85分以上。

● 提交小程序作品时候，在作品中说明参与和获奖情况。

成绩评定标准：平时成绩占50%，期末作品占50%。

09.

教材及主要参考书

微信小程序开发边做边学

ISBN：978-7-302-55513-1

诸葛斌 等 编著

定价：49.8元

扫码，京东优惠购书！

10.

配套视频样例

《微信小程序开发》课程教案