小程序的网络请求与数据存储

微信小程序作为一种轻量级的应用形态，在网络请求与数据存储方面提供了丰富的API和解决方案。开发者可以通过wx.request实现与服务器的数据交互，同时利用本地存储、数据库或缓存机制管理数据，满足不同场景下的需求。

网络请求的基本使用

微信小程序提供了wx.request方法用于发起HTTP请求。该方法支持GET、POST等多种请求方式，并能够处理JSON、XML等格式的响应数据。以下是一个简单的GET请求示例：

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success(res) {
    console.log('请求成功', res.data)
  },
  fail(err) {
    console.error('请求失败', err)
  },
  complete() {
    console.log('请求完成')
  }
})

在实际开发中，通常会对wx.request进行封装，以便统一处理错误、添加请求头等。例如：

const request = (options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      header: {
        'Content-Type': 'application/json',
        'Authorization': wx.getStorageSync('token')
      },
      success(res) {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: reject
    })
  })
}

请求的并发与限制

小程序对网络请求有一定的限制，开发者需要注意以下几点：

1. 单个小程序同时发起的请求数量不能超过10个
2. 请求的URL必须在小程序管理后台配置的合法域名列表中
3. 默认超时时间为60秒，可以通过timeout参数调整

对于需要处理多个并发请求的场景，可以使用Promise.all：

Promise.all([
  request({ url: 'https://api.example.com/users' }),
  request({ url: 'https://api.example.com/products' })
]).then(([users, products]) => {
  console.log(users, products)
}).catch(err => {
  console.error(err)
})

数据缓存机制

小程序提供了两种主要的数据存储方式：本地存储和缓存。

本地存储

wx.setStorage和wx.getStorage提供了简单的键值对存储，适合存储用户偏好设置等小量数据：

// 同步方式
wx.setStorageSync('key', 'value')
const value = wx.getStorageSync('key')

// 异步方式
wx.setStorage({
  key: 'key',
  data: 'value',
  success() {
    wx.getStorage({
      key: 'key',
      success(res) {
        console.log(res.data)
      }
    })
  }
})

本地存储的限制：

• 单个key最大不超过1MB
• 所有数据存储不超过10MB
• 数据会持久化，除非用户主动删除小程序

缓存系统

对于网络请求的资源，可以使用wx.downloadFile和wx.saveFile实现文件缓存：

wx.downloadFile({
  url: 'https://example.com/image.jpg',
  success(res) {
    wx.saveFile({
      tempFilePath: res.tempFilePath,
      success(savedRes) {
        console.log('文件保存路径', savedRes.savedFilePath)
      }
    })
  }
})

数据库存储

对于需要复杂查询和大量数据存储的场景，小程序提供了云开发数据库和本地数据库两种方案。

云开发数据库

云开发数据库是Serverless解决方案，无需自建服务器：

const db = wx.cloud.database()
db.collection('todos').add({
  data: {
    description: '学习小程序开发',
    done: false
  },
  success(res) {
    console.log('添加成功', res._id)
  }
})

本地数据库

小程序还支持使用SQLite进行本地数据存储，但需要额外配置：

const db = wx.getSystemInfoSync().SDKVersion >= '2.7.0' ? 
  wx.getOpenDatabase({
    name: 'mydb',
    version: '1.0',
    size: 5 * 1024 * 1024
  }) : null

if (db) {
  db.transaction(tx => {
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY, text TEXT)'
    )
  })
}

数据安全与优化

在实际开发中，数据安全性和性能优化是需要重点考虑的因素：

1. 敏感数据应避免存储在本地，使用服务器存储
2. 对于大量数据，考虑分页加载和懒加载
3. 使用数据加密技术保护用户隐私
4. 实现数据同步机制，处理离线场景

// 数据加密示例
const crypto = require('crypto')

function encryptData(data, key) {
  const cipher = crypto.createCipher('aes-256-cbc', key)
  let encrypted = cipher.update(JSON.stringify(data), 'utf8', 'hex')
  encrypted += cipher.final('hex')
  return encrypted
}

function decryptData(encrypted, key) {
  const decipher = crypto.createDecipher('aes-256-cbc', key)
  let decrypted = decipher.update(encrypted, 'hex', 'utf8')
  decrypted += decipher.final('utf8')
  return JSON.parse(decrypted)
}

实际应用场景

以一个新闻类小程序为例，展示网络请求与数据存储的综合应用：

1. 首次加载时从服务器获取新闻列表
2. 将新闻列表缓存到本地
3. 用户点击新闻时，先检查本地是否有完整内容
4. 无网络时显示缓存的新闻
5. 有网络时同步最新数据

// 获取新闻列表
function fetchNewsList() {
  return request({ url: 'https://api.example.com/news' }).then(data => {
    wx.setStorageSync('news_list', data)
    return data
  }).catch(() => {
    return wx.getStorageSync('news_list') || []
  })
}

// 获取单条新闻详情
function fetchNewsDetail(id) {
  const cached = wx.getStorageSync(`news_${id}`)
  if (cached) {
    return Promise.resolve(cached)
  }
  return request({ url: `https://api.example.com/news/${id}` }).then(data => {
    wx.setStorageSync(`news_${id}`, data)
    return data
  })
}

性能监控与调试

小程序提供了多种工具来监控网络请求和数据存储的性能：

1. 使用wx.reportAnalytics上报关键指标
2. 通过小程序开发者工具的Network面板分析请求
3. 使用Storage面板检查本地存储数据
4. 实现自定义的性能日志系统

// 性能监控示例
const perf = {
  start: {},
  mark(name) {
    this.start[name] = Date.now()
  },
  measure(name) {
    const duration = Date.now() - this.start[name]
    wx.reportAnalytics('performance', {
      name,
      duration
    })
    return duration
  }
}

// 使用示例
perf.mark('news_request')
fetchNewsList().then(() => {
  const duration = perf.measure('news_request')
  console.log(`请求耗时: ${duration}ms`)
})

跨平台兼容性

当小程序需要适配不同平台时，网络请求和数据存储可能需要进行特殊处理：

1. 支付宝小程序使用my.request代替wx.request
2. 百度小程序使用swan.request
3. 头条小程序使用tt.request
4. 使用条件编译或适配层处理差异

// 跨平台适配示例
function platformRequest(options) {
  if (typeof wx !== 'undefined') {
    return wx.request(options)
  } else if (typeof my !== 'undefined') {
    return my.request(options)
  } else if (typeof swan !== 'undefined') {
    return swan.request(options)
  }
  throw new Error('不支持的平台')
}

高级特性与未来趋势

随着小程序生态的发展，网络请求和数据存储方面也出现了一些高级特性：

1. WebSocket长连接支持实时数据更新
2. 云函数提供更灵活的服务器端逻辑
3. 增量更新减少数据传输量
4. 预加载策略提升用户体验

// WebSocket示例
const socket = wx.connectSocket({
  url: 'wss://example.com/ws'
})

socket.onOpen(() => {
  console.log('连接已建立')
  socket.send({
    data: JSON.stringify({ type: 'subscribe', topic: 'news' })
  })
})

socket.onMessage((res) => {
  console.log('收到消息', res.data)
})