(4)《微信小程序开发》教学设计模板 v3.0

《微信小程序云开发》教学大纲+教学进度表+教案《微信小程序云开发》课程教学大纲一、课程的性质和教学目的课程性质：小程序开发已经成为一类具有独特特点的应用开发，云开发也具有自己的特点。

微信小程序的发展很快，应用领域很多。

但是，在云开发出现之前，开发时面临着在数据库、存储实现方面的挑战。

微信小程序通过云开发自身就可以完成了前端、后端、数据库全技术栈的一揽子方案。

这对开发者来说，意味着开发工具能力更强，而学习成本更低。

于是，开设微信小程序（含组件、API和云开发）相关课程的可行性和必要性就进一步增加了。

《微信小程序云开发》是软件工程专业、计算机科学与技术等相关专业的一门选修课程。

教学目的：通过本课程的学习，要求学生达到下列目标。

1. 理解小程序开发的特点。

2. 理解云开发的特点。

3. 掌握微信小程序云开发。

4. 培养学生应用微信小程序解决和处理实际问题的思维方法与基本能力。

二、课程教学内容第1章微信小程序开发入门1.1微信小程序简介1.2微信开发者工具的使用1.3不使用云服务的小程序项目构成1.4 WXML、WXSS、JavaScript和WXS1.5 微信小程序的开发步骤和设计指南1.6 微信小程序的基本原理第2章微信小程序云开发简介2.1 微信小程序云开发的发展2.2 微信小程序云开发的特点与优势2.3 云开发解决方案提供的主要服务2.4 微信小程序云开发的一般步骤第3章云开发控制台的应用3.1通过云开发控制台进行运营分析3.2 通过云开发控制台管理数据库3.3 通过云开发控制台进行存储管理3.4 通过云开发控制台进行云函数管理3.5 云开发控制台的设置第4章不使用云服务的小程序开发示例4.1基于微信小程序组件的开发示例4.2基于微信小程序API的开发示例4.3 基于自定义组件的微信小程序开发示例第5章云开发中小程序端数据库开发5.1基础概念5.2 在小程序端向集合中插入数据5.3 在小程序端查询数据5.4 在小程序端使用查询指令5.5 在小程序端更新数据和使用更新指令5.6 在小程序端删除数据5.7 在小程序端对集合的其他操作方法5.8 在小程序端正则表达式的用法5.9 在小程序端处理地理信息db.Geo5.10 在小程序端聚合的用法第6章云开发中小程序端存储开发6.1 基础知识6.2 在小程序端上传文件6.3 在小程序端下载文件6.4 在小程序端删除文件6.5 在小程序端换取临时链接6.6 在小程序端使用组件和API来访问云端文件第7章云开发中云函数开发7.1 相关说明7.2 Node.js相关知识7.3 云函数myfirstfun的实现与本地调试7.4 云函数myfirstfun上传部署到云端和小程序端调用7.5 同步、下载云函数subMath并在小程序端调用7.6 云函数中异步操作7.7 云函数调用其他云函数7.8 云函数高级日志的使用第8章云开发中服务端存储开发8.1 在服务端上传文件8.2 在服务端下载文件8.3 在服务端删除文件8.4 在服务端换取临时链接8.5 服务端函数调用云函数第9章云开发中服务端数据库开发9.1相关说明9.2 针对collection的服务端API说明和应用开发9.3 针对doc的服务端API说明和应用开发9.4 服务端正则表达式的应用开发9.5 服务端API中serverDate的说明和应用开发9.6 服务端Geo对象的应用开发9.7 针对command的服务端API说明和应用开发9.8 服务端createCollection方法的应用开发9.9 针对集合的服务端API的应用开发第10章 Spring Boot访问云开发API10.1 调用云函数的API10.2 调用对数据库进行增、删、改、查操作的API 10.3 调用对数据库进行迁移相关操作的API10.4 调用对存储进行相关操作的API10.5 调用获取Token的API第11章 Node.js访问云开发API11.1 调用云函数的API11.2 调用对数据库进行增、删、改、查操作的API 11.3 调用对数据库进行迁移相关操作的API11.4 调用对存储进行相关操作的API11.5 调用获取Token的API第12章小程序与Spring Boot整合开发及云开发对比12.1 Spring Boot作为后端开发工具12.2 微信小程序前端开发12.3 实现同样效果的云开发实现第13章案例三、课程教学的基本要求1．基本知识了解微信小程序云开发管理、开发基础知识。

