微信小程序开发项目实战（微课版）教案全套 黄龙泉 项目1-10 初识微信小程序 - 用户信息模块开发

《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称初识微信小程序计划学时4学时内容分析微信小程序简称小程序。张小龙于2017年1月9日在微信公开课上宣布其正式上线。小程序英文名是MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序诞生初期，备受各界人士关注和期待，但是短期之内并没有对行业造成绝对式的改变，因此曾一度被一些人认为小程序只是昙花一现。然而事实证明，小程序并没有就此消沉，而是在扎扎实实、脚踏实地的改变着整个互联网。“跳一跳”小游戏的出现，让更多的人认识到了微信小程序。教学目标及基本要求了解微信小程序的概念及其发展前景；掌握微信小程序开发工具的使用；掌握微信小程序的功能；掌握微信小程序的目结构。教学重点认识微信小程序；微信开发帐号准备工作；小程序的注意问题。教学难点小程序的帐号申请；小程序项目创建。教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程认识微信小程序：微信小程序简称小程序。张小龙于2017年1月9日在微信公开课上宣布其正式上线。小程序英文名是MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序诞生初期，备受各界人士关注和期待，但是短期之内并没有对行业造成绝对式的改变，因此曾一度被一些人认为小程序只是昙花一现。然而事实证明，小程序并没有就此消沉，而是在扎扎实实、脚踏实地的改变着整个互联网。“跳一跳”小游戏的出现，让更多的人认识到了小程序。官方网址/微信小程序入口：1、扫描微信二维码。比如扫描微信官方小程序码：

2、进入：微信->发现->小程序，有附近的小程序、搜索小程序。比如可以搜索京东的小程序。3、在微信聊天界面，下拉也可以看到最近使用的微信小程序。准备工作1、硬件准备装有微信的手机一台。2、账号注册进入/cgi-bin/registermidpage?action=index&lang=zh_CN&token=注册一个微信小程序账号。

然后输入邮箱注册账号。一个邮箱只能注册一个微信公众平台账号（比如小程序、公众号等）

注册的时候，先选择个人用户即可。如果你有工商营业执照，也可以创建企业账号。企业账号能拥有的功能会更多，比如支付等。注册完后，后面会出现一个二维码，让你扫描这个二维码来绑定你的微信账号。一个微信账号只能绑定5个微信公众平台账号。3、注册小程序账号（1）访问微信公众平台官方首页（/），在首页下方选择“小程序”进入小程序页面，如图所示。图微信公众平台官网首页（2）在接入流程的页面，可以看到小程序的开发过程。依次是注册小程序账号、小程序信息完善、开发小程序及提交审核和发布。这也是即将学习小程序的操作过程。选择“前往注册”链接进入到申请账号页面。图微信小程序接入流程（3）进入到小程序注册填写信息页面，填写的这个邮箱必须没有绑定过个人微信，也没有注册过微信公众平台下的订阅号或者服务号。在账号信息页面中填写邮箱、密码、确认密码、验证码并勾选同意协议条款，如图所示。图填写注册信息（4）小程序系统会发送一份确认邮件到注册时填写的邮箱中，如图所示。单击“登录邮箱”，去到邮箱确认激活信息。图邮箱激活提醒（5）登录对应的注册邮箱查看激活邮件。查图所示。图小程序激活邮件（6）信息登记是比较关键的一步，需要填写开发者的真实姓名、身份证号码和手机号码，并且需要用个人微信号扫描图中的二维码来绑定小程序管理账户。（7）单击下方的“继续”按钮进入下一步，系统会弹出一个提示框让开发者做最后的确认，如图所示。单击“确定”按钮完成小程序管理账号的注册过程。2.查看小程序的AppID成功注册好小程序开发者账号之后，直拉进行小程序后台管理页面或者登录到微信公众平台（/）查看个人的AppID。在左侧导航栏里选择“开发”->“开发管理”界面，在“开发设置”选项卡里查看到个人的AppID，如图所示。该AppID需要保存好，在后续的开发中需要读取到个人的AppID信息。图查看小程序AppID课堂练习1按照以上注册小程序帐号的步骤，尝试使用未注册的邮箱申请小程序开发帐号。5、开发工具微信官方开发工具。下载链接：\t"F:/%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B/%E5%BE%AE%E4%BF%A1/(%E4%BB%B7%E5%80%BC699)%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%90%83%E9%80%8F%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-2019%E5%B9%B4/%E8%AF%BE%E4%BB%B6%E8%B5%84%E6%96%99/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%AF%BE%E4%BB%B6/miniprogram/chapter1/_blank"/miniprogram/dev/devtools/download.html开发工具的使用安装好微信小程序开发工具之后，双击桌面“微信开发者工具”图标，运行微信开发者工具，该工具需要使用手机微信账号扫描登录，如图所示。成功登录之后，双击微信开发者工具，在左侧导航栏选择“小程序”选项，单击右侧的“+”按钮，进入创建小程序界面。1、JSON的基本语法教程：/wiki.html/json/index.asp课堂练习2步骤1：新建一个项目（以后每节课都是这个项目，请保存）步骤2：在index.wxml页面输入以下代码。步骤3：设置样式小程序布局1、主体文件在小程序项目下，有三个主体文件，分别是定义全局数据和函数文件app.js、全局配置文件app.json、全局样式文件app.wxss。综合实训题课堂练习思考题：在data下定义以下数据，如何读取gender里的数据，如何将性别值渲染到页面？效果如下图所示。思考题和习题见教材第1章配套的习题教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称小程序编程基础计划学时4学时内容分析逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。开发者写的所有代码最终将会打包成一份

