微信小程序调用云端进行识别

Question

我用微信小程序进行物品识别，调用了百度的常见物体数据库，但是小程序报错，这是为什么呢？

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

你在使用微信小程序调用百度的常见物体识别服务时遇到报错，可能是由以下几个原因导致的。下面我将详细分析可能的原因，并提供解决方案。

---

一、可能的原因及解决方法

1. 跨域问题（CORS）

微信小程序在调用第三方 API 时，必须满足 CORS（跨源资源共享）要求。如果百度接口没有正确配置 Access-Control-Allow-Origin，就会导致请求被浏览器拦截。

解决方案：

• 在后端搭建代理服务器：通过你的服务器中转请求，避免直接从小程序调用百度接口。
• 使用云开发或云函数：如果你使用的是微信云开发，可以通过云函数来调用百度 API，这样就不会出现跨域问题。

示例代码（云函数调用百度API）：

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()

const request = require('request')

exports.main = async (event, context) => {
  const { imageBase64 } = event

  return new Promise((resolve, reject) => {
    request.post(
      'https://aip.baidubce.com/rest/2.0/image-classify/v1/common_obj',
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        form: {
          image: imageBase64,
          access_token: '你的access_token'
        }
      },
      (err, res, body) => {
        if (err) {
          reject(err)
        } else {
          resolve(JSON.parse(body))
        }
      }
    )
  })
}

---

2. 访问权限问题

百度 API 需要正确的 Access Token 和 App Key，如果这些参数不正确或过期，会导致调用失败。

解决方案：

• 确保你已申请了百度 AI 的相关服务，并获取了有效的 client_id 和 client_secret。
• 使用以下方式获取 access_token：

// 获取access_token示例（Node.js）
const axios = require('axios')

async function getAccessToken() {
  const res = await axios.get('https://aip.baidubce.com/oauth/2.0/token', {
    params: {
      grant_type: 'client_credentials',
      client_id: '你的client_id',
      client_secret: '你的client_secret'
    }
  })
  return res.data.access_token
}

---

3. 图片格式或内容不符合要求

百度 API 对上传的图片有格式限制，例如：

• 必须是 JPG/PNG 格式；
• 图片大小不能超过 5MB；
• 图片需为 Base64 编码格式。

解决方案：

• 在小程序中对图片进行处理，确保符合百度 API 的要求。
• 可以使用 wx.compressImage 压缩图片，再转换为 Base64。

wx.chooseImage({
  success(res) {
    const tempFilePath = res.tempFilePaths[0]
    wx.compressImage({
      src: tempFilePath,
      quality: 80,
      success: (res) => {
        const compressedPath = res.tempFilePath
        wx.getBase64FromPath(compressedPath, (base64) => {
          // 将 base64 发送到后端
        })
      }
    })
  }
})

---

4. 网络请求未开启

微信小程序默认不允许发送 HTTP 请求，需要在小程序后台设置中开启相应的域名白名单。

解决方案：

• 登录 微信公众平台。
• 进入 开发管理 > 开发设置 > 服务器域名。
• 添加百度 API 的域名到 request合法域名 列表中。
• 如果是测试阶段，可以使用 开发管理 > 本地调试 功能。

---

5. 错误信息未捕获或未打印

有时小程序报错并不明确，需要你主动捕获错误并打印出来。

解决方案：

• 在小程序中使用 try...catch 捕获异常。
• 使用 console.log() 打印出错误信息，方便排查。

try {
  const result = await wx.request({
    url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/common_obj',
    method: 'POST',
    data: {
      image: imageBase64,
      access_token: accessToken
    }
  })
  console.log(result)
} catch (e) {
  console.error('请求失败:', e)
}

---

二、推荐流程总结

1. 准备百度 API 的 Access Token
2. 在小程序中选择图片并转换为 Base64
3. 通过云函数或代理服务器调用百度 API
4. 处理返回结果并展示给用户
5. 处理可能出现的错误和异常

---

三、推荐工具和资源

| 工具 | 说明 | |------|------| | 微信云开发 | 可以快速搭建后端逻辑，避免跨域问题 | | 百度AI开放平台 | 提供图像识别、语音识别等能力 | | Postman | 测试 API 接口是否可用 |

---

如果你能提供具体的报错信息（如控制台提示的错误代码或文字），我可以进一步帮你定位问题。希望以上内容对你有帮助！