什么是网络API网络 API 是微信小程序提供的网络通信接口集合用于实现客户端小程序与服务端之间的数据交互。它封装了网络请求、文件上传、文件下载等底层网络操作让开发者只需调用简单方法就能完成前后端数据传输、资源交换是小程序实现联网功能的核心基础。学习内容与开发前的准备一、学习内容理解小程序C/S 客户端 / 服务器通信模式掌握wx.request发起网络请求、接收 JSON 数据掌握wx.uploadFile上传文件、图片到本地服务器掌握wx.downloadFile下载文件、图片并在页面显示学会使用任务对象监听进度、中断请求学会本地 phpStudy 环境搭建与调试二、本地环境准备必做安装phpStudyV8.1下载地址https://www.xp.cn/phpstudy建议安装在D盘安装目录一定要记清。启动 Apache和MySQL勾选配置微信小程序不校验合法域名因为现在是将本机PC端临时作为服务器使用此时小程序和服务器的配置就已经完成下面就进行几个简单的案例练习一下。案例1-网络请求前后端交互测试1发送网络请求实现前后端的搭建同时在控制台打印成功链接的信息显示test.php中的信息1.1 新建文件夹在该路径下按下图寻找路径新建miniDemo文件夹用来存放本次测试所需文件 。注phpStudy 是一台「本地模拟服务器」它不是随便读你电脑文件的它只认一个固定目录只有放在这里浏览器和小程序才能通过网址访问到你的 PHP 文件。1.2 新建test.php在miniDemo文件夹下新建test.php文件test.php中存放等待请求的信息。1.3 编写test.php和微信小程序代码一、后端接口test.php?php echo 网络请求成功; echo 清晨起来满满的正能量愿计科(6)班永远积极乐观开心向上; ?二、页面结构index.wxml!--index.wxml-- view发起网络请求并在控制台打印信息/view button typeprimary bind:taphandlerequest点击发送请求/button三、页面逻辑index.jsPage({ data: { }, handlerequest(){ console.log(点击生效) wx.request({ url: http://localhost/miniDemo/test0.php, method: GET, // 请求成功 success(res) { console.log( 控制台打印数据 ); console.log(res.data); // 打印到控制台 }, // 请求失败 fail(err) { console.log(请求失败, err); } }); } });测试2同样方式新建testuser.php从testuser.php获取用户信息JSON 数据同时打印控制台 显示在页面上一、后端接口testuser.php?php // 定义返回数据 $msg[id] 001; $msg[name] 七月一路向阳; $msg[age] 18; // 输出JSON支持中文 echo json_encode($msg, JSON_UNESCAPED_UNICODE); ?二、页面结构index.wxmlview发起网络请求并将数据展示在页面上/view !-- 展示从服务器获取的数据 -- view stylemargin-top:30rpx; font-size:32rpx; viewID{{userInfo.id}}/view view姓名{{userInfo.name}}/view view年龄{{userInfo.age}}/view /view !-- 按钮发起请求 -- button typewarn bindtapgetData发起网络请求/button三、页面逻辑index.jsPage({ data: { // 存放后端返回的用户信息 userInfo: {} }, // 从 test.php 获取数据 getData() { const that this; wx.request({ url: http://localhost/miniDemo/testuser.php, method: GET, // 请求成功 success(res) { console.log( 控制台打印数据 ); console.log(res.data); // 打印到控制台 // 同时赋值到页面显示 that.setData({ userInfo: res.data }); }, // 请求失败 fail(err) { console.log(请求失败, err); } }); }, handlerequest(){ console.log(点击生效) wx.request({ url: http://localhost/miniDemo/test.php, method: GET, // 请求成功 success(res) { console.log( 控制台打印数据 ); console.log(res.data); // 打印到控制台 }, // 请求失败 fail(err) { console.log(请求失败, err); } }); } });案例2-文件上传和下载以图片为例功能图片上传、下载、页面展示2.1 新建文件夹新建images文件在miniDemo文件下新建images文件夹用来存放上传的图片新建upload.php文件按照同样的方式在miniDemo下新建upload.php文件并粘贴如下代码。2.2编写upload.php和微信小程序代码一、upload.php上传接口这里将上传的图片保存到miniDemo文件下的images里?php // 1. 定义图片上传的目录指向服务器的 images 文件夹 $uploadDir images/; // 2. 判断目录是否存在不存在则自动创建0777 是最高权限 if (!file_exists($uploadDir)) { mkdir($uploadDir, 0777, true); } // 3. 获取小程序上传过来的文件数据 $file $_FILES[file]; // 4. 生成唯一的文件名时间戳 随机数防止重名覆盖 $fileName date(YmdHis_) . rand(1000, 9999) . .jpg; // 5. 拼接文件最终存放路径 $targetPath $uploadDir . $fileName; // 6. 将临时文件移动到目标目录完成上传 if (move_uploaded_file($file[tmp_name], $targetPath)) { // 上传成功返回 JSON 格式数据给小程序 echo json_encode([ code 0, msg 上传成功 ]); } else { // 上传失败返回错误信息 echo json_encode([ code -1, msg 上传失败 ]); } ?二、index.wxml图片上传 下载 页面展示view实现图片文件的上传和下载并展示在页面上/view !-- 测试案例2图片上传下载及页面展示 -- button typeprimary bindtapuploadImage上传图片并显示/button image src{{uploadImg}} modewidthFix stylewidth:100%;margin-bottom:30rpx/image button typeprimary bindtapdownloadImage下载图片并显示/button image src{{downloadImg}} modewidthFix stylewidth:100%/image备注图片下载不会在页面展示原因如下wx.downloadFile 下载图片 → 只是下载到 小程序的本地缓存。下载成功 小程序确实拿到了文件但小程序不认识localhost它去找图片 → 找不到 → 返回一个404 错误网页下载成功是假成功你下载到的不是图片是 “找不到图片” 的错误网页把所有 localhost 换成你电脑的局域网 IP真实有效的能访问的IP地址三、index.js对应功能代码Page({ data: { // 存放后端返回的用户信息 userInfo: {}, uploadImg: , // 上传图片路径 downloadImg: // 下载图片路径 }, // 上传图片 uploadImage() { let that this; wx.chooseImage({ count: 1, success(res) { let tempPath res.tempFilePaths[0]; that.setData({ uploadImg: tempPath }); wx.uploadFile({ url: http://localhost/miniDemo/upload.php, filePath: tempPath, name: file, success(res) { console.log(上传成功, res.data); } }) } }) }, // 下载图片 downloadImage() { let that this; wx.downloadFile({ url: http://localhost/miniDemo/images/test.jpg, success(res) { that.setData({ downloadImg: res.tempFilePath }); console.log(下载成功, res.tempFilePath); } }) }, // 从 test.php 获取数据 getData() { const that this; wx.request({ url: http://localhost/miniDemo/testuser.php, method: GET, // 请求成功 success(res) { console.log( 控制台打印数据 ); console.log(res.data); // 打印到控制台 // 同时赋值到页面显示 that.setData({ userInfo: res.data }); }, // 请求失败 fail(err) { console.log(请求失败, err); } }); }, handlerequest(){ console.log(点击生效) wx.request({ url: http://localhost/miniDemo/test.php, method: GET, // 请求成功 success(res) { console.log( 控制台打印数据 ); console.log(res.data); // 打印到控制台 }, // 请求失败 fail(err) { console.log(请求失败, err); } }); } });