JavaScript

文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似

ServiceWorker，所以逻辑层也称之为AppService。教学目标及基本要求掌握小程序的基本架构和执行顺序。掌握页面数据的构建的方法。掌握列表渲染和条件渲染含义与使用方法。掌握事件绑定基本方法和技巧。教学重点掌握页面数据的构建的方法。掌握列表渲染和条件渲染含义与使用方法。教学难点事件绑定基本方法和技巧教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程小程序注册函数App()在app.js页面，定义一个App()函数，还可用来注册一个微信小程序。App()必须在app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果。App()函数里有一些生命周期函数页面数据定义data数据在页面JS文件page函数中第一项为data属性，在data中定义本页面逻辑处理需要用到的数据，其中很大一部分数据将用WXML文件的数据渲染。因为小程序JS文件是基于JavaScript编写的，所以在JS文件中可以定义字符串、数字、布尔值、对象和数组等类型的数据。获取data数据获取data中的text和genre_index值需要使用this。设置data数据

setData()

函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的

this.data

的值（同步）。setData()参数格式：接受一个对象，其过程大致可以分成几个阶段：图setData()示例代码数据绑定1.内容绑定WXML中的动态数据均来自对应Page的data。数据绑定使用Mustache语法即{{}}语法将变量包起来，例如：图内容绑定2.组件属性图组件属性绑定3.控制属性图控制属性绑定4.关键字true：boolean类型的true，代表真值。false：boolean类型的false，代表假值。课堂练习思考题：在data下定义以下数据，如何读取gender里的数据，如何将性别值渲染到页面？效果如下图所示。三、列表渲染1wx:for和wx:key的使用2blockwx:for的使用图wx:for的使用课堂练习1、使用嵌套wx:for语句，实现九九乘法表。效果如下所示。步骤1：定义数据步骤2：设计页面布局步骤3：实现样式四、条件渲染1wx:if的使用2blockwx:if的使用3hidden的使用Page({

data:

{

flag:true

}})五、事件绑定事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches小程序中绑定事件，通过bind关键字来实现。如bindinput，bindtap(绑定点击事件)，bindchange等。1事件的使用方式3事件的捕获阶触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。课堂练习1、完成以下效果图步骤1：定义初始数据步骤2：实现页面布局，并进行数据绑定步骤3：设计页面样式步骤4：获取表单数据步骤5：如何实现以下效果，自行完成代码编写课堂练习实现对表格动态增加或删除一行数据。效果如下所示。步骤1：定义数据步骤2：定义布局步骤3:编写样式步骤4：实现绑定事件思考题和习题见教材第2章配套的习题教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称小程序编程基础计划学时4学时内容分析逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。开发者写的所有代码最终将会打包成一份

