微信小程序开发图解案例教程电子教案 第5章 微信小程序API

PAGE2PAGE第5章必备的微信小程序API课程名称微信小程序开发图解案例教程项目名称必备的微信小程序API任务名称必备的微信小程序API课时5项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．掌握请求服务器数据API的使用方法。2．掌握文件上传与下载API的使用方法。3．掌握WebSocket会话API的使用方法。4．掌握图片处理API、文件操作API的使用方法。5．掌握数据缓存API、位置信息API、设备应用API的使用方法。6．掌握交互反馈API、用户及授权设置API、微信支付API的使用方法。能力目标1．能够使用API完成微信小程序接口开发工作。2．能够使用API进行接口网络请求。3．能够使用API进行文件操作。素质目标1．培养逻辑分析和推理能力。2．培养快速学习和适应新知识的能力。教学内容1.任务描述本章将系统讲解微信小程序提供的各类常用API，包括请求服务器数据、文件上传与下载、WebSocket会话、图片处理、文件操作、数据缓存、位置信息、设备应用、交互反馈、用户及授权设置和微信支付等，帮助学生掌握通过API调用微信原生能力和与服务器进行数据交互的方法，为后续开发功能完善的微信小程序奠定基础。2.任务展示与实现（1）演示wx.request请求服务器数据、wx.uploadFile上传文件、wx.downloadFile下载文件的全流程。（2）演示WebSocket会话API的创建连接、发送消息、接收消息和关闭连接。（3）演示仿“豆瓣电影”微信小程序的完整开发流程，包括顶部页签切换、海报轮播、电影列表渲染、电影详情页面设计以及网络请求获取数据。（4）学生动手操作：独立完成仿“豆瓣电影”微信小程序的核心功能开发。3.教师讲解本任务涉及的知识点（1）wx.requestAPI的请求配置、服务器域名配置规则、数据类型转换及requestTask对象的使用。（2）wx.uploadFile和wx.downloadFileAPI的属性配置及uploadTask、downloadTask对象的监听方法。（3）WebSocket会话的7个API及其协作流程。（4）图片处理API（wx.chooseMedia、wx.previewImage、wx.getImageInfo、wx.saveImageToPhotosAlbum、pressImage、wx.chooseMessageFile）的使用方法。（5）文件操作API（FileSystemManager.saveFile、getSavedFileList、removeSavedFile、getFileInfo、wx.openDocument）的使用方法。（6）数据缓存API的同步与异步存储、获取、移除和清理方法。（7）位置信息API（wx.getLocation、wx.chooseLocation、wx.openLocation、wx.chooseAddress）的使用方法。（8）设备应用API（网络状态、拨打电话、扫码、剪贴板、屏幕亮度、截屏事件、振动）的使用方法。（9）交互反馈API（消息提示框、模态弹窗、操作菜单、返回询问对话框）的使用方法。（10）用户登录流程、用户信息获取、授权设置API及微信支付API的使用方法。4.任务小结总结各类API的核心功能与适用场景，回顾网络请求的服务器域名配置要求、数据缓存的同步与异步方式选择、用户登录的完整流程，强调微信小程序API在开发中的重要作用。教学重点1.wx.request请求服务器数据API的配置与使用。2.文件上传与下载API的实现方式。3.数据缓存API的同步与异步操作方法。4.位置信息API与交互反馈API的使用。5.用户登录流程及授权设置API。教学难点理解WebSocket会话API的通信机制（创建连接、发送消息、接收消息、关闭连接的全流程），以及微信支付API中商户服务器与微信服务器之间的交互流程（统一下单、签名、回调通知）。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.简述wx.requestAPI中method、data、header三个属性的作用及数据类型转换规则。2.对比说明数据缓存API中同步方式与异步方式的区别，并列举至少4个相关API。3.拓展练习：在仿“豆瓣电影”微信小程序的基础上，为电影详情页面添加数据缓存功能，将已查看过的电影详情缓存到本地，下次进入时优先读取缓存数据。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章将系统讲解微信小程序提供的各类常用API，API是微信小程序与服务器通信、调用设备能力、实现用户交互的核心手段。掌握这些API的使用方法，学生将能够开发出功能丰富、体验良好的微信小程序。【目的】使学生明确本章的学习目标，理解API在微信小程序开发中的重要作用，掌握网络请求、文件操作、数据缓存、位置信息、交互反馈、用户登录等核心API的使用方法，能够独立完成调用API实现业务功能的开发工作。一、请求服务器数据与文件传输API首先介绍wx.requestAPI的属性（url、data、header、method、dataType、responseType、timeout等）和服务器域名配置规则（必须使用HTTPS协议、域名需ICP备案、不能使用IP地址或localhost等），讲解GET和POST两种请求方式的数据类型转换规则，以及requestTask对象的abort、onHeadersReceived、offHeadersReceived、onChunkReceived、offChunkReceived方法的使用。接着讲解wx.uploadFileAPI实现文件上传的方法，包括filePath、name、formData等属性，以及uploadTask对象监听上传进度变化事件的方法。然后讲解wx.downloadFileAPI实现文件下载的方法，包括指定下载存储路径，以及downloadTask对象监听下载进度变化事件的方法。二、WebSocket会话与图片处理API讲解WebSocket会话的7个API及其完整通信流程：使用wx.connectSocket创建会话连接、wx.onSocketOpen监听连接打开、wx.onSocketError监听连接错误、wx.sendSocketMessage发送消息、wx.onSocketMessage接收服务器消息、wx.closeSocket关闭连接、wx.onSocketClose监听连接关闭。接着讲解图片处理API的使用方法：wx.chooseMedia用于拍摄或从相册选择图片和视频，wx.previewImage用于预览多张图片，wx.getImageInfo用于获取图片的宽度、高度、路径等信息，wx.saveImageToPhotosAlbum用于将图片保存到系统相册（需用户授权），pressImage用于压缩图片，wx.chooseMessageFile用于从客户端会话选择文件。三、文件操作与数据缓存API讲解通过wx.getFileSystemManager获取文件管理器对象后实现文件操作的方法：FileSystemManager.saveFile将临时文件保存到本地（存储上限10MB）、FileSystemManager.getSavedFileList获取本地文件列表、FileSystemManager.removeSavedFile删除指定本地文件、FileSystemManager.getFileInfo获取文件大小和摘要信息、wx.openDocument打开文档文件（支持DOC、XLS、PPT、PDF等格式）。然后讲解数据缓存API的同步与异步两种方式：wx.setStorage和wx.setStorageSync用于将数据缓存到本地（单个key最大1MB，所有key上限10MB），wx.getStorage和wx.getStorageSync用于获取本地缓存数据，wx.getStorageInfo和wx.getStorageInfoSync用于获取缓存相关信息，wx.removeStorage和wx.removeStorageSync用于移除指定key的缓存，wx.clearStorage和wx.clearStorageSync用于清理所有缓存数据。四、位置信息、设备应用与交互反馈API讲解位置信息API：wx.getLocation用于获取当前位置的经纬度、速度、精度等信息（需在app.json中配置permission字段），wx.chooseLocation用于打开地图选择位置，wx.openLocation用于通过微信内置地图查看位置，wx.chooseAddress用于获取用户收货地址。讲解设备应用API：wx.getNetworkType获取网络类型，wx.makePhoneCall拨打电话，wx.scanCode扫码，wx.setClipboardData和wx.getClipboardData操作剪贴板，wx.setScreenBrightness和wx.getScreenBrightness控制屏幕亮度，wx.onUserCaptureScreen监听截屏事件，wx.vibrateLong和wx.vibrateShort使手机振动。讲解交互反馈API：wx.showToast显示消息提示框（支持success、loading、none三种图标），wx.showModal显示模态弹窗，wx.showActionSheet显示操作菜单，wx.enableAlertBeforeUnload打开返回询问对话框。五、用户登录、授权与微信支付API讲解微信小程序用户登录的完整流程：使用wx.login获取用户登录凭证code，将code传输到开发者后台服务器，后台服务器通过appid、secret、code请求微信服务器获取openid和session_key，后台服务器生成自己的sessionId并返回给微信小程序客户端，客户端将sessionId保存到Storage缓存中以维护登录状态，使用wx.checkSession检查登录状态是否过期。讲解使用button组件的open-type属性获取用户头像和昵称的方法。讲解wx.authorize发起授权请求、wx.getSetting获取当前授权状态、wx.openSetting打开设置页面的使用方法，以及scope授权的各类权限说明。最后讲解微信小程序支付的实现步骤：获取code→传输给后台→获取openid→调用统一下单接口获取prepay_id→调用签名→使用wx.requestPayment发起支付→后台接收支付通知。【任务一】网络请求与数据缓存练习1.教师演示：创建api项目，使用wx.request请求服务器数据并在控制台输出返回结果，使用wx.setStorage将数据缓存到本地并在Storage窗格中查看，使用wx.getStorage获取缓存数据，使用wx.uploadFile和wx.downloadFile实现文件上传与下载。2.学生动手：独立完成网络请求、数据缓存、文件上传下载的操作，观察请求返回的数据结构和缓存数据的变化。【任务二】开发仿“豆瓣电影”微信小程序1.教师指导：带领学生逐步完成顶部页签切换设计（使用view组件布局3个页签，定义currentTab变量控制选中样式，使用swiper组件实现页签内容滑动切换，通过wx.getSystemInfo获取窗口高度），海报轮播设计（使用swiper组件设置indicator-dots、autoplay、interval、duration等属性实现自动轮播效果），电影列表布局（使用wx.request获取电影列表数据，采用每行3个电影的flex布局方式，绑定loadDetail事件实现点击跳转），电影详情页面设计（在movieDetail页面进行顶部页签布局，展示电影海报、评分、上映日期、类型等基本信息，设计选座购票按钮和我想看、看过了按钮，展示电影介绍和导演信息），项目上传与预览（将项目上传到微信服务器，扫描二维码在手机上预览效果）。2.学生动手：独立完成仿“豆瓣电影”微信小程序的完整开发，包括页签切换、海报轮播、网络请求获取数据、列表渲染、详情页面跳转与展示，最后在模拟器和真机上预览效果。【课堂总结】1.回顾本章学习的各类微信小程序API：请求服务器数据API（wx.request）、文件上传与下载API（wx.uploadFile、wx.downloadFile）、WebSocket会话API（7个）、图片处理API（6个）、文件操作API（5个）、数据缓存API（10个）、位置信息API（4个）、设备应用API（7个）、交互反馈API（5个）、用户及授权设置API、微信支付API。2.总结服务器域名配置的注意事项：必须使用HTTPS/WSS协议、不能使用IP地址或localhost、域名需ICP备案、不能被配置为服务器域名。3.梳理用户登录的完整流程：wx.login获取code→传输到后台→后台请求微信服务器获取openi