《微信小程序开发》第4章教案1 (2)
第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事件函数，当账号里输入内容后，登录按钮变为可用状态，代码如下所示。
login.js Page({data:{disabled:true, btnstate:"default",account:"", password:""},accountInput:function(e){var c ontent =e.detail.value;console.log(content); if(content != ''){this.setData({disabled:false,btnstate:"primary",account:content});}else{this.setData({disabled:true,btnstate:"default"});}},pwdBlur:function(e){var p assword =e.detail.value; if(password !=''){this.setData({password:password});}}})界面效果如图所示。
登录按钮可用状态3.8.2手机号注册设计在手机号注册里，需要设计输入框用来输入手机号，设计同意注册协议以及下一步按钮，如图所示。
手机号注册界面（1）在“pages/mobile/mobile”文件里，进行手机号输入框布局设计，并添加相应的样式，代码如下所示。
mobile.wxml<view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur"/></view> </view></view>mobile.wxss.content{width:100%; height: 600px;background-color: #f2f2f2;}.hr{padding-top:20px;}.numbg{border: 1px s olid #cccccc; width: 90%;margin: 0 auto; background-color:#ffffff; border-radius: 5px; display: f lex;flex-direction: row; height: 50px;}.numbg view{margin-left: 20px; margin-top:14px;}界面效果如图所示。
手机号输入框（2）在“pages/mobile/mobile”文件里，设计注册协议和下一步按钮操作，并添加相应的样式，代码如下所示。
mobile.wxml<view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur"/></view></view><view><view class="xieyi"><icon type="success" color="red" size="18"></icon><text class="agree">同意</text><text class="opinion">京东用户注册协议</text></view>同意注册协议及下一步按钮（3）在“pages/mobile/mobile”文件里，添加mobileblur事件，如果输入手机号，下一步按钮变为可用状态，代码如下所示。
mobile.js Page({data:{disabled:true, btnstate:"default",mobile:""},mobileblur:function(e){var c ontent =e.detail.value;if(content !=""){this.setData({disabled:false,btnstate:"primary",mobile:content});}else{this.setData({disabled:true,btnstate:"defalut",mobile:""});}}})界面效果如图所示。
《微信小程序开发项目教程》第四章
视图容器组件在首页中应用
任务9：实现搜索区域布局与海报轮播功能
微信小程序开发项目教程
微信小程序开发项目教程
基础内容组件
主讲人：小刚老师
微信小程序开发项目教程
基础内容组件
（1）icon图标组件； （2）text文本组件； （3）progress进度条组件； （4）rich-text富文本组件； （5）editor富文本编辑器及API；
视图容器组件在首页中应用
主讲人：小刚老师
微信小程序开发项目教程
视图容器组件在首页中应用
视图容器组件
（1）view视图容器组件； （2）scroll-view可滚动视图容器组件； （3）swiper滑块视图容器组件； （4）movable-view可移动视图容器组件； （5）cover-view覆盖原生组件的视图容器组件；
微信小程序开发项目教程
image图片组件及图片API应用
任务10：实现图书列表显示功能静态布局
微信小程序开发项目教程
微信小程序开发项目教程
导航组件和导航API
主讲人：小刚老师
微信小程序开发项目教程
导航组件和导航API
导链接组件； （2）wx.navigateTo保留当前页跳转API； （3）wx.redirectTo关闭当前页跳转API； （4）wx.switchTab跳转到tabBar页面API； （5）wx.navigateBack返回上一页API； （6）wx.reLaunch关闭所有页面，打开某个页面API； （7）导航栏API； （8）Tab Bar标签导航API；
微信小程序开发项目教程
微信小程序开发项目教程
基础内容组件
微信小程序开发项目教程
《微信小程序云开发》教学大纲+教学进度表+教案
《微信小程序云开发》教学大纲+教学进度表+教案《微信小程序云开发》课程教学大纲一、课程的性质和教学目的课程性质：小程序开发已经成为一类具有独特特点的应用开发，云开发也具有自己的特点。
微信小程序的发展很快，应用领域很多。
但是，在云开发出现之前，开发时面临着在数据库、存储实现方面的挑战。
微信小程序通过云开发自身就可以完成了前端、后端、数据库全技术栈的一揽子方案。
这对开发者来说，意味着开发工具能力更强，而学习成本更低。
于是，开设微信小程序（含组件、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．基本知识了解微信小程序云开发管理、开发基础知识。
微信小程序开发项目教程(慕课版)教案 (4)[15页]
![微信小程序开发项目教程(慕课版)教案 (4)[15页]](https://360docs-1393072327.cos.ap-beijing.myqcloud.com/939c88c40066f5335b81212a.webp)
第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）第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-4 教案-小程序AppID[2页]
![微信小程序开发 1-4 教案-小程序AppID[2页]](https://360docs-1393072327.cos.ap-beijing.myqcloud.com/51798b13590216fc700abb68a98271fe900eaf73.webp)
即使有了AppID，也不能立即发布小程序，还需要进行小程序基本信息的设置。在页面中进行诸如小程序名称、小程序头像等内容的设置，设置完成后的界面如图所示。
第一章 微信小程序入门
任务1.4 小程序AppID
课时内容
小程序AppID
课时ห้องสมุดไป่ตู้
1
教学目标
查看小程序AppID；
设置小程序信息。
教学重难点
查看小程序AppID；
设置小程序信息。
教学设计
1.教学思路：介绍查看小程序AppID、设置小程序信息。
2.教学手段：多媒体+计算机
3.教学资料：教材、多媒体课件
教学内容
练习
微信小程序开发实战(第2版)-教学大纲
《微信小程序开发实战（第2版）》课程教学大纲（课程英文名称）课程编号：学分：学分课时：86课时（其中：讲课55课时上机31课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业一、课程的性质与目标微信小程序是一门面向Web前端开发人员的课程，用于快速掌握微信小程序的开发。
本课程以案例驱动模式，循序渐进地讲解了微信小程序的相关知识，包括微信小程序项目的创建方法、页面组成、发布流程、常用组件、导航栏、标签栏、数据绑定、事件绑定、this 关键字、列表渲染、常用API、Vant Weapp组件库、WeUI组件库、uni-app框架等内容以及两个综合项目。
另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内容。
通过本课程的学习，不仅可以让学生掌握微信小程序的核心知识，还可以培养学生的家国情怀、责任担当、敬业精神等。
二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将微信小程序与项目开发相结合。
按照学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从而培养学生分析问题和解决问题的能力。
课程设计思路：本课程根据知识点难易的先后顺序进行讲解。
采用案例驱动式体例，主要包括“案例分析”“知识储备”“案例实现”等，在每个案例中，先对案例进行需求分析，然后在知识储备中讲解实现这个案例需要使用到的知识，并结合示例代码帮助学生理解，最后通过案例实现达到学以致用的目标。
学完微信小程序的基础知识后，通过两个项目实战将所学内容全部串联起来，培养学生分析和解决问题的能力。
操作系统：Windows 7或更高版本开发工具：微信开发者工具、HBuilder X三、课程的主要内容及基本要求第1章微信小程序入门学习单元微信小程序入门课时6课时学习目标1.了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境2.掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册3.掌握获取微信小程序AppID的方法，能够从微信小程序管理后台获取AppID4.掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装5.掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目6.熟悉微信小程序的项目结构，能够解释每个文件的作用7.熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用8.熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式9.熟悉微信开发者工具的主界面，能够说出工具栏中常用快捷按钮的功能10.掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置11.了解微信小程序开发常用快捷键，能够列举4类常用快捷键12.了解项目成员，能够说出项目成员的组织结构、分工和权限13.掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员14.熟悉微信小程序的版本，能够说明微信小程序的4种版本15.熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤学习内容知识点掌握程度重点难点什么是微信小程序了解微信小程序的特点了解微信小程序的发展前景了解微信小程序的宿主环境了解注册微信小程序开发账号掌握获取微信小程序AppID 掌握√安装微信开发者工具掌握创建微信小程序项目掌握√微信小程序的项目结构熟悉微信小程序的页面组成熟悉微信小程序的通信模型熟悉认识微信开发者工具熟悉微信小程序的项目设置掌握微信小程序开发常用快捷键了解项目成员的组织结构了解项目成员的分工了解项目成员和体验成员的管理了解项目成员的权限了解添加项目成员和体验成员掌握微信小程序的版本熟悉微信小程序的上线流程熟悉第2章微信小程序页面制作学习单元微信小程序页面制作课时10课时学习目标1.了解WXML的概念，能够说出WXML的特点、WXML与HTML的区别2.了解WXSS的概念，能够说出WXSS的特点、WXSS与CSS的区别3.了解组件的概念，能够说出组件的特点及常用的组件4.掌握页面路径的配置方法，能够运用该方法进行页面管理5.掌握view组件的使用方法，能够灵活运用view组件实现页面的布局效果6.掌握image组件的使用方法，能够灵活运用image组件完成图片插入操作7.掌握rpx单位的使用方法，能够灵活运用rpx单位解决屏幕适配的问题8.掌握页面样式的导入方法，能够灵活运用该方法导入公共样式9.掌握swiper和swiper-item组件的使用方法，能够灵活运用swiper和swiper-item组件完成轮播图的制作10.掌握text组件的使用方法，能够灵活运用text组件定义行内文本11.掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局12.掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置13.掌握标签栏的配置方法，能够完成页面标签栏的配置14.掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度15.掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理16.掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作学习内容知识点掌握程度重点难点WXML简介了解WXSS简介了解常用组件了解页面路径配置掌握√view组件掌握√image组件掌握√√rpx单位掌握样式导入掌握【案例2-1】个人信息-准备工作掌握【案例2-1】个人信息-实现“个人信息”微掌握√信小程序的页面结构【案例2-1】个人信息-实现“个人信息”微掌握信小程序的页面样式swiper和swiper-item组件掌握√text组件掌握Flex布局掌握【案例2-2】本地生活-准备工作掌握【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面结构【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面样式导航栏配置掌握标签栏配置掌握vm、vh单位掌握video组件掌握表单组件掌握√【案例2-3】婚礼邀请函-准备工作掌握【案例2-3】婚礼邀请函-项目初始化掌握【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的结构【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的样式【案例2-3】婚礼邀请函-实现“照片”页面掌握的结构【案例2-3】婚礼邀请函-实现“照片”页面掌握的样式【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的结构【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的样式【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的结构【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的样式第3章微信小程序页面交互学习单元微信小程序页面交互课时10课时学习目标1.熟悉Page()函数，能够归纳Page()函数及其各个参数的作用2.掌握数据绑定，能够运用数据绑定实现页面中数据的显示与修改3.掌握事件绑定，能够在组件触发时执行对应的事件处理函数4.熟悉事件对象，能够总结事件对象的属性及其作用5.掌握this关键字的使用，能够运用this关键字访问当前页面中的数据或者函数6.掌握setData()方法的使用，能够完成数据的设置与更改7.掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件8.掌握<block>标签，能够运用<block>标签同时显示或隐藏多个组件9.熟悉hidden属性，能够区分其与wx:if控制属性的区别10.掌握data-*自定义属性，能够完成data-*自定义数据的设置与获取11.掌握模块的使用，能够完成模块的创建和引入12.掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中13.掌握网络请求的实现，能够通过网络请求与服务器进行交互14.掌握提示框的实现，能够在页面中显示消息提示框15.掌握WXS的使用，能够运用WXS处理页面中的数据16.掌握上拉触底的实现，能够运用上拉触底实现数据的动态加载17.掌握下拉刷新的实现，能够运用下拉刷新实现数据的重新加载18.掌握双向数据绑定，能够运用双向绑定实现数据的动态更改学习内容知识点掌握程度重点难点Page()函数熟悉√数据绑定掌握事件绑定掌握√事件对象熟悉this关键字掌握setData()方法掌握√条件渲染掌握√<block>标签掌握hidden属性熟悉【案例3-1】比较数字大小-准备工作掌握【案例3-1】比较数字大小-实现“比较数字大小”微信小程序的页面结构掌握【案例3-1】比较数字大小-获取并保存用户输入的数字掌握【案例3-1】比较数字大小-判断数字大小并显示结果掌握data-*自定义属性掌握模块掌握【案例3-2】计算器-准备工作掌握【案例3-2】计算器-实现“计算器”微信小程序的页面结构掌握【案例3-2】计算器-实现“计算器”微信小程序的页面逻辑掌握【案例3-2】计算器-特殊情况处理掌握√列表渲染掌握√网络请求掌握√提示框掌握WXS 掌握√上拉触底掌握下拉刷新掌握【案例3-3】美食列表-准备工作掌握【案例3-3】美食列表-获取初始数据掌握【案例3-3】美食列表-实现页面渲染掌握【案例3-3】美食列表-处理电话格式掌握【案例3-3】美食列表-实现上拉触底掌握【案例3-3】美食列表-实现下拉刷新掌握双向数据绑定掌握√【案例3-4】调查问卷-准备工作掌握【案例3-4】调查问卷-获取初始数据掌握【案例3-4】调查问卷-实现页面渲染掌握第4章微信小程序常用API（上）学习单元微信小程序常用API（上）课时9课时学习目标1.掌握scroll-view组件，能够运用scroll-view组件完成视图区域的横向滚动或者纵向滚动2.掌握slider组件，能够运用slider组件完成滑动选择器的制作3.掌握<include>标签，能够运用<include>标签引用其他文件中的代码4.掌握背景音频API，能够运用背景音频API实现音频后台播放、音频暂停等功能5.掌握录音API，能够运用录音API实现录音功能6.掌握音频API，能够运用音频API实现音频播放、暂停等功能7.掌握选择媒体API，能够运用wx.chooseMedia()方法选择图片或视频8.掌握图片预览API，能够运用wx.previewImage()方法预览图片9.掌握文件上传API，能够运用wx.uploadFile()方法实现将本地资源上传到服务器中10.掌握文件下载API，能够运用wx.downloadFile()方法实现资源文件的下载11.掌握canvas组件，能够灵活运用canvas组件创建画布12.掌握画布API，能够运用画布API完成图形的绘制学习内容知识点掌握程度重点难点scroll-view组件掌握√slider组件掌握√<include>标签掌握背景音频API 掌握√【案例4-1】音乐播放器-准备工作掌握【案例4-1】音乐播放器-实现“音乐播放器”掌握微信小程序的页面结构【案例4-1】音乐播放器-实现标签页切换掌握【案例4-1】音乐播放器-实现“音乐推荐”标签页掌握【案例4-1】音乐播放器-实现“播放器”标签页掌握【案例4-1】音乐播放器-实现播放器区域掌握【案例4-1】音乐播放器-实现播放进度的控制掌握【案例4-1】音乐播放器-实现“播放列表”标签页掌握录音API 掌握音频API 掌握【案例4-2】录音机-准备工作掌握【案例4-2】录音机-初始化录音功能掌握【案例4-2】录音机-实现“录音机”微信小程序的页面结构掌握【案例4-2】录音机-实现录音功能掌握【案例4-2】录音机-实现播放录音功能掌握√选择媒体API 掌握图片预览API 掌握文件上传API 掌握√文件下载API 掌握√【案例4-3】头像上传下载-准备工作掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面结构掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面逻辑掌握canvas组件掌握画布API 掌握√【案例4-4】模拟时钟-准备工作掌握【案例4-4】模拟时钟-初始化画布掌握【案例4-4】模拟时钟-绘制表盘掌握【案例4-4】模拟时钟-绘制指针掌握【案例4-4】模拟时钟-实现时钟走动效果掌握√第5章微信小程序常用API（下）学习单元微信小程序常用API（下）课时13课时学习目标1.掌握动画API，能够完成动画的制作2.熟悉登录流程时序，能够归纳微信小程序的登录流程3.掌握登录API，能够运用wx.login()方法实现用户登录4.掌握数据缓存API，能够对数据进行存储、获取和移除等操作5.掌握头像昵称填写功能，能够实现头像选择和昵称填写6.掌握腾讯地图SDK，能够实现腾讯地图SDK的接入和使用7.掌握map组件，能够灵活运用map组件实现地图效果8.掌握地图API，能够实现地图中地理位置的获取等功能9.掌握位置API，能够实现获取当前地理位置的功能10.掌握路由API，能够利用路由API实现页面跳转11.掌握WebSocket API，能够成功创建WebSocket连接12.掌握SocketTask，能够使用SocketTask管理WebSocket连接学习内容知识点掌握程度重点难点动画API 掌握√【案例5-1】罗盘动画-准备工作掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面结构掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面逻辑掌握登录流程时序熟悉登录API 掌握√数据缓存API 掌握√头像昵称填写掌握App()函数掌握√【案例5-2】用户登录-准备工作掌握【案例5-2】用户登录-实现用户登录掌握【案例5-2】用户登录-检查用户是否已经登录掌握【案例5-2】用户登录-获取用户的积分掌握【案例5-2】用户登录-获取用户头像和昵称掌握腾讯地图SDK 掌握map组件掌握地图API 掌握√位置API 掌握路由API 掌握√【案例5-3】查看附近美食餐厅-准备工作掌握【案例5-3】查看附近美食餐厅-获取初始数据掌握【案例5-3】查看附近美食餐厅-在页面中显示地图掌握【案例5-3】查看附近美食餐厅-实现跳转到优惠券页面掌握【案例5-3】查看附近美食餐厅-实现查找附近美食餐厅功能掌握WebSocket API 掌握√√SocketTask 掌握√√【案例5-4】在线聊天-准备工作掌握【案例5-4】在线聊天-实现WebSocket连接掌握【案例5-4】在线聊天-实现发送消息功能掌握【案例5-4】在线聊天-实现消息列表展示功能掌握第6章综合项目——“点餐”微信小程序学习单元综合项目——“点餐”微信小程序课时20课时学习目标1.掌握封装网络请求的方法，能够通过封装网络请求简化项目中网络请求的代码2.掌握用户登录的开发，能够独立实现用户登录3.掌握商家首页的开发，能够独立完成商家首页的编写4.掌握菜单列表页的开发，能够独立完成菜单列表页的编写5.掌握购物车的开发，能够独立实现购物车6.掌握订单确认页的开发，能够独立完成订单确认页的编写7.掌握订单详情页的开发，能够独立完成订单详情页的编写8.掌握订单列表页的开发，能够独立完成订单列表页的编写9.掌握消费记录页的开发，能够独立完成消费记录页的编写学习内容知识点掌握程度重点难点【任务6-1】项目开发准备-开发背景了解【任务6-1】项目开发准备-项目模块划分熟悉【任务6-1】项目开发准备-项目初始化掌握【任务6-2】封装网络请求-保存接口地址掌握【任务6-2】封装网络请求-封装网络请求函数掌握√【任务6-2】封装网络请求-请求失败时的处理掌握【任务6-2】封装网络请求-请求成功时的处理掌握【任务6-3】用户登录-判断登录状态掌握√【任务6-3】用户登录-执行登录操作掌握√【任务6-3】用户登录-记住登录状态掌握【任务6-4】商家首页-加载商家首页数据掌握【任务6-4】商家首页-实现商家首页的轮播图区域掌握【任务6-4】商家首页-实现商家首页的中间区域掌握【任务6-4】商家首页-实现商家首页的底部区域掌握【任务6-5】菜单列表页-加载菜单列表页数据掌握【任务6-5】菜单列表页-实现折扣信息区域掌握【任务6-5】菜单列表页-实现菜单列表区域掌握【任务6-5】菜单列表页-实现点击左侧菜单项滚动右侧商品列表掌握√【任务6-5】菜单列表页-实现滚动右侧商品掌握√列表激活左侧菜单项【任务6-6】购物车-实现底部购物车区域掌握【任务6-6】购物车-实现添加商品到购物车掌握√【任务6-6】购物车-实现小球动画效果掌握√【任务6-6】购物车-实现满减优惠信息区域掌握【任务6-6】购物车-实现购物车界面区域掌握【任务6-6】购物车-实现增加和减少商品数掌握量【任务6-6】购物车-实现清空购物车掌握【任务6-7】订单确认页-跳转到订单确认页掌握【任务6-7】订单确认页-加载订单确认页数掌握据【任务6-7】订单确认页-实现页面结构和页掌握面样式【任务6-7】订单确认页-实现订单信息区域掌握【任务6-7】订单确认页-实现备注区域掌握【任务6-7】订单确认页-实现支付区域掌握【任务6-8】订单详情页-加载订单详情页数掌握据【任务6-8】订单详情页-实现取餐信息区域掌握【任务6-8】订单详情页-实现订单详情区域掌握【任务6-8】订单详情页-实现订单信息区域掌握【任务6-9】订单列表页-加载订单列表页数掌握据【任务6-9】订单列表页-实现订单列表页的掌握页面结构【任务6-9】订单列表页-实现订单列表页的掌握页面样式【任务6-9】订单列表页-实现下拉刷新掌握√【任务6-9】订单列表页-实现上拉触底掌握√【任务6-9】订单列表页-跳转到订单详情页掌握【任务6-10】消费记录页-加载消费记录页数掌握据【任务6-10】消费记录页-实现消费记录页的掌握页面结构【任务6-10】消费记录页-实现消费记录页的掌握页面样式【任务6-10】消费记录页-获取头像掌握第7章微信小程序开发进阶学习单元微信小程序开发进阶课时9课时学习目标1.掌握自定义组件的创建方法，能够根据实际需要创建自定义组件2.掌握自定义组件的使用方法，能够使用自定义组件3.掌握使用自定义组件渲染标签栏的方法，能够使用自定义组件渲染标签栏4.掌握Vant Weapp组件库的使用方法，能够使用Vant Weapp组件库快速搭建微信小程序的页面5.掌握WeUI组件库的使用方法，能够使用WeUI组件库快速搭建微信小程序的页面6.掌握navigator组件的使用方法，能够利用navigator组件实现页面跳转7.了解uni-app框架的概念，能够说出使用uni-app框架开发项目的优势8.掌握HBuilder X开发工具的设置，能够完成HBuilder X的基本设置和个性化设置9.掌握uni-app项目的创建方法，能够完成uni-app项目的创建10.熟悉uni-app项目的目录结构，能够解释各个文件和文件夹的作用11.掌握uni-app项目运行至微信小程序的方法，能够将uni-app项目运行至微信小程序12.掌握uni-app项目的全局配置文件，能够对导航栏、底部标签栏、页面的文件路径等进行配置学习内容知识点掌握程度重点难点创建自定义组件掌握√使用自定义组件掌握√使用自定义组件渲染标签栏掌握Vant Weapp组件库掌握【案例7-1】自定义标签栏-准备工作掌握【案例7-1】自定义标签栏-项目初始化掌握【案例7-1】自定义标签栏-定义标签栏数据掌握【案例7-1】自定义标签栏-实现页面布局掌握【案例7-1】自定义标签栏-实现页面逻辑掌握WeUI组件库掌握√navigator组件掌握√√【案例7-2】电影列表-准备工作掌握【案例7-2】电影列表-实现标签栏掌握【案例7-2】电影列表-实现“正在热映”标签页掌握【案例7-2】电影列表-实现“搜索”标签页掌握【案例7-2】电影列表-实现“分类”标签页掌握uni-app框架概述了解HBuilder X开发工具掌握创建uni-app项目掌握uni-app项目的目录结构熟悉将uni-app项目运行至微信小程序掌握√uni-app项目的全局配置文件掌握【案例7-3】待办事项-准备工作掌握【案例7-3】待办事项-实现添加待办事项的掌握功能【案例7-3】待办事项-实现列表区域掌握第8章uni-app项目—— “短视频”微信小程序学习单元uni-app项目—— “短视频”微信小程序课时9课时学习目标1.掌握公共头部的开发，能够独立完成公共头部代码的编写2.掌握导航栏的开发，能够独立完成导航栏代码的编写3.掌握轮播图的开发，能够独立完成轮播图代码的编写4.掌握视频列表的开发，能够独立完成视频列表代码的编写5.掌握视频详情页的开发，能够独立完成视频详情页的编写学习内容知识点掌握程度重点难点【任务8-1】项目开发准备-项目展示掌握【任务8-1】项目开发准备-项目初始化掌握√【任务8-2】公共头部区域-实现公共头部区域的页面结构掌握【任务8-2】公共头部区域-实现公共头部区域的页面样式掌握【任务8-2】公共头部区域-在页面中显示公共头部区域掌握【任务8-3】导航栏区域-加载导航栏数据掌握√【任务8-3】导航栏区域-实现导航栏区域的页面结构掌握【任务8-3】导航栏区域-实现导航栏区域的页面样式掌握【任务8-3】导航栏区域-实现导航栏的切换效果掌握【任务8-4】轮播图区域-加载轮播图数据掌握【任务8-4】轮播图区域-实现轮播图区域的页面结构掌握【任务8-4】轮播图区域-实现轮播图区域的页面样式掌握【任务8-5】视频列表区域-加载视频列表数据掌握【任务8-5】视频列表区域-实现视频列表区域的页面结构掌握【任务8-5】视频列表区域-实现视频列表区域的页面样式掌握【任务8-5】视频列表区域-实现跳转到视频详情页掌握√【任务8-6】视频详情页-实现整体页面结构掌握【任务8-6】视频详情页-实现视频详情区域掌握【任务8-6】视频详情页-实现推荐视频区域掌握【任务8-6】视频详情页-实现评论列表区域掌握四、课时分配五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
(4)《微信小程序开发》教学设计模板 v3.0
《微信小程序开发》教学设计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不合格方法，调节音乐流媒体与界面保持一致。
微信小程序开发教程课件
实战步骤
1
2
1. 在微信开发者工具中创建一个新的小程序项目 。
3
2. 配置项目的新闻API接口和分享接口。
05
微信小程序优化与调试
小程序的性能优化
减少HTTP请求次数
优化图片大小和加载
通过合并、压缩、缓存等方式减少HTTP请 求次数，提高页面加载速度。
对图片进行优化，包括压缩、裁剪、使用 适当的格式等，以减少加载时间和流量消 耗。
小程序的发布流程
提交审核
完成小程序的开发和测试后，需提交 至微信开放平台进行审核。审核通过 后即可发布。
发布版本选择
根据需求选择合适的发布版本，如正 式版、体验版等。
发布设置
设置小程序的可见范围、功能开关等 属性，以确保小程序在发布后的正常 运行。
发布完成
发布完成后，可随时关注小程序的运 营数据和用户反馈，以便持续优化和 改进。
06
微信小程序未来发展趋势 与前景
小程序的发展趋势分析
用户规模持续扩大
随着微信的普及和推广，小程序的用户规模将继续扩大，覆盖更 多的人群。
功能性不断增强
小程序将不断推出新的功能，满足用户多样化的需求，提高用户体 验。
与社交场景结合更紧密
小程序将更加融入微信的社交场景，如朋友圈、群聊等，提供更便 捷的社交服务。
导航组件及API使用方法
navigator
页面导航器，用于页面间的跳转。可设置目标页面的路径、 动画效果等。
redirect
重定向组件，用于页面重定向。可设置重定向的目标页面路 径、动画效果等。
媒体组件及API使用方法
image
01
图片组件，用于显示图片。可设置图片的路径、大小、缩放模
教案2《开发第一个微信小程序》教案
教案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初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。
（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个菜单，针对不同角色的用户提供了不同内容的帮助文档。