小程序怎么获取JSON数据?从基础到实践的完整指南
在小程序开发中,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于前后端数据交互——比如从服务器获取配置信息、API接口返回的结构化数据、本地静态资源文件等,小程序获取JSON数据的方法,是开发动态应用的基础,本文将从本地获取和远程获取两个核心场景出发,结合代码示例和注意事项,帮你彻底搞懂小程序如何获取JSON数据。
本地获取JSON数据:适用于静态配置或小量数据
本地JSON数据通常指存储在小程序项目文件中的静态数据,比如utils/config.json、data/mock.json等,适合存储不会频繁变化的配置信息(如导航栏标题、接口地址、主题色等)。#### 1. 存储JSON文件
在小程序项目根目录下创建data文件夹(或其他自定义文件夹),新建config.json如下:
{
"apiBaseUrl": "https://api.example.com",
"navTitle": "我的小程序",
"themeColor": "#1890ff",
"pages": [
"pages/index/index",
"pages/user/user"
]
}
通过fs模块读取本地JSON文件(需注意:小程序端fs模块能力有限)
小程序官方并未直接提供全局文件读取API,但可通过getFileSystemManager()获取文件管理器,结合wx.getFileSystemManager()读取本地文件(需注意:此方法仅支持小程序基础库2.6.4+,且文件路径需为小程序包内路径,即以开头,指向project.config.json所在的目录)。
示例代码:
// 在页面或自定义模块中读取本地JSON文件
Page({
onLoad() {
const fs = wx.getFileSystemManager();
const filePath = '/data/config.json'; // 文件相对于小程序根目录的路径
// 异步读取文件
fs.readFile({
filePath: filePath,
encoding: 'utf8', // 必须指定编码,否则返回Buffer
success: (res) => {
// 读取成功,解析JSON字符串
const configData = JSON.parse(res.data);
console.log('本地JSON数据:', configData);
this.setData({ config: configData });
},
fail: (err) => {
console.error('读取JSON文件失败:', err);
}
});
}
});
替代方案:将JSON数据直接写入JS文件
考虑到fs模块在小程序端的限制(如仅支持包内路径、无法读取用户本地文件等),更常见的做法是将JSON数据直接定义为JS对象,通过module.exports导出,再在页面中引入。
步骤:
- 创建
utils/config.js:module.exports = { apiBaseUrl: "https://api.example.com", "我的小程序", themeColor: "#1890ff", pages: [ "pages/index/index", "pages/user/user" ] }; - 在页面中引入:
const config = require('../../utils/config.js');
Page({ onLoad() { console.log('配置数据:', config); this.setData({ config }); } });
### 二、远程获取JSON数据:核心是网络请求
实际开发中,大部分JSON数据来自服务器(如API接口、数据库返回数据等),此时需要通过小程序的网络请求API获取。#### 1. 使用`wx.request`发起HTTP/HTTPS请求
`wx.request`是小程序官方提供的核心网络请求API,支持GET/POST等方法,可从服务器获取JSON格式的响应数据。
**基本语法:**
```javascript
wx.request({
url: 'https://api.example.com/data', // 服务器接口地址
method: 'GET', // 请求方法,默认GET
data: { // 请求参数(GET请求会拼接到URL后)
id: 1,
type: 'json'
},
header: { // 请求头,可指定Content-Type等
'Content-Type': 'application/json'
},
success: (res) => {
// 请求成功,res.data为服务器返回的数据(自动解析为JSON对象)
console.log('获取到的JSON数据:', res.data);
this.setData({ serverData: res.data });
},
fail: (err) => {
// 请求失败(如网络错误、服务器500等)
console.error('请求失败:', err);
},
complete: () => {
// 请求结束(无论成功/失败都会执行)
console.log('请求完成');
}
});
远程JSON数据示例:模拟API接口
假设服务器接口https://api.example.com/api/user返回如下JSON数据:
{
"code": 200,
"message": "success",
"data": {
"userId": 1001,
"username": "张三",
"age": 25,
"hobbies": ["阅读", "跑步", "编程"]
}
}
在小程序中获取并解析:
Page({
onLoad() {
this.fetchUserData();
},
fetchUserData() {
wx.request({
url: 'https://api.example.com/api/user',
method: 'GET',
success: (res) => {
if (res.data.code === 200) {
// 解析嵌套的JSON数据
const { userId, username, hobbies } = res.data.data;
console.log(`用户${username}的ID是${userId},爱好:${hobbies.join('、')}`);
this.setData({
userInfo: res.data.data
});
} else {
console.error('接口返回错误:', res.data.message);
}
},
fail: (err) => {
console.error('网络请求失败:', err.errMsg);
}
});
}
});
注意事项:跨域与HTTPS协议
- HTTPS协议:小程序所有网络请求必须使用
https://协议,本地开发可通过“不校验合法域名”在开发者工具中调试(右上角“详情”→“本地设置”勾选选项),但正式上线需配置服务器HTTPS证书。 - 跨域问题:服务器需配置CORS(跨域资源共享)策略,否则请求会被浏览器(或小程序客户端)拦截,在Nginx中配置:
add_header Access-Control-Allow-Origin *; # 允许所有域名跨域(生产环境建议指定具体域名) add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; # 允许的请求方法 add_header Access-Control-Allow-Headers 'Content-Type'; # 允许的请求头
进阶场景:动态获取与数据缓存#### 1. 动态获取:根据用户请求参数获取JSON
根据用户ID获取个人信息,可将参数拼接到URL或请求体中:
// GET请求:参数拼接到URL
wx.request({
url: `https://api.example.com/api/user?id=${userId}`,
success: (res) => { /* ... */ }
});
// POST请求:参数放在请求体
wx.request({
url: 'https://api.example.com/api/user',
method: 'POST',
data: { id: userId },
success: (res) => { /* ... */ }
});
数据缓存:避免重复请求
对于不经常变化的数据(如配置信息、用户基本信息),可通过wx.setStorageSync缓存到本地,减少网络请求,提升用户体验。
// 先尝试从缓存获取数据
const cachedData = wx.getStorageSync('cachedJsonData');
if (cachedData) {
console.log('从缓存获取数据:', cachedData);
this.setData({ cachedData });
} else {
// 缓存不存在,发起网络请求
wx.request({
url: 'https://api.example.com/data',
success: (res) => {
// 请求成功后存入缓存(有效期7天,单位:毫秒)
wx.setStorageSync('cachedJsonData', res.data);
this.setData({ cachedData: res.data });
}
});
}
常见问题与解决方案#### 1. wx.request返回的res.data不是JSON对象?
- 检查服务器返回的
Content-Type是否为application/json,或手动解析:const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
本地JSON文件读取失败?
- 确认文件路径是否正确(需以开头,指向小程序包内路径);
- 若使用
fs.readFile,确保文件编码为utf8; - 优先推荐将JSON数据转为JS对象导出(更简单兼容)。
小程序获取JSON数据的核心路径分为两类:
- 本地数据:通过
fs.readFile(有限制)或直接引入JS模块(推荐);



还没有评论,来说两句吧...