JavaScript

文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似

ServiceWorker，所以逻辑层也称之为AppService。教学目标及基本要求掌握小程序的基本架构和执行顺序。掌握页面数据的构建的方法。掌握列表渲染和条件渲染含义与使用方法。掌握事件绑定基本方法和技巧。教学重点掌握页面数据的构建的方法。掌握列表渲染和条件渲染含义与使用方法。教学难点事件绑定基本方法和技巧教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程“天天打卡”整体布局如果需要每天打卡，统计要卡数据，那么打卡小程序肯定是最佳选择，本任务配套源代码中提供了完整的天天打卡小程序案例。1.案例初始化新建一个项目，创建一个名为card的空白页面，打开app.json文件，创建新页面的代码如下所示。上述代码指定小程序页面标题为“天天打卡”，页面背景颜色为蓝色，运行结果如图所示。图设置导航栏打开pages/card/card.js文件，在data对象中定义初始数据，包括打卡名称，打卡地点，打卡时间等信息。2.页面基本结构分析了天天打卡小程序并学习了Flex布局，接下来编写天天打卡小程序的基础页面结构和样式，打开pages/card/card.wxml文件编写页面结构代码。接下来在pages/card/card.wxss文件编写样式，具体代码如下。“天天打卡”组件1.个人信息-微信API的使用步骤1：在视图页面使用条件渲染获取个人信息步骤2：实现样式2.打卡名称-输入框的使用步骤1：设置布局步骤2：设置样式步骤3：获取输出框信息任务地点-地理位置API的使用步骤1：设置布局步骤2：步骤3：设置JS，获取地理位置任务时间-picker组件的使用picker组件：从底部弹起的滚动选择器/miniprogram/dev/component/picker.html步骤1：设置布局步骤2：设置样式步骤3：设置JS重复日-条件运行符的使用步骤1：设置布局步骤2：设置样式步骤3：设置JS，请自行完成其它六个重复日选中函数获取数据1.新建按钮步骤1：设置布局步骤2：设置样式步骤3：实现绑定事件打卡便签效果步骤1：设置布局步骤2：设置样式将数据写入到缓存读取缓存校园新闻案例竞赛新闻1、页面初始化步骤1：新建三个页面步骤2：定义全局样式步骤3：定义初始数据2、页面布局和样式步骤1：设计页面布局步骤2：设计页面样式3、编写分页函数步骤1：在util.js里定义一个公共的随机函数步骤2：引入公共文件util.js，编写fetchNewsListData处理函数步骤3：在页面加载和上拉触底时分别调用分页函数。步骤4：在JSON文件里，开启上底触底。课后作业使用Flex弹性盒模型布局方法，实现支付宝的界面，效果如下图所示。图3-15支付宝案例思考题和习题见教材第3章配套的习题教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称商城首页模块开发计划学时8学时内容分析在学习了小程序的基础知识以及页面布局之后，读者可以开始尝试创建一个小程序前端综合设计实例。本项目以“梅园”为主题，带领读者从页面创建到数据请求，讲解如何实现一个带有新闻、产品页面的简易小程序。教学目标及基本要求掌握小程序的基本架构和执行顺序。理解tabBar、swiper和scroll-view三种组件的使用方法。掌握利用Flex弹性盒模型设置首页模块样式和布局的方法。掌握利用JavaScript程序设计的基本方法和技巧。掌握小程序列表渲染的方法。教学重点tabBar、swiper和scroll-view三种组件的使用方法。利用JavaScript程序设计的基本方法和技巧。教学难点小程序列表渲染的方法教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程项目创建1.新建小程序项目本项目名称命名为“wintersweet”，创建空白文件夹，选好目录后，输入AppID，开发模式选择“小程序”，初始模板选择“默认模板”，语言选择“JavaScript”。图创建新项目2.新建页面文件本项目所有图片素材放置在images文件夹下，并在images下面按图片功能进分文件夹放置，例如tabs文件，放置的是导航栏里的icon图标。新建5个页面文件夹，分别是news新闻列表页，newsDetail新闻详情页、goods产品页、goodsDetail产品详情页、profile个人信息页。页面目录结构如下图所示：视图设计1.导航栏设计小程序默认导航栏是黑底白字的效果，可以通过app.json中对window属性进行重新配置来定义导航栏效果。表页面配置选项属性类型默认值描述backgroundTextStylestringdark下拉loading的样式，仅支持

