微信小程序开发技术-电子教案
微信小程序开发项目教程(慕课版)教案 (19)[14页]
![微信小程序开发项目教程(慕课版)教案 (19)[14页]](https://img.taocdn.com/s3/m/5984ecebb52acfc788ebc92a.png)
第9章莫凡商城支付功能及订单详情页设计9.5 项目实战：任务8—实现我的订单功能1．任务目标通过实现我的订单功能，来巩固订单列表动态渲染、订单状态页签切换的知识。
莫凡商城我的订单列表包含“待付款”列表、“待收货”列表、“已完成”列表和空列表，如图所示。
“待付款”列表“待收货”列表“已完成”列表空列表2．任务实施下面我们一起来实现莫凡商城我的订单功能。
（1）在app.json文件里添加我的订单页面路径“pages/myOrder/myOrder”。
（2）在myOrder.wxml页面文件里进行订单列表布局设计，示例代码如下。
<view class="content"><view class="type"><view class="{{currentT ab==0?'select':'default'}}" data-current="0" data-status="1" bindtap="switchNav">待付款</view><view class="{{currentT ab==1?'select':'default'}}" data-current="1" data-status="3" bindtap="switchNav">待收货</view><view class="{{currentT ab==2?'select':'default'}}" data-current="2" data-status="4" bindtap="switchNav">已完成</view></view><view class="items"><view class="hr"></view><swiper current="{{currentTab}}" style="height:1000px;"><swiper-item><block wx:for="{{orders}}"><view class="goods"><view class="title">莫凡商城</view><view class="line"></view><view class="good" bindtap="toPay" id="{{item.id}}"><view class="pic"><image src="{{item.listPic}}"></image></view><view class="goodInfo"><view class="name">{{item.goodsName}}</view><view class="price"><text class="count">共{{item.num}}件商品</text> ￥{{item.payAmount}}</view></view></view><view class="line"></view><view class="btn"><text bindtap="toPay" id="{{item.id}}">去支付</text><text bindtap="deleteOrder" id="{{item.id}}" data-status="1">删除订单</text></view><view class="line10"></view><view class="hr"></view></view></block><block wx:if="{{orders.length==0}}"><view class="gyg"><view><image src="/pages/images/icon/default.png"></image></view><view class="gygbtn" bindtap="toList">逛一逛</view></view></block></swiper-item><swiper-item><block wx:for="{{orders}}"><view class="goods" ><view class="title">莫凡商城</view><view class="line"></view><view class="good" bindtap="toBuy" id="{{item.goodsId}}"><view class="pic"><image src="{{item.listPic}}"></image></view><view class="goodInfo"><view class="name">{{item.goodsName}}</view><view class="price"><text class="count">共{{item.num}}件商品</text> ￥{{item.payAmount}}</view></view></view><view class="line"></view><view class="btn"><text bindtap="toBuy" id="{{item.goodsId}}">再次购买</text><text bindtap="deleteOrder" id="{{item.id}}" data-status="3">删除订单</text> </view><view class="line10"></view><view class="hr"></view></view></block><block wx:if="{{orders.length==0}}"><view class="gyg"><view><image src="/pages/images/icon/default.png"></image></view><view class="gygbtn" bindtap="toList">逛一逛</view></view></block></swiper-item><swiper-item><block wx:for="{{orders}}"><view class="goods"><view class="title">莫凡商城</view><view class="line"></view><view class="good" bindtap="toBuy" id="{{item.goodsId}}"><view class="pic"><image src="{{item.listPic}}"></image></view><view class="goodInfo"><view class="name">{{item.goodsName}}</view><view class="price"><text class="count">共{{item.num}}件商品</text> ￥{{item.payAmount}}</view></view></view><view class="line"></view><view class="btn"><text bindtap="toBuy" id="{{item.goodsId}}">再次购买</text><text bindtap="deleteOrder" id="{{item.id}}" data-status="4">删除订单</text> </view><view class="line10"></view><view class="hr"></view></view></block><block wx:if="{{orders.length==0}}"><view class="gyg"><view><image src="/pages/images/icon/default.png"></image></view><view class="gygbtn" bindtap="toList">逛一逛</view></view></block></swiper-item></swiper></view></view>（3）在myOrder.wxss样式文件里进行订单列表样式渲染，示例代码如下。
微信小程序开发项目教程(慕课版)教案 (4)[15页]
![微信小程序开发项目教程(慕课版)教案 (4)[15页]](https://img.taocdn.com/s3/m/939c88c40066f5335b81212a.png)
第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）数学运算，示例代码如下。
《微信小程序开发课件》
本课程将带您深入了解微信小程序开发的方方面面，从基础语法到高级技巧， 让您成为一名优秀的小程序开发者。
微信小程序简介
了解微信小程序的概念和功能，以及其在移动应用开发中的优势和应用场景。
开发环境搭建
介绍微信小程序的开发环境要求，包括系统要求、开发工具的安装和注册小 程序开发者账号。
基础语法
学习微信小程序的基础语法，包括WXML、WXSS和JavaScript，为后续的开 发打下坚实的基础。
组件使用
掌握微信小程序常用的组件的使用方法，并学习如何自定义组件满足个性化 需求。
API调用
学习如何使用微信小程序提供的API调用实现数据请求、发送模板消息、定位 等功能。
小程序的生命周期
小程序开发者社区
介绍微信小程序开发者工具、小程序组件库和小程序论坛等相关资源，帮助 开发者更好地进行开发。
资源推荐
分享一些优秀的微信小程序开发资源，包括开发文档、教程、视频和书籍推荐，助您更好地学习和实践。
微信小程序的未来
展望微信小程序的发展前景和更广阔的应用场景，为学员们带来新的思考和 启发。
微信开放能力
深入了解微信小程序开放能力，包括微信支付、微信登录、微信分享等功能的集成和使用。
微信小程序优化
学习如何对微信小程序进行性能优化、代码优化和用户体验优化，提升小程 序的质量。
互动体验设计
介绍微信小程序的互动体验设计原则，并通过实际的设计案例进行分析和探 讨。
ห้องสมุดไป่ตู้
小程序案例解析
通过分析不同领域的小程序案例，如生活服务、电商、社交、教育等，了解其设计和功能特点。
了解微信小程序的生命周期，包括App、Page和Component的创建、初始化 和销毁过程。
重大社2023《微信小程序开发技术》教学课件-知识点1：小程序基础简介
1. 跨平台技术 微信小程序采用了一种跨平台的开发技术，即一套代码可以在不同的操作系统平台上运行，包括iOS和Android系统。这使得开发者无 需为不同系统编写独立的程序，大大提高了开发效率和用户体验。 2. 高性能体验 微信小程序采用了轻量级框架，具有快速启动、快速加载和响应迅速的特点。微信小程序的运行在微信客户端内完成，可以有效地减 少因网络延迟而导致的加载等待时间，用户可以快速访问和使用小程序。 3. 低门槛开发 微信小程序提供了一套完整的开发工具和开发文档，对于开发者来说，只需要掌握一种编程语言，如JavaScript，就可以进行小程序的 开发。这降低了开发的门槛，使更多的开发者能够参与到小程序的开发中来，促进了小程序生态的繁荣发展。
每天成长一点点
《微信小程序开发技术》
每天成长一点点
每天成长一点点
1. 无需下载安装 微信小程序是在微信平台上运行的，用户无需下载安装，即可直接使用。 2. 快速启动和加载 微信小程序采用轻量级的技术架构，具有快速启动和加载的特点。用户点击小程序图标后，可以快速进入小程序界面，而不需要等待漫长的 加载时间。这种快速启动和加载的特点，使得用户可以随时随地进行小程序的使用，并提高了用户的使用体验。 3. 瞬时启动 微信小程序的启动速度非常快，用户只需点击即可迅速进入应用，省去了下载和安装的过程，极大地提高了用户体验的流畅度和便捷性。 4. 界面简洁清晰 微信小程序具有简洁清晰的用户界面设计，借助微信的统一UI风格，用户在使用不同小程序时能够迅速熟悉并上手操作，无需花费额外的时 间去适应不同应用的界面设计。 5. 快速响应 微信小程序具备快速响应的特点，能够实时响应用户的操作，无论是切换页面、下拉刷新还是提交表单等操作，都能够立即完成，给用户带 来流畅的交互体验。 总结起来，微信小程序通过瞬时启动、界面简洁清晰以及快速响应等特点，为用户提供了快捷流畅的使用体验，方便用户随时随地地使用各 种应用功能。
《微信小程序开发项目教程》教学教案(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科技、餐饮、旅游、时政信息、文娱、工具、电商平台、商家自营、商业服务、公益、社交、体育、汽车等。
(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
图片组件，用于显示图片。可设置图片的路径、大小、缩放模
《微信小程序开发图解案例教程》教学教案—第3章教案用微信小程序组件构建UI界面2
《微信小程序开发图解案例教程》教学教案—第3章教案用微信小程序组件构建UI界面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账号。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6.6.1地图组件
6.6.2画布组件
6.7自定义组件
6.7.1组件模板与样式
6.7.2Component构造器
6.7.3组件事件与行为
6.7.4组件间关系
6.7.5抽象节点
小结
1.分别从视图容器、基础内容、表单组件、导航组件、媒体组件、地图与画布及自定义组件这几个方面深入详细地讲解微信小程序的组件。
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
2.1总体技术框架
2.1.1运行机制
2.1.2启动配置
2.1.3目录结构
2.2逻辑层
2.2.1程序注册
2.2.2路由与场景值
2.2.3模块化和API
2.3视图层
2.3.1WXML
2.3.2 WXSS
2.3.3基础组件
2.4组件事件与行为数据缓存插件
2．教学手段：（1）通过操作演示掌握总体技术框架逻辑；（2）通过对总体技术框架的解析使开发者深入学习框架各个部分的特点。
3．教学资料及要求：使用微信小程序的开发工具，实现课程所讲内容。
教学内容
讨论问题：1.微信小程序总体的技术框架有哪些部分？
2.逻辑层由什么语言编写？
3.视图层由什么语言编写？
4.插件的作用？
2、教学手段：通过课上对程序讲解，让开发者掌握JavaScript的语法与JSON的用法，并安排课后练习。
3、教学资料及要求：使用微信小程序的开发工具，实现课程所讲内容。
教学内容
讨论问题：1.JavaScript的三种流程控制都是什么？
2. JavaScript有哪几种模块规范？
3.如何实现JavaScript的类？
教学内容
讨论问题：1.视图容器有几种？分别是什么？
2.小程序组件的基础内容包括什么？
3.表单组件包括哪些？
4.导航组件的作用？
5.媒体组件的作用？
6.如何自定义件？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
6.1视图容器
6.1.1view
6.1.2scroll-view
6.1.2swiper
1.1认识微信小程序
1.1.1发展历程
1.1.2小程序功能
1.1.3小程序的注册
1.2安装开发工具
1.2.1下载与安装
1.2.2开发工具功能介绍
1.2.3常见快捷键
小结
1.了解微信小程序的发展历程、功能和注册方式。
2.熟悉微信小程序的安装开发工具。
3.熟悉微信小程序的开发。
第2章
课时内容
技术框架
授课时间
授课时间
180分钟
课时
4
教学目标
了解WXML标签语言的概念。
掌握数据绑定和页面渲染的使用方法。
掌握事件绑定和常用事件的使用方法。
熟悉模板和引用的使用方法。
教学重点
掌握微信小程序的WXML标签语言。
教学难点
掌握WXML标签语言的语法规范。
掌握WXML标签语言的数据绑定。
掌握WXML标签语言的页面渲染。
《
第1章
课时内容
初识微信小程序
授课时间
90分钟
课时
2
教学目标
了解微信小程序的发展历程。
掌握微信小程序的注册过程。
掌握微信小程序开发工具的安装过程。
教学重点
了解微信小程序的注册及功能。
教学难点
了解微信小程序开发工具的使用方法和技巧。
教学设计
1.教学思路：通过对微信小程序的概述、发展历程及应用的讲解了解微信小程序。
4.如何实现JSON的读取、创建？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
5.1JavaScript基础
5.1.1基本语法
5.1.23种流程控制
5.2模块规范
5.2.1CommonJS规范
5.2.2 AMD规范
5.2.3UMD规范
5.2.4CMD规范
5.2.5ES6规范
5.3面向对象设计
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
8.1人脸识别接口
8.1.1腾讯云人脸识别
8.1.2接口使用
8.1.3云开发
8.2功能设计
8.2.1照片上传
8.2.2人脸检测
8.2.3五官定位
8.2.4人脸融合
8.3开发实现
8.3.1照片上传
8.3.2人脸检测
8.3.3五官定位
掌握WXML标签语言的事件。
掌握WXML标签语言的模板与引用。
教学设计
1.教学思路：通过讲解WXML的语法，让开发者掌握WXML的数据绑定、页面渲染、事件、模板与引用。
2.教学手段：通过课上对程序讲解，让开发者掌握WXML的语法，并安排课后练习。
3.教学资料及要求：使用微信小程序的开发工具，实现课程所讲内容。
教学内容
讨论问题：1.WXML的语法规则是？
2.WXML的特点是？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
3.1语法规范
3.2数据绑定
3.2.1简单绑定
3.2.2运算绑定
3.2.3组合绑定
3.3页面渲染
3.3.1列表渲染
3.3.2条件渲染
3.4事件
3.4.1事件分类
3.4.2事件绑定
3.4.3冒泡与非冒泡事件
6.2基础内容
6.2.1图标组件
6.2.2文本组件
6.2.3富文本组件
6.2.4进度条
6.3表单组件
6.3.1按钮组件
6.3.2选择器组件
6.3.3滚动选择器
6.3.4输入框
6.3.5标签组件
6.4导航组件
6.4.1页面导航
6.4.2自定义组件导航
6.5媒体组件
6.5.1图片组件
6.5.2音频组件
6.5.3视频组件
180分钟
课时
4
教学目标
了解WXML标签语言的概念。
掌握数据绑定、页面渲染的使用方法。
掌握事件绑定和常用事件的使用方法。
熟悉模板与引用的使用方法。
教学重点
了解WXML标签语言。
了解微信小程序的总体技术框架。
教学难点
掌握小程序总体技术框架的开发方法。
掌握插件的开发方法。
教学设计
1．教学思路：（1）通过对技术框架的讲解了解微信小程序的结构；（2）拆解技术框架，深入讲解框架各部分内容。
2.4.1开发插件
2.4.2使用插件
2.4.3插件功能页
小结
1.了解微信小程序的总体框架开始、运行机制、启动配置和目录结构。
2.掌握逻辑层的程序注册、路由与场景值、模块化和API。
3.掌握视图层的标签语言WXML、样式语言WXSS、组件等。
4.掌握如何开发和使用小程序插件。
第3章
课时内容
WXML标签语言
2.掌握小程序组件的基本用法，为后续的学习打下扎实的基础。
第7章
课时内容
小程序API
授课时间
360分钟
课时
8
教学目标
了解小程序API的概念。
掌握小程序API的使用方法。
理解小程序API参数的使用。
教学重点
掌握微信小程序API的使用方法。
教学难点
理解小程序API参数的使用。
教学设计
1、教学思路：通过对不同API的讲解，让开发者了解API的使用方法。
7.5位置API
7.5.1获取位置
7.5.2查看位置
7.5.3地图组件控制
7.6设备API
7.6.1系统信息
7.6.2网络连接
7.6.3加速度计
7.6.4罗盘
7.6.5拨打电话
7.6.6扫码
7.6.7剪贴板
7.6.8蓝牙
7.6.9屏幕
7.6.10手机联系人
7.7界面API
7.7.1交互反馈
7.7.2设置导航相关
2.教学手段：通过对微信小程序开发工具的解析了解开发工具及使用方法。
3.教学资料及要求：从网上下载开发工具并安装、使用，来加深开发者对微信小程序的理解。
教学内容
讨论问题：1.微信小程序的发展历程经历了哪些时间节点？
2.微信小程序的应用领域有哪些？
3.微信小程序开发工具常用的快捷键有哪些？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
2、教学手段：通过课上对程序的讲解，让开发者掌握API的种类及使用方法，并安排课后练习。
3、教学资料及要求：使用微信小程序的开发工具，实现课程所讲内容。
教学内容
讨论问题：1.API的作用是？
2.如何在官方文档中查找自己需要的内容？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
7.1网络API
7.1.1发起请求
7.1.2上传与下载
7.1.3WebSocket
7.2媒体API
7.2.1图片
7.2.2录音
7.2.3音频相关
7.2.4视频相关
7.2.5实时音视频
7.3文件API
7.3.1读取文件信息
7.3.2保存文件
7.3.3打开文件
7.3.4删除文件
7.4数据API
7.4.1存储缓存
7.4.2获取缓存
7.4.3删除和清除缓存
掌握JavaScript语言的基本语法。
掌握面向对象设计。
掌握JSON语法结构。
教学重点
掌握微信小程序的JavaScript交互逻辑。
教学难点
掌握JavaScript的基本语法。
掌握JavaScript的模块规范。
掌握JavaScript的类与对象。
掌握JSON语法。
教学设计