微信小程序通关秘籍：常用API详解与实战技巧（下）

本篇作为《微信小程序入门学习教程》的下半部分，将继续深入探讨微信小程序中常用的API，并结合实际案例进行讲解。在上篇中，我们学习了小程序的基础架构和部分常用API，本篇将重点关注媒体、文件、网络和位置相关的API，帮助开发者们更好地掌握微信小程序开发技能，实现更复杂、更强大的功能。

媒体 API：图片、音频、视频的妙用

微信小程序提供了丰富的媒体API，用于处理图片、音频和视频。在电商、社交等场景下，这些API的应用非常广泛。例如，商品详情页需要展示多张商品图片，用户可以上传头像，或者播放一段商品介绍视频。

图片API：wx.chooseImage & wx.previewImage

wx.chooseImage 允许用户从本地相册选择图片或拍摄照片。wx.previewImage 则用于预览图片。我们来看一个简单的案例：

// 选择图片
wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
    console.log(tempFilePaths)
    wx.previewImage({
      current: tempFilePaths[0], // 当前显示图片的http链接
      urls: tempFilePaths // 需要预览的图片http链接列表
    })
  }
})

实战避坑：

• 图片上传到服务器之前，务必进行压缩，避免占用过多的服务器带宽和存储空间。可以使用canvas进行图片压缩，或者直接使用云开发的云存储。
• 注意处理用户取消选择图片的情况。
• 如果需要在多个页面之间共享图片，可以使用全局变量或本地存储。

音频API：wx.createInnerAudioContext

wx.createInnerAudioContext 用于创建内部音频播放器。我们可以使用它来播放背景音乐、语音消息等。

const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = 'http://example.com/music.mp3' // 你的音频文件地址
innerAudioContext.onPlay(() => {
  console.log('开始播放')
})
innerAudioContext.onError((res) => {
  console.log(res.errMsg)
  console.log(res.errCode)
})

实战避坑：

• 音频文件格式尽量使用MP3，兼容性较好。
• 注意处理音频加载失败、播放出错等情况。
• 在页面卸载时，需要销毁innerAudioContext，释放资源。

文件 API：本地文件操作与云存储

微信小程序提供了文件API，用于操作本地文件。同时，也可以使用云开发提供的云存储服务，将文件存储在云端。

本地文件API：wx.saveFile & wx.getFileInfo

wx.saveFile 用于保存文件到本地。wx.getFileInfo 用于获取文件信息。

wx.downloadFile({
  url: 'http://example.com/example.pdf', // 示例文件URL
  success: function (res) {
    if (res.statusCode === 200) {
      wx.saveFile({
        tempFilePath: res.tempFilePath,
        success: function (res) {
          var savedFilePath = res.savedFilePath
          console.log('文件保存成功：', savedFilePath)

          wx.getFileInfo({
            filePath: savedFilePath,
            success: function (res) {
              console.log('文件大小：', res.size)
              console.log('文件类型：', res.type)
            },
            fail: function (res) {
              console.error('获取文件信息失败：', res)
            }
          })
        },
        fail: function (res) {
          console.error('保存文件失败：', res)
        }
      })
    }
  },
  fail: function (res) {
    console.error('下载文件失败：', res)
  }
})

实战避坑：

• 小程序对本地存储空间有限制，需要合理使用。
• 注意处理文件读写权限问题。

云存储：微信云开发最佳实践

微信云开发提供了云存储服务，可以方便地存储和管理文件。在小程序中，可以使用wx.cloud.uploadFile上传文件，使用wx.cloud.downloadFile下载文件，使用wx.cloud.deleteFile删除文件。

wx.chooseImage({
  count: 1,
  success: res => {
    const filePath = res.tempFilePaths[0]
    const cloudPath = 'my-image/' + Date.now() + filePath.match(/\.[^.]+?$/)[0] // 云端文件路径
    wx.cloud.uploadFile({
      cloudPath,
      filePath,
      success: res => {
        console.log('[上传文件] 成功：', res)
        // 获取文件fileID
        const fileID = res.fileID
      },
      fail: e => {
        console.error('[上传文件] 失败：', e)
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  },
})

使用云存储可以减轻服务器压力，提高文件访问速度。配合云函数使用，可以实现更复杂的业务逻辑。 熟悉Nginx等服务器配置的同学都知道，使用CDN加速静态资源是常用的优化手段，云存储可以理解为微信提供的官方CDN。

网络 API：发起 HTTP 请求

wx.request 是微信小程序中用于发起 HTTP 请求的 API。我们可以使用它来获取服务器数据、提交表单等。

wx.request({
  url: 'https://example.com/api/data', // 示例接口地址
  method: 'GET',
  data: {
    id: 123
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  },
  fail (res) {
    console.error(res)
  }
})

实战避坑：

• 注意配置合法域名，否则无法发起请求。可以在小程序管理后台配置 request 合法域名。
• 处理请求超时、网络错误等情况。
• 注意数据安全，对敏感数据进行加密。
• 如果需要频繁发起请求，可以使用封装好的HTTP请求库，例如flyio。

位置 API：获取用户地理位置

wx.getLocation 用于获取用户的地理位置。我们可以使用它来实现地图定位、附近商家推荐等功能。

wx.getLocation({
  type: 'wgs84',
  success (res) {
    const latitude = res.latitude
    const longitude = res.longitude
    console.log(latitude, longitude)
  },
  fail (res) {
    console.error(res)
  }
})

实战避坑：

• 需要用户授权才能获取地理位置。
• 注意处理用户拒绝授权的情况。
• 可以使用wx.openLocation打开地图，显示指定位置。

总结

本篇《微信小程序常用API（下）——知识点详解 + 案例实战(5)》中，我们深入学习了微信小程序中媒体、文件、网络和位置相关的API，并结合实际案例进行了讲解。掌握这些API，可以帮助你开发出更加丰富、更加强大的微信小程序。在实际开发中，还需要不断学习和实践，才能真正掌握微信小程序开发技能。如果需要处理高并发场景，例如秒杀活动，仅仅依靠小程序端的能力是不够的，需要服务端配合进行流量控制和数据一致性保证。

微信小程序开发是一个持续学习的过程，希望本文能对你的学习有所帮助。