dark

/

lightnavigationBarBackgroundColorHexColor#000000导航栏背景颜色，如

#000000navigationBarTitleTextstring导航栏标题文字内容navigationBarTextStylestringwhite导航栏标题颜色，仅支持

black

/

white修改“梅园”小程序项目配置app.json方件，效果所下图所示。图3-5自定义导航栏效果tabBar组件的设计图tabBar效果图在app.json文件中实现tabBar属性的设置，代码如下：课堂练习11、结合“新建页面文件”和“tabBar设计”增加一个新的“购物车”切换页面，图片素材使用images文件夹下面的cart.png和cart-active.png两张图片。2、查阅开发者文档，实现tabBar在页面顶部显示，如图所示。图3-7加上购物车页面的效果图3-8tabBar设置为顶部效果swiper轮播图组件的设计实现“梅园”小程序首页的轮播图功能，效果如下图所示。图轮播图效果图步骤1：在index.js页面，定义sliderList数组内容。步骤2：在index.wxml页面，实现swiper组件，代码如下所示：步骤3：在index.wxss页面，定义轮播图样式，代码如下所示。课堂练习2将以上示例的轮播图修改如下效果，将轮播图设为圆角，特别注意轮播图在滑动过程中如果先显示直角，等滑动一整张之后才会变成圆角的现象，想一想，如何进行设置？弹性布局设计页面利用Flex弹性盒模型实现“梅园”小程序图片导航功能。完成效果如下图所示。步骤1：在index.js页面，定义navList数组内容。步骤2：在index.wxml页面，进行图片导航功能的布局设计，代码如下所示：步骤3：在index.wxss页面，定义图片导航功能样式，代码如下所示。课堂练习3查看小程序开发文档，查找navigator组件的属性，对示例3.1的图片导航加上跳转链接，实现跳转到news页面。scroll-view组件的设计利用scroll-view组件实现“梅园”小程序“推荐美景”功能。完成效果如下图所示。图3-13“推荐美景”功能步骤1：在index.js页面，定义recomList数组内容。步骤2：在index.wxml页面，进行“推荐美景”功能的布局设计，代码如下所示：步骤3：在index.wxss页面，定义“推荐美景”功能样式，代码如下所示。课堂练习4实现顶部导航，使用scroll-view组件实现内容页的滑动功能，效果如下图所示。6.公共样式的设计步骤1：打开app.wxss页面，定义一个公共的样式，实现页面功能之间的间隔。步骤2：打开index.wxml页面，在图片导航和推荐美图之间，实现app.wxss里定义的样式。7.弹性布局实现最新产品图最新产品效果图步骤1：在index.js页面，定义goodsList数组内容。步骤2：在index.wxml页面，定义最新产品的布局。具体代码如下所示。步骤3：在index.wxss页面，定义最新产品的样式。具体代码如下所示。思考题和习题见教材第4章配套的习题教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称新闻页面模块开发计划学时8学时内容分析在学习了小程序的基础知识以及页面布局之后，读者可以开始尝试创建一个小程序前端综合设计实例。本项目以“梅园”为主题，带领读者从页面创建到数据请求，讲解如何实现一个带有新闻、产品页面的简易小程序。教学目标及基本要求掌握静态数据的定义与接口的使用。理解新闻列表页与新闻详情页数据的读取。掌握利用本地缓存的写入与读取实现收藏功能。掌握按钮和菜单转发分享的基本方法和技巧。掌握背景音乐的调用以及监听方法。教学重点新闻列表页与新闻详情页数据的读取。利用本地缓存的写入与读取实现收藏功能。教学难点利用本地缓存的写入与读取实现收藏功能教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程梅园-首页模块开发项目创建1.新建小程序项目图创建新项目2.新建页面文件视图设计1.导航栏设计图3-5自定义导航栏效果tabBar组件的设计使用tabBar组件，完成“梅园”小程序底部导航，实现页面切换效果。效果所下图所示。图tabBar效果图在app.json文件中实现tabBar属性的设置，代码如下：课堂练习11、结合“新建页面文件”和“tabBar设计”增加一个新的“购物车”切换页面，图片素材使用images文件夹下面的cart.png和cart-active.png两张图片。2、查阅开发者文档，实现tabBar在页面顶部显示，如图所示。图3-7加上购物车页面的效果图3-8tabBar设置为顶部效果swiper轮播图组件的设计嵌套在swiper内部的swiper-item组件的属性只有一个item-id属性，用来标识每个swiper-item的id，其值类型为string。代码如下所示。实现“梅园”小程序首页的轮播图功能，效果如下图所示。图轮播图效果图步骤1：在index.js页面，定义sliderList数组内容。步骤2：在index.wxml页面，实现swiper组件，代码如下所示：步骤3：在index.wxss页面，定义轮播图样式，代码如下所示。课堂练习2将以上示例的轮播图修改如下效果，将轮播图设为圆角，特别注意轮播图在滑动过程中如果先显示直角，等滑动一整张之后才会变成圆角的现象，想一想，如何进行设置？弹性布局设计页面利用Flex弹性盒模型实现“梅园”小程序图片导航功能。完成效果如下图所示。步骤1：在index.js页面，定义navList数组内容。步骤2：在index.wxml页面，进行图片导航功能的布局设计，代码如下所示：步骤3：在index.wxss页面，定义图片导航功能样式，代码如下所示。课堂练习3查看小程序开发文档，查找navigator组件的属性，对示例3.1的图片导航加上跳转链接，实现跳转到news页面。scroll-view组件的设计利用scroll-view组件实现“梅园”小程序“推荐美景”功能。完成效果如下图所示。图3-13“推荐美景”功能步骤1：在index.js页面，定义recomList数组内容。步骤2：在index.wxml页面，进行“推荐美景”功能的布局设计，代码如下所示：步骤3：在index.wxss页面，定义“推荐美景”功能样式，代码如下所示。课堂练习4实现顶部导航，使用scroll-view组件实现内容页的滑动功能，效果如下图所示。6.公共样式的设计步骤1：打开app.wxss页面，定义一个公共的样式，实现页面功能之间的间隔。步骤2：打开index.wxml页面，在图片导航和推荐美图之间，实现app.wxss里定义的样式。7.弹性布局实现最新产品图最新产品效果图步骤1：在index.js页面，定义goodsList数组内容。步骤2：在index.wxml页面，定义最新产品的布局。具体代码如下所示。步骤3：在index.wxss页面，定义最新产品的样式。具体代码如下所示。思考题和习题见教材第5章配套的习题教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称商品页面模块开发计划学时8学时内容分析在小程序开发中，商品模块一般包括商品分类列表、商品列表、商品详情、商品评价等，小程序提供了各类API和组件为实现商品模块提供了便利。掌握了这些API和组件的使用，即可完成商品模块功能的开发。本项目将通过“梅园-商品页面”，讲解商品分类的布局、组件的创建与使用、picker组件等各类商品页面所需要的功能。教学目标及基本要求小程序滑动事件的定义与使用。自定义组件的创建与使用。利用picker组件设置商品选项功能。iconfont图标库的使用方法和技巧。教学重点自定义组件的创建与使用。利用picker组件设置商品选项功能。教学难点自定义组件的创建与使用教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程修改页面产品分类左边页面下面的截图页面都是goodsCate步骤1：定义基础数据步骤2：将产品分类页，分成左右在布局步骤3：左边的布局，左边的布局代码如下：步骤4：左边样式获取小程序页面的高度小程序为我们提供了这样的wx.getSystemInfo(Objectobject)和同步Objectwx.getSystemInfoSync()接口可以获取系统信息。windowHeight属性可以获取可使用窗口高度，单位px。步骤1：获取小程序页面的高度步骤2：设置左边区域的高度左边分类点击事件步骤1:定义三个基础数据步骤2，绑定事件步骤3：handleCategory商品分类右边页面步骤1：右边布局步骤2：样式步骤3：获取每一个节点的高度值。步骤3：实现rightView事件商品列表页面步骤1：页面布局步骤2：星星组件的定义步骤1：新建组件页面步骤2：定义星星组件的属性列表步骤3：星星组件的布局步骤4：星星组件的样式星星组件的生命周期方法星星组件的使用步骤1：引入星星星组件步骤2：使用星星组件练习组件的使用思考题和习题见教材第6章配套的习题教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称购物车模块开发计划学时8学时内容分析在小程序开发中，购物车模块一般包括商品列表、商品金额计算、商品数量增减、商品所选规格等，小程序提供了各类API和组件为实现商品购物车提供了便利。购物车商品数量在后续的数据接口中将进一步讲解。本项目将通过“梅园-购物车页面”，讲解商品购物车的布局、条件渲染、forEach、every函数在金额计算中的使用等购物车页面所需要的功能。教学目标及基本要求掌握小程序购物车页面的基本布局与样式。掌握购物车商品列表循环读取方法。掌握获取购物车单选和全选商品金额计算方式。了解购物车为空状态的布局与样式。教学重点购物车商品列表循环读取方法。获取购物车单选和全选商品金额计算方式。教学难点获取购物车单选和全选商品金额计算方式教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程顶部信息步骤1：设置布局步骤2：设置样式购买商品列表步骤1：设置布局步骤2：设置样式购物车底部信息步骤1：设置布局步骤2：设置样式购物车删除商品步骤一：绑定事件步骤二：实现事件清空购物车界面步骤一：设置布局步骤二：设置样式清空购物车的实现步骤一：定义变量，判断购物车是否有数据步骤二：视图页面的逻辑判断前往添加商品按钮步骤一：绑定事件步骤二：实现事件思考题和习题见教材第7章配套的习题教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称用户信息模块开发计划学时8学时内容分析在小程序开发中，用户信息模块一般包括用户登录、退出登录、购物信息统计、购物金额统计等，小程序提供了各类API和组件为实现用户信息模块提供了便利。通过本项目的讲解，让读者了解小程序用户登录的API接口、小程序与Echart.js中的柱状图、饼图和折线图相结合的使用方式等。教学目标及基本要求掌握小程序用户登录流程。了解小程序退出登录操作。掌握小程序模板的基本语法。掌握Echart在小程序中的运用。教学重点购物车商品列表循环读取方法。获取购物车单选和全选商品金额计算方式。教学难点获取购物车单选和全选商品金额计算方式教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程wx.getUserInfo(Objectobject)在小程序插件中使用时，需要在用户信息功能页中获得用户授权之后调用。否则将返回fail。小程序登录步骤一：绑定登录按钮步骤二：按钮样式步骤三：登录事件步骤四：渲染结果登录信息存储到缓存中小程序对接echarts.js步骤一：将ec-canvas文件夹复制到对应的目录下。步骤二：新建一个页面步骤三：在页面的JSON文件中引入组件步骤四：设置布局步骤五：设置样式思考题和习题1．使用模板功能，完成以下效果。教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称接口的设计与开发计划学时4学时内容分析Node.js就是运行在服务端的JavaScript，是一个真正高效的Web开发平台，在Node.js诞生之前，在服务端运行JavaScript是一件不可思议的事情。在Node.js之前，JavaScript只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了Node.js以后，JavaScript就可以脱离浏览器，像其他编程语言一样直接在计算机上使用，再也不受浏览器的限制。教学目标及基本要求掌握node.js安装配置过程。掌握node.js获取静态资源方法。掌握node.js路由配置的两种方法。学会小程序访问node.js数据接口。教学重点node.js获取静态资源方法。node.js路由配置的两种方法。教学难点node.js路由配置的两种方法教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程node.js服务器的搭建利用Node.js搭建搭建一个HTTP服务器。在后面章节中，也会讲解Node.js实现小程序后台接口的创建。Node.js的安装。进入Node.js的官网/zh-cn/下载Node.js最新版（实训室已安装，不需要做）。在命令提示符工具里测试安装结果。新建

