《微信小程序开发案例教程》教案 第11课 网络API与文件API（一）.docx

PAGE6

PAGE6

PAGE3

PAGE3

PAGE

PAGE6

PAGE

PAGE3

PAGE

PAGE1

课题

网络API与文件API（一）

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解微信小程序域名配置的相关知识

（2）掌握网络请求、下载与上传文件API的相关知识

素质目标：

提高举一反三，从多个角度思考问题的能力

教学重难点

教学重点：下载与上传文件API的相关知识

教学难点：能够使用网络请求API请求网页

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学设计

第1节课：?课前任务→考勤（2min）→问题导入（5min）→传授新知（38min）

第2节课：问题导入（5min）→任务实施（35min）→课堂小结（3min）→作业布置（2min）

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件完成课前任务

请大家提前熟悉微信小程序的网络API包括网络请求、下载与上传文件、WebSocket通信、mDNS、TCP通信、UDP通信等。

【学生】完成课前任务

通过课前任务，使学生了解所学课程的重要性，增加学生的学习兴趣

考勤

（2min）

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

培养学生的组织纪律性，掌握学生的出勤情况

问题导入

（5min）

【教师】创设情景，并组织学生讨论下列问题：

HTML是2000年代初期服务器的标准响应。可以发送静态HTML作为响应，也可以根据数据创建HTML文档并将其作为响应发送。静态HTML更适合静态信息，对于所有访问你页面的用户来说，静态信息都是相同的。当每个用户拥有不同的数据时，动态HTML会更好地工作。

（1）互联网用户和使用量呈几何级数增长，越来越多的客户端需要与HTML格式不同的格式，这一问题应该怎样处理？

（2）怎样解决HTML页面大小变得巨大，导致服务器上的巨大负担，无法将数据编译为HTML的问题？

【学生】聆听、思考、讨论、小组代表上台回答问题

【教师】总结学生的回答引入要讲的知识，板书“网络API”

通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解使用网络API进行域名配置、网络请求、下载与上传文件的相关知识

一、域名配置

微信小程序为保护用户隐私和数据安全，只允许和配置过的域名进行网络通信。因此，在微信小程序中使用网络API时，需要提前配置通信域名。微信小程序中域名配置的具体步骤如下。

（1）登录微信公众平台。访问微信公众平台（），使用绑定了小程序管理员或开发人员的微信进行扫码登录。

（2）选择域名配置选项。在微信小程序管理后台首页的左侧导航栏中选择“开发管理”选项，进入“开发管理”界面，切换到“开发设置”选项卡，在“服务器域名”区域单击“开始配置”按钮，如图所示。

“服务器域名”区域

（3）配置服务器域名。使用绑定了小程序管理员或开发人员的微信进行扫码验证，进入“配置服务器域名”界面，如图所示。

“配置服务器域名”界面

从上图可以看出，request（网络请求）、uploadFile（上传文件）和downloadFile（下载文件）类型的域名以https://开头；socket（WebSocket通信）类型的域名以wss://开头；udp（UDP通信）类型的域名以udp://开头；tcp（TCP通信）类型的域名以tcp://开头。

?【教师】随机邀请学生回答以下问题：

什么样的ICP备案域名才能保存并提交？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

以网络请求和下载文件为例，成功配置服务器域名并单击“保存并提交”按钮后，“服务器域名”区域会显示配置的服务器域名，如图所示。

配置的服务器域名

二、网络请求

微信小程序使用wx.requestAPI发送HTTPS网络请求，该API传入一个object类型的参数。

属性

类型

必填

说明

url

string

是

请求的网址

data

string/object/ArrayBuffer

否

请求体

header

object

否

请求头，其中不能设置Referer属性，Content-Type属性的值默认为application/json，表示请求体中的数据使用JSON数据格式

method

string

否

请求方法，支持OPTIONS、GET（默认）、HEAD、POST、PUT、DELETE、TRACE、CONNECT

dataType

string

否

返回