目录 第五章：小程序的 API 与页面导航 5.1 小程序 API 概述 5.2 界面交互 API （1）wx.showToast() 提示框 （2）wx.showModal() 模态对话框 （3）wx.showLoading() 与 wx.hideLoading() 5.3 页面跳转与导航 示例：跳转页面 5.4 网络请求 示例：wx.request() 发送 POST 请求 5.5 本地数据缓存 （1）写入数据 （2）读取数据 （3）清除数据 5.6 用户信息与授权 5.7 地理位置与地图 （1）获取当前位置 （2）打开地图位置 5.8 设备信息与系统接口 5.9 小结 第五章：小程序的 API 与页面导航 在掌握了小程序的页面结构与组件使用后，本章将带你学习微信小程序的 API（Application Programming Interface，应用程序接口） 。
API 是小程序与微信系统进行交互的核心机制，例如： 显示提示框 访问网络数据 进行页面跳转 操作本地存储 获取用户信息 掌握小程序 API 的使用，意味着你可以开始实现完整的业务逻辑。
5.1 小程序 API 概述
微信提供了数百个 API，可以分为以下几类：
分类功能说明示例
界面交互各种反馈与对话框wx.showToast()、wx.showModal()页面跳转控制页面之间的导航wx.navigateTo()、wx.redirectTo()网络请求调用后台接口wx.request()数据缓存存储和读取本地数据wx.setStorage()、wx.getStorage()媒体操作图片、视频、音频wx.chooseImage()、wx.previewImage()设备获取设备信息wx.getSystemInfo()用户授权获取用户信息或位置信息wx.getUserProfile()地理位置定位、地图wx.getLocation()、wx.openLocation()
5.2 界面交互 API
（1）wx.showToast()提示框
wx.showToast({
title: '操作成功！
',
icon: 'success',
duration: 2000
})
常见
icon
类型：
success
✅ 成功提示
error
❌ 错误提示
loading
⏳ 加载提示
none
空白文字提示
（2）wx.showModal()模态对话框
wx.showModal({
title: '提示',
content: '确认要删除吗？
',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else {
console.log('用户取消操作')
}
}
})
（3）wx.showLoading()与wx.hideLoading()
wx.showLoading({
title: '加载中...'
})
setTimeout(() => {
wx.hideLoading()
}, 2000)
用于在请求或计算时显示加载状态。
5.3 页面跳转与导航 微信小程序提供了多种页面跳转方式，每种方式都有不同的应用场景。
方法是否保留当前页典型场景
wx.navigateTo()✅ 是打开子页面，可返回wx.redirectTo()❌ 否跳转到新页面并关闭当前页wx.switchTab()✅ 是切换到底部 tab 页wx.navigateBack()-返回上一级页面wx.reLaunch()❌ 否关闭所有页面并打开新页面
示例：跳转页面
// index.js
wx.navigateTo({
url: '/pages/detail/detail?id=101'
})
在目标页面获取参数：
// detail.js
Page({
onLoad(options) {
console.log('接收到参数 id =', options.id)
}
})
5.4 网络请求 网络请求是小程序连接后台服务器的重要途径。
示例：wx.request()
wx.request({
url: 'https://example.com/api/products',
method: 'GET',
success(res) {
console.log('请求成功：', res.data)
},
fail(err) {
console.error('请求失败：', err)
}
})
发送 POST 请求
wx.request({
url: 'https://example.com/api/login',
method: 'POST',
data: {
username: 'admin',
password: '123456'
},
success(res) {
console.log('登录成功', res.data)
}
})
注意： 所有外部接口需在微信开发者后台配置「合法域名」。
小程序中不能直接调用
http
，必须使用
https
。
5.5 本地数据缓存 （1）写入数据
wx.setStorage({
key: 'userInfo',
data: { name: '顾欢', age: 21 }
})
（2）读取数据
wx.getStorage({
key: 'userInfo',
success(res) {
console.log('缓存内容：', res.data)
}
})
（3）清除数据
wx.removeStorage({
key: 'userInfo'
})
或清空全部：
wx.clearStorage()
5.6 用户信息与授权 小程序中可以让用户主动授权获取个人信息。
wx.getUserProfile({
desc: '用于完善会员资料',
success(res) {
console.log('用户信息：', res.userInfo)
}
})
提示：
wx.getUserProfile
必须在用户点击事件中触发，否则无效。
5.7 地理位置与地图 （1）获取当前位置
wx.getLocation({
type: 'wgs84',
success(res) {
console.log('纬度:', res.latitude)
console.log('经度:', res.longitude)
}
})
（2）打开地图位置
wx.openLocation({
latitude: 45.75,
longitude: 126.65,
name: '顾欢的小店',
address: '黑龙江省哈尔滨市XX区',
scale: 15
})
5.8 设备信息与系统接口
wx.getSystemInfo({
success(res) {
console.log('系统信息：', res)
}
})
常见返回数据包括：
model
：设备型号
pixelRatio
：像素比
windowWidth
、
windowHeight
：窗口大小
system
：操作系统版本 5.9 小结 本章我们学习了： 微信小程序 API 的分类与常见用法； 弹窗提示与模态框； 页面跳转与参数传递； 网络请求与数据交互； 本地缓存与用户授权； 获取系统与地理信息。
到这里，你已经能够 构建一个能交互、能联网、能导航的完整小程序 。