第16课：网络请求
进度 0/30
🌐
网络请求
小程序连上全世界
📖知识引入
📡wx.request发请求
小程序和服务器对话的桥梁：wx.request({url, success})，像打电话问服务器「今天天气怎么样」。
🌉API接口是窗口
服务器开放的数据窗口叫API。天气、新闻、成语解释、汇率……网上有大量免费API可以申请使用。
📦JSON数据格式
服务器回话常用JSON，像贴好标签的快递盒：{city:"北京", temp:25}。res.data里就是要拆的包裹。
⏳loading与失败处理
网络需要时间：wx.showLoading告诉用户「正在加载」；请求可能失败，fail里给个提示，别让页面干等。
🔒合法域名白名单
正式环境只能请求在后台配置过的https域名（防止有人偷偷连坏网站）。学习时可在工具勾选「不校验合法域名」。
💡
网络请求三部曲：发请求→等回应→显示数据！
🔍请求天气数据
Page({
data: { temp: '加载中...' },
onLoad() {
wx.request({
url: 'https://api.example.com/weather',
data: { city: 'beijing' },
success: (res) => {
// 拆开服务器寄回的JSON包裹
this.setData({ temp: res.data.temp + '℃' })
},
fail: () => {
wx.showToast({ title: '网络开小差了' })
}
})
}
})一次网络请求的旅程：
小程序 服务器 │ │ │—「北京天气？」—→ │ │ │ 查数据 │←—JSON数据包—— │ │ │ ▼ setData更新页面 显示：25℃ ☀️
JSON像贴标签的盒子： { "city": "北京", "temp": 25, "weather": "晴" }
记住：网络会延迟、会失败， success和fail都要处理， 这才是靠谱的小程序！
🎯小测验
第1题：小程序发网络请求用哪个API？
第2题：服务器返回的res.data里通常是？
第3题：请求失败时应该怎么做？
📝本课知识点
- ✓wx.request连接服务器
- ✓API是服务器开的数据窗口
- ✓JSON是贴标签的数据包裹
- ✓加载提示+失败处理都要有
- ✓正式环境需配置合法域名
第16课完成！继续探索下一课吧 🚀