微信小程序开发课程内容体系课程代码：A13C11143 课程名称：微信小程序开发所属教学团队：信息通信技术团队一、设计思路遵循“学历证书与职业资格证书嵌入式教学”的设计要求，采用“学生主体，教师主导”双主教学模式，强调学生是学习的主人，教师是指导者，引领者。

在教学过程中，巧妙设计，让学生面对一个个的任务，通过课堂讨论、相互合作、实际操作、竞赛激励等方式，自我探索，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合，发展能力，训练思维。

选取项目的基本依据是该门课程涉及的工作领域和工作任务范围，但在具体设计过程中还以独立小程序web开发项目为载体，使工作任务具体化，并依据完成工作任务的需要、职业院校学习特点和职业能力形成的规律，遵循“学历证书与职业资格证书嵌入式教学”的设计要求确定课程的知识、技能等内容，产生了具体的项目模块。

在设计课程的时候，注重体现以下几个思想：1、改变学生的学习方式。

学生变被动学习为主动愉快的学习，并且通过多种学习方式（如自主学习、协作学习、探索学习、利用网络学习等），获取信息，掌握操作。

2、情景与任务驱动的融合。

在每一个任务抛出的时候，都创设了适当的情景，以此让学生在不知不觉在情景中积极主动地接受任务。

3、在体验感受中学习。

在课堂教学中很“放”地让学生探究学习，在探究中，学生肯定会有许多失败。

正是在失败中，找到成功，让学生体验成功的喜悦。

二、体系结构（一）本课程的培养目标1）知识目标1、理解小程序开发工具的操作流程、特性及使用场景；2、掌握json的基本配置方法；3、掌握wxml文本结构和基础语法；4、掌握wxss页面的文字样式、视图容器、各类组件的属性编辑；5、了解开发工具各文件数据绑定方法；6、了解微信小程序API数据接口操作；7、掌握微信小程序基础功能实现；8、具备小程序开发程序员能编写基础小程序、各功能代码的植入与纠错的基本业务素质2）能力目标1、培养学生“爱岗、敬业、细致、求精”的职业道德与情感；2、培养学生良好的动手实践习惯，尤其注重挖掘学生的潜质；3、注重培养学生与社会接轨；4、培养学生严谨的行事风格；5、培养学生具有踏实工作作风，良好的观察和思考能力，探究精神和实际问题解决能力。

第3章莫凡商城小程序的项目结构示例代码如下。

<!--index.wxml--><view> {{ message }} </view>//index.jsPage({data: {message: '你好, 微信小程序'}})3.3.3 组件属性动态绑定数据组件属性动态绑定数据，是将*.js文件data对象里的数据绑定到小程序的组件上，示例代码如下。

<!--index.wxml--><view id="{{id}}"> </view>//index.jsPage({data: {id: 0}})3.3.4 控制属性动态绑定数据控制属性动态绑定数据是通过条件判断if语句来控制的，如果满足条件判断，则执行该语句，否则不执行，示例代码如下。

<!--index.wxml--><view wx:if="{{flag}}"> </view>//index.jsPage({data: {flag: true}})3.3.5 关键字动态绑定数据关键字动态绑定数据用于将组件的一些关键字绑定数据，如复选框组件，checked关键字如果等于true，则代表选中复选框，等于false则代表不选中复选框，示例代码如下。

<checkbox checked="{{false}}"> </checkbox>不要直接写checked="false"，否则其计算结果是一个字符串，转换成boolean类型后代表真值。

3.3.6 运算可以在{{}}内进行简单的运算，小程序支持以下几种方式的运算。

（1）三元运算，示例代码如下。

<view hidden="{{flag ? true : false}}"> Hidden </view>（2）数学运算，示例代码如下。

