微信小程序的性能表现和用户操作体验高度依赖网络请求的效率，而请求参数的设计是否合理是影响请求效率的核心因素之一。不少开发者在开发过程中只关注请求是否能拿到数据，却忽略了参数规范对性能的影响，最终导致小程序出现加载慢、操作卡顿等问题。
请求参数不规范带来的性能问题
未规范化的请求参数通常会引发以下几类性能问题：
- 冗余参数过多，每次请求都携带不必要的字段，增加传输数据量，延长请求耗时
- 参数格式不统一，比如时间参数有的传时间戳有的传字符串，需要额外做转换处理，增加客户端和服务器端的运算开销
- 参数未做压缩处理，大体积参数会占用更多带宽，在弱网环境下表现尤为明显
- 重复请求携带相同参数，没有做缓存处理，无意义的请求消耗资源
请求参数规范化的具体实践方法
1. 精简必要参数，去除冗余字段
发起请求前先梳理业务需要的参数，只传递接口必需的字段，避免把整个页面数据对象直接作为请求参数。比如获取商品列表时，只需要传递页码、每页数量、分类ID等必要参数，不需要把当前页面的滚动位置、用户临时操作状态等无关数据一起传过去。
以下是精简参数的代码示例：
// 不规范的参数传递，携带冗余字段
const pageData = {
pageNum: 1,
pageSize: 10,
categoryId: 2,
scrollTop: 120, // 冗余字段，接口不需要
tempSelectId: 5, // 冗余字段，接口不需要
userInfo: { name: 'test', age: 20 } // 冗余字段，接口不需要
}
wx.request({
url: 'https://ipipp.com/api/goods/list',
data: pageData,
success(res) { console.log(res) }
})
// 规范化后的参数传递，只保留必要字段
const requestParams = {
pageNum: 1,
pageSize: 10,
categoryId: 2
}
wx.request({
url: 'https://ipipp.com/api/goods/list',
data: requestParams,
success(res) { console.log(res) }
})2. 统一参数格式，减少转换开销
提前约定好各类参数的统一格式，比如时间统一用时间戳，布尔值统一用0和1表示，避免不同场景下参数格式不一致需要额外做转换。可以在项目里封装统一的参数处理方法，所有请求都经过这个方法处理后再发出。
统一参数格式的封装示例：
// 参数格式化工具函数
const formatRequestParams = (params) => {
const formatted = {}
for (let key in params) {
const value = params[key]
// 时间类型统一转为时间戳
if (value instanceof Date) {
formatted[key] = value.getTime()
}
// 布尔值统一转为0/1
else if (typeof value === 'boolean') {
formatted[key] = value ? 1 : 0
}
// 其他类型直接保留
else {
formatted[key] = value
}
}
return formatted
}
// 使用封装后的方法处理参数
const rawParams = {
startTime: new Date('2024-01-01'),
isOnline: true,
userId: 1001
}
const finalParams = formatRequestParams(rawParams)
wx.request({
url: 'https://ipipp.com/api/order/list',
data: finalParams,
success(res) { console.log(res) }
})3. 对大体积参数做压缩处理
当请求参数包含较多文本或者复杂对象时，可以先对参数做压缩再传输，减少数据体积。小程序端可以使用zlib等压缩库处理参数，服务器端对应做解压处理，不过要注意压缩和解压本身也会消耗一定运算资源，只对体积超过1KB的参数做压缩更合理。
4. 相同参数请求做缓存处理
对于相同参数、返回结果变化不频繁的请求，可以在本地做缓存，短时间内再次发起相同请求时直接返回缓存结果，避免重复发起网络请求。可以通过参数序列化后的哈希值作为缓存key，设置合理的缓存过期时间。
请求缓存的实现示例：
// 缓存对象
const requestCache = {}
// 缓存过期时间，单位毫秒，这里设置为5分钟
const CACHE_EXPIRE = 5 * 60 * 1000
const requestWithCache = (url, params) => {
// 生成缓存key，序列化参数后做简单哈希
const paramStr = JSON.stringify(params)
const cacheKey = `${url}_${paramStr}`
const now = Date.now()
// 检查缓存是否存在且未过期
if (requestCache[cacheKey] && (now - requestCache[cacheKey].time) < CACHE_EXPIRE) {
return Promise.resolve(requestCache[cacheKey].data)
}
// 无缓存则发起请求
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: params,
success(res) {
// 存入缓存
requestCache[cacheKey] = {
data: res.data,
time: now
}
resolve(res.data)
},
fail(err) {
reject(err)
}
})
})
}
// 使用带缓存的请求方法
requestWithCache('https://ipipp.com/api/config', { type: 'base' }).then(data => {
console.log('获取配置数据', data)
})规范化后的效果验证
可以通过微信开发者工具的性能面板对比优化前后的请求耗时和数据传输量。通常做好请求参数规范化后，单个请求的耗时可以降低30%到50%，弱网环境下提升效果更明显，小程序的页面加载速度和操作响应速度都会有直观的提升。
需要注意的是，参数规范化需要和接口设计配合，提前和后端约定好参数规范，才能最大化发挥优化的效果，避免前端做了参数处理但后端不兼容的情况。