用ChatGPT API给自己的小程序加个AI聊天功能

最近很多做小程序的朋友问我：能不能给小程序加个AI对话功能？用户可以在小程序里直接问问题、查资料，不用跳到别的App。

答案是：可以，而且不难。ChatGPT API是最成熟的方案，一个小功能可能几十块钱的API费用就够了。这篇文章把整个过程拆开讲，从注册到跑通代码，你照着做就行。

一、准备工作

1. 注册OpenAI账号

访问 platform.openai.com，用邮箱注册。需要海外手机号验证，如果没有的话可以在接码平台花几块钱搞定。

2. 获取API Key

登录后左侧菜单点「API Keys」→「Create new secret key」，复制保存好。注册时送的$5赠金够测几百次。

3. 确认小程序有云函数能力

微信/抖音小程序都有云开发能力，建议把小程序的API调用放在云函数里，不要把API Key直接写在前端代码中。

二、后端：写一个ChatGPT API中转接口

小程序不能直接调OpenAI的API（跨域问题），需要一个后端接口做中转。最简单的方案是用Node.js写一个云函数。

云函数代码（Node.js）

// 微信云函数：chatgpt_proxy
const cloud = require('wx-server-sdk')
cloud.init()

// 引入axios用于请求
const axios = require('axios')

exports.main = async (event, context) => {
  const { message } = event  // 用户发来的消息

  try {
    const resp = await axios.post(
      'https://api.openai.com/v1/chat/completions',
      {
        model: 'gpt-4o-mini',
        messages: [
          { role: 'system', content: '你是一个有用的助手。' },
          { role: 'user', content: message }
        ],
        max_tokens: 1024,
        temperature: 0.7
      },
      {
        headers: {
          'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
          'Content-Type': 'application/json'
        },
        timeout: 30000  // 30秒超时
      }
    )

    return {
      code: 0,
      reply: resp.data.choices[0].message.content
    }
  } catch (err) {
    return {
      code: -1,
      error: err.message
    }
  }
}

云函数的环境变量里配好 OPENAI_API_KEY 就行。微信云开发控制台 → 云函数 → 版本管理 → 环境变量。

三、前端：小程序调云函数

小程序的页面代码也很简单：

// pages/chat/chat.js
Page({
  data: {
    messages: [],   // 聊天记录
    input: '',      // 输入框内容
    isLoading: false
  },

  // 发送消息
  async sendMessage() {
    const text = this.data.input.trim()
    if (!text || this.data.isLoading) return

    // 把用户消息加到列表
    this.setData({
      messages: [...this.data.messages, { role: 'user', text }],
      input: '',
      isLoading: true
    })

    // 调云函数
    wx.cloud.callFunction({
      name: 'chatgpt_proxy',
      data: { message: text }
    }).then(res => {
      const reply = res.result.reply
      this.setData({
        messages: [...this.data.messages, { role: 'ai', text: reply }],
        isLoading: false
      })
    }).catch(err => {
      this.setData({
        messages: [...this.data.messages, { role: 'ai', text: '抱歉，出错了，请稍后再试' }],
        isLoading: false
      })
    })
  }
})

页面模板（wxml）就一个聊天界面，上面显示消息列表，底部输入框+发送按钮。样式不复杂，用flex布局就能搞定。

四、费用控制：别让API烧光你的预算

很多人最担心的是费用问题。我来算笔账：

• GPT-4o-mini： 输入$0.15/百万token，输出$0.6/百万token
• 一条20字的提问： 约30个token，成本不到0.000005美元
• 一万次对话： 大约5-8美元（约35-60元人民币）

做个简单的小程序AI功能，月费通常在几十到一百元左右。控制费用的几个方法：

• 用GPT-4o-mini而不是GPT-4o（价格差30倍）
• 限制每条回复的最长token数（建议1024以内）
• 对用户做每日次数限制（比如免费用户每天10次）
• 在OpenAI后台设置月度预算上限

五、踩坑记录

坑1：小程序请求超时

ChatGPT API响应时间不稳定，有时候要10-20秒。小程序云函数默认超时3秒，要手动改成30秒。

坑2：流式输出体验更好

上面给的代码是等待全部返回再一次性显示。更好的体验是用SSE（流式输出），让AI一边生成一边显示，用户不用干等。但流式输出在云函数里实现稍微复杂一点。

坑3：内容过滤

OpenAI有内容安全过滤，敏感话题会拒绝回答。如果你做的是成人向或医疗类的小程序，建议用国产模型（DeepSeek、通义千问）更友好。

六、总结

给小程序加AI聊天功能，核心就三步：注册OpenAI → 写云函数中转 → 前端调用。技术门槛不高，主要花时间在调优用户体验上。

如果你没时间自己搞，或者项目比较复杂（需要流式输出、多轮对话、知识库等），可以找我们做。下面有联系方式。