《微信小程序开发项目教程》教学教案（1）第1章微信小程序概述（a）“发现”界面（b）主界面下拉窗口（c）分享的小程序微信小程序入口1.1.2 微信小程序的功能（1）分享页功能：用户可以将小程序当前页面分享给好友，如分享北京到上海的火车票列表界面，用户打开时是这个页面的实时数据，而不需要再次启动微信小程序。

（2）分享对话功能：可以将对话分享给好友或者分享到微信群。

（3）线下扫码进入微信小程序功能：提示用户附近有哪些微信小程序可以使用，扫描二维码就可以使用微信小程序。

（4）挂起状态功能：例如，来电话可以先接电话，接完电话后可以继续使用微信小程序进行相关操作。

（5）消息通知功能：商户可以发送消息给接受过服务的用户，用户也可以使用微信小程序的客服功能联系商户。

（6）实时音视频录制播放功能：通过此功能可以随时随地进行直播或者录播。

（7）硬件连接功能：通过使用NFC（Near Field Communication，近距离无线通信）功能，可以把手机变成公交卡、门禁卡等进行便捷使用；通过Wi-Fi连接功能，进行网络连接。

（8）小游戏功能：微信小程序制作的“跳一跳”小游戏，让游戏大门从此打开，让用户知道小程序也可以制作小游戏。

（9）公众号关联功能：微信小程序可与公众号进行关联，公众号可关联不同主体的3个小程序，可关联同一主体的10个小程序，同一个小程序最多可关联3个公众号。

1.1.3 微信小程序的使用场景小程序有哪些适合的使用场景呢？在发布小程序的时候，要选择服务类目，通过这些服务类目，能知道小程序的使用场景。

服务类目分为个人服务类目和企业服务类目。

● 个人服务类目的小程序开发主体为个人，它的服务类目少一些、服务范围小一些，主要包括出行与交通、生活服务、餐饮、旅游、商业服务、快递业与邮政、教育、工具、体育等。

● 企业服务类目的小程序开发主体是企业，它的服务类目多一些、服务范围大一些，主要包括快递业与邮政、教育、医疗、政务民生、金融业、出行与交通、房地产、生活服务、IT科技、餐饮、旅游、时政信息、文娱、工具、电商平台、商家自营、商业服务、公益、社交、体育、汽车等。

第一章微信小程序入门任务1.1 微信小程序概述一、小程序简介现在，生活中随处都应用到微信小程序。

打开不同的微信小程序，如图1.1所示，点击右上角“…”可以进行转发、添加到我的小程序、取消等。

点击右上角“⊙”，则可以关闭微信小程序。

只要通过扫一扫或搜一搜，或者附近的小程序，你就可以看到5公里内所有的小程序。

同时，小程序完全不需要下载安装，也不需要卸载，更不会占用手机内存。

微信小程序也被简称为小程序，其英文名称是Mini Program。

它是一种存在于微信内部的轻量级应用程序。

微信研发团队在其官方网站上有一段关于微信小程序的介绍:“小程序是一种新的开放四、小程序的发展前景在未来的发展中，小程序将会更加方便、快捷，注册申请的渠道也更加快捷、方便，与此同时，还会进一步加强第三方平台的合作，如果能够开放第三方开发平台，那么它将为小程序的开发提供更大的后方支援。

并且随着小程序的日臻完善，小程序的开发者将能够获得更大的权限支持，由此可见，小程序在未来的发展空间中是相当巨大的，并且对于企业进行小程序制作的优势也将会进一步凸显出来。

小程序传统产业的代表，如图所示。

小程序可以使企业和用户更好地交流，也能够实现用户更好的转化，所以对企业来说小程序可以带来可观的利润和流量。

随着微信开放的功能的不断增多，那么一些小程序也会不断地完善自己，开放一些功能且不断得到匹配，这样也就提供了更多的接口能力，从而能够方便开发者进行深度地挖掘。

相信未来小程序也将具备更多的功能，那么企业所能实现的功能也会随着增加，这对于其未来发展有着至关重要的作用，同时也能推动微信的发展。

小程序互联网公司的代表，如图所示。

