利用ChatGPT协助开发微信小程序，效率果然有提升

整体的效果如下：

样式丑是丑了一点，但是还是能凑合用的。后期会继续美化和加入其他的功能。

开发过程

在此之前我是没有开发小程序的经验的，遇到不会的就直接向ChatGPT提问。要求它为我介绍这个是如何用，这个样式要如何调试。

后端是采用自己比较熟悉的FastAPI框架去做的。主要实现的功能是，接收前端发过来的请求，然后再调用OpenAI的接口，再把接口返回给小程序。关键代码如下

聊天页面是模仿微信聊天界面，发送者消息显示在右边。如下图

当小程序被用户打开，会初始化连接，通过WebSocket方式，请求后端地址。关键代码如下：

onLoad() {
    this.scrollToBottom()
    this.initSocket()
  },

  initSocket() {
    // 连接 WebSocket 服务器
    wx.connectSocket({
      url: 'wss://后端地址/ws',
    })
    ...省略...
  }

用户发送消息处理逻辑，通过调用wx.sendSocketMessage。关键代码如下：

..省略...
  // 发送消息到 WebSocket 服务器
    wx.sendSocketMessage({
      data: JSON.stringify(message),
    })
..省略...

接收后端返回的消息，调用wx.onSocketMessage,关键代码如下：

..省略...
    wx.onSocketMessage((res) => {
      const message = JSON.parse(res.data)
      this.addMessageToList(message)
      this.scrollToBottom()
    })
..省略...

实现的功能是十分简单的，就是通过小程序发送问题，后端调用OpenAI接口，再把接口返回给小程序进行渲染。

部署上线

完成开发后，需要把小程序进行部署上线。先在微信开发工具点击上传,按要求填入版本号和描述。

然后登录小程序管理页面，来到版本管理，把刚才上传的版本，提交审核,审核通过了就可以正常访问小程序了

这个是我的小程序体验版，大家可以体验一下，有什么建议欢迎留言讨论，后期完善后，我会把这个项目开源出去的

注意

微信小程序如何要调用自己的后端地址，需要在小程序后台添加白名单才可以的。

总结

聊天页面功能不是很复杂，但涉及的知识点很多。尤其是前端页面，需要考虑用户体验和页面的整体美感。后面会继续优化页面样式和功能。