api_server

文件夹作为项目根目录，将

api_server

文件夹拖到VScode编辑器中，并在项目根目录中运行如下的命令，初始化包管理配置文件。Web应用程序Express是一个保持最小规模的灵活的Node.jsWeb应用程序开发框架。运行如下的命令，安装express框架。在

api_server

项目根目录中新建app.js作为整个项目的入口文件。并初始化如下的代码：使用node启动app.js。如果使用node启动app.js，那么每次修改代码后，都可以需要重新启动服务器。Ctrl+C停止，再启动nodeapp.js安装nodemon工具。nodemon可以自动检测到运行文件更改，通过自动重新启动应用程序来调试基于node.js的应用程序。set-ExecutionPolicyRemoteSigned用于设置管理员权限，可以访问powershell.set-ExecutionPolicyRemoteSignednpminstallnodemon-g使用nodemon启动app.jsnodemonapp.js获取后台静态资源测试结果如下图所示：可以通过带有

/static

前缀地址来访问

public

目录中的文件了。app.use('/static',express.static('public'))测试结果如下图所示。使用接口访问静态资源测试数据接口步骤一：打开api_server

项目，在app.js页面实现get请求接口。步骤二：打开浏览器在地址栏中输入:3000/api/data，如出现以下数据，则表示数据访问成功。什么是路由指的是后端的地址和方法路由是指确定应用程序如何响应客户端对特定端点的请求，该端点是URI（或路径）和特定的HTTP请求方法（GET、POST等）。每个路由可以有一个或多个处理函數，当路由匹配时执行。路由定义采用用以下结构：app.METHOD(PATH,HANDLER)app是一个实例express。METHOD是一个HTTP请求方法，小写。PATH是服务器上的路径。HANDLER是路由匹配时执行的回调函数。获取get请求参数代码如下：执行流程图测试结果小程序访问数据接口思考题和习题1．使用模板功能，完成以下效果。综合实践题1．使用小程序访问以下GET数据接口。app.get('/get',function(req,res){res.setHeader('Content-Type','text/plain;charset=utf8');res.end(JSON.stringify({code:0,data:{brandName:'品牌名称',couponAvailableTime:'2020-45-34',},msg:'success',success:true}))})2．使用小程序访问以下POST数据接口。app.post('/post',function(req,res){res.setHeader('Content-Type','text/plain;charset=utf8');res.end(JSON.stringify({code:0,data:{list:[{couponTemplateId:1,couponName:'小布丁代金券',}],pageIndex:1,pageSize:10,total:3},msg:'success',success:true}))})教学后记《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称用户信息模块开发计划学时4学时内容分析在小程序开发中，数据存储和管理是不可或缺的一部分。MySQL是一个流行的开源关系型数据库管理系统，而Node.js是一个基于事件驱动、非阻塞I/O的JavaScript运行时环境。通过将Node.js和MySQL结合使用，读者可以轻松地连接到数据库，并进行数据操作和查询。本章节将详细介绍如何在Node.js中连接MySQL数据库，包括安装依赖、创建数据库连接、执行查询和更新操作等。教学目标及基本要求掌握node.js与本地数据建立连接。理解node.js跨域的含义。掌握Postman对整个后端服务进行测试。掌握node.js简单查询列表。教学重点node.js跨域的含义。node.js与本地数据建立连接。教学难点node.js跨域的含义教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程数据库的安装步骤1：需要安装上mysql插件。代码如下：npminstallmysql执行效果如下：安装完后，可以在左边node_modules文件夹里新增了mysql文件夹。说明mysql插件已安装成功步骤2：测试是否安装成功。使用node.js操作增删改查在navicate里导入数据表步骤1：新建数据库步骤2：数据库命名为flower_shopping步骤3：导入sql文件执行查询操作constsql='select*fromnews'db.query(sql,(err,res)=>{

if(er