小程序将会与其他行业有更为友好的链接，小程序的发展是在微信的用户发展基础上而发展的，这样才能够用微信更好地结合，从而可以实现更多的功能。

因此，小程序在未来不仅方便企业与用户，也会方便企业与企业之间、用户与用户之间的交流。

第3章用微信小程序组件构建UI界面教学过程3.8沙场大练兵：表单登录注册微信小程序微信小程序里有丰富的表单组件，通过这些组件的使用，来完成京东登录界面、手机快速注册界面、企业用户注册界面的微信小程序设计，如图所示。

登录手机快速注册企业用户注册会用到view视图容器组件、button按钮组件、image图片组件、input输入框组件、checkbox多项选择器组件、switch开关选择器组件、navigator页面链接组件等组件的使用，将这些组件进行界面的布局设计来完成表单登录和注册设计。

3.8.2登录设计在登录表单里，输入账号、密码进行登录，在账号、密码输入框里都有友好的提示信息；登录按钮默认是灰色不可用状态，只有输入内容后，才会变为可用状态；在登录按钮的下面提供手机快速注册、企业用户注册、找回密码链接；界面最下面是微信、QQ第三方登录方式，如图所示。

登录界面（1）添加一个form项目，填写AppID，只有填写AppID，form微信小程序才能在手机上浏览效果，如图所示。

添加form项目（2）在app.json文件里添加“pages/login/login”“pages/mobile/mobile”“pages/company/company”3个文件目录，并删除默认的文件目录以及相应的文件夹，如图所示。

app.json配置（3）在“pages/login/login”文件里，进行账号密码输入框布局设计，并添加相应的样式，代码输入框布局设计（4）在“pages/login/login”文件里，进行登录按钮、手机快速注册、企业用户注册、找回密码以及第三方登录布局的设计，并添加相应的样式，代码如下所示。

login.wxml<view class="content"><view class="account"><view class="title">账号</view><view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder- style="color:#999999;"/></view></view><view class="hr"></view><view class="account"><view class="title">密码</view><view c lass="num"><input b indblur="pwdBlur" p laceholder="请输入密码" password p laceholder- style="color:#999999;"/></view><view class="see"><image src="/images/see.jpg" style="width:42px;height:30px;"></image></view></view><view class="hr"></view><button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">登录</button> <view class="operate"><view><navigator url="../mobile/mobile">手机快速注册</navigator></view><view><navigator url="../company/company">企业用户注册</navigator></view><view>找回密码</view></view><view class="login"><view><image src="/images/wxlogin.png" s tyle="width:70px;height:98px;"></image></view><view><image src="/images/qqlogin.png" s tyle="width:70px;height:98px;"></image></view></view></view>login.wxss.content{margin-top: 40px;}.account{布局设计（5）在“pages/login/login”文件中的js文件里添加accountInput、pwdBlur事件函数，当账号里输入内容后，登录按钮变为可用状态，代码如下所示。

教案2《开发第一个微信小程序》教案《开发第一个微信小程序》教案课程名称：开发第一个微信小程序授课时间：2月1号授课课时:1课时授课类型:新授课授课班级:高一一班授课教材:《从零开始学微信小程序开发》教学目标:1.知识与技能目标:认识微信小程序如何开发，以及能够开发出属于自己的第一个微信小程序。

2.过程与方法目标:通过创建第一个微信小程序，了解微信小程序创建的流程。

3.情感态度与价值观目标:通过创建微信小程序，能够掌握我们学习小程序的真正用途，小程序能够给我们带来什么。

教学方法:讲授法，演示法教学重点:开发属于自己的第一个微信小程序教学难点:认识开发小程序项目中的2个目录和3个文件教学过程:一、导入新课:（操作演示）同学们，在上一节课中，我们学习了微信开发者工具的安装,大家还记得吗？答：记得好，那请一位同学来回答一下，微信开发者工具有哪些版本呢？答：win32位、win64位和Mac系统版本回答的非常好，这一节课我们就用微信开发者工具来创建我们的第一个微信小程序.二、新授课程:（操作演示）微信小程序的创建，需要下面几个步骤1、获取微信小程序的AppID在浏览器中输入“微信公众平台”，进入微信公众平台官网之后先注册一个账号，我们可以用邮箱、微信号、QQ号注册一个账号，非常方便。

登陆进去之后点击“设置”-“开发设置”中，查看到微信小程序的AppID，记录下这个AppID，在后面创建微信小程序时使用。

2、创建项目我们在注册好AppID之后，就可以创建微信小程序项目了，下面我们来介绍具体的步骤：（1）先启动刚刚安装好的微信小程序开发工具，界面上会出现一个二维码，我们用注册AppID时绑定的管理员微信扫描二维码进行登录，在手机上确认登录。

开发者用微信扫描二维码登录后，之后的所有操作都会基于这个微信账号。

（2）添加项目“确认登录”之后将进入选择开发项目类型这里，我们可以看到这个工具不仅可以开发小程序，还可以开发公众号。

第1章认识微信小程序教学过程1.1微信小程序介绍1.1.1初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。

（1）在微信中的“发现”界面，可以找到小程序的入口，如图所示。

微信小程序入口（2）在微信主界面下拉，会看到用过的微信小程序。

（3）给好友或者在群里分享小程序。

小程序的界面和使用方法和App类似，下图所示是几个已发布的常用小程序界面。

常用微信小程序界面1.1.2微信小程序的功能（1）分享页功能。

（2）分享对话功能。

（3）线下扫码进入微信小程序功能。

（4）挂起状态功能。

（5）消息通知功能。

（6）实时音视频录制播放功能。

（7）硬件连接功能。

（8）小游戏功能。

（9）公众号关联功能。

（10）搜索查找功能。

（11）识别二维码功能。

1.1.3微信小程序的使用场景在发布小程序的时候，要选择服务类目。

通过这些服务类目，我们能知道小程序的使用场景。

服务类目分为个人服务类目和企业服务类目。

个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。

1.2微信小程序开发准备1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。

另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。

1.2.2开发准备Step1：在“微信公众平台”注册微信开发者账号。

单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。

在微信公众平台中，选择“小程序”→“小程序开发文档”，可以打开帮助文档界面，如图所示。

开发文档帮助文档在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。

《微信小程序开发》教学设计2018- 2019 学年第二学期课程性质：专业课程课程类型：必修所属专业：电子商务技术****：***2019 年 2 月8 日具体考核内容：Reader项目分支作业——构建新闻列表页。

要求：（1）通过初始页可跳转到新闻列表页；（2）新闻列表页在顶部有滚动新闻效果；（3）导航栏的文章显示六条。

效果参考（样式色彩、图片可根据个人喜好设计）：考核标准：考核知识内容等级A优秀B良好C合格D不合格1、掌握组件中视图容器swiper组件使用方法A优秀B良好C合格D不合格2、掌握wxml数据绑定mustache{{}}语法使用方法3、掌握wxml列表渲染wx:for使用方法A优秀B良好C合格D不合格4、掌握wxml事件bindtap的使用方法A优秀B良好C合格D不合格八、特色与创新理论+实践的融合。

本章以系统的项目式方法让学生进行实践操作，加深对理论的内化吸收。

考核具体内容；完成reader整体项目。

实现几个页面的跳转。

效果参照下图：至少完成以下要求：（1）文章收藏、分享功能；（2）收藏、分享的交互反馈；（3）播放音乐（实现全局同步）功能考核标准：考核知识内容等级A优秀B良好C合格D不合格1、熟练掌握wxml、wxss、js的配合基本配置方法2、掌握动态数据绑定使用方法A优秀B良好C合格D不合格3、掌握缓存storage的基本用法A优秀B良好C合格D不合格4、了解小程序API接口的属性与方法，A优秀B良好C合格D不合格掌握其中wx.Showtoast的用法A优秀B良好C合格D不合格5、了解同步与异步的方法，并可以加以区别使用6、掌握playbackgroundaudio（）和A优秀B良好C合格D不合格pausebackgroundaudio（）的使用方法7、掌握监听音乐播放、监听音乐停止的A优秀B良好C合格D不合格方法，调节音乐流媒体与界面保持一致。