如何在3小时内快速开发并上线chatGPT微信小程序

  小程序备案     |      2023-09-30
如何在3小时内快速开发并上线chatGPT微信小程序

5.5 更新最新访问地址,支持私有化部署;欢迎聊天;

免费试用和白色嫖娼

https://chat.gpt4bot.us/

chatGPT是OpenAI开发的聊天机器人模型。它是一种高效的语言模型,可以模拟人类语言行为并与用户自然交互。它的名字来源于它使用的技术——GPT-3架构,第三代生成语言模型。

chatGPT的核心技术是GPT-3架构。它通过使用大量的训练数据来模拟人类的语言行为,并通过语法和语义分析生成人类可以理解的文本。它可以根据语境和语境提供准确、恰当的反应,并模拟各种情绪和语气。这样,用户在与机器交互时就能感受到更加真实、自然的对话体验。

chatGPT的应用场景也非常广泛。它可用于处理多种类型的对话,包括对话机器人、问答系统和客户服务机器人。它还可以用于各种自然语言处理任务,例如文本摘要、情感分析和信息提取。例如,在问答系统中,chatGPT可以提供准确的答案,解决用户的疑问;在客服机器人中,它可以帮助用户解决问题,提供更好的服务体验。

使用chatgpt 时需要注意一些事项。首先,chatgpt 只能根据已经训练好的语料库生成文本,因此无法处理新颖的语言表达。其次,由于chatgpt是一个大规模的语言模型,它需要大量的计算资源来运行,因此在使用时需要注意资源利用率。

此外,chatgpt还支持多种语言,包括英语、中文和日语。这使得它可以应用于跨语言场景,例如翻译机器人。

如果你在这里还是不太明白chatgpt,没关系;不客气地说,到目前为止,上述文本都是由chatGPT生成的。

未来,chatGPT的发展方向将更加多元化。它可能会引入更多的语言模型和深度学习技术,使其性能更加出色。它还可能扩展到更多的应用场景,为更多的人提供服务。

此外,chatGPT还面临一些风险和挑战。这些担忧中最主要的是隐私和安全。由于chatGPT涉及大量个人信息,如果不加以保护,可能会被黑客攻击而泄露。而且chatGPT会模拟人类的语言行为,所以如果不加以控制,也可能会导致一些不良信息的传播。

总的来说,chatgpt 是一个非常有用的工具,可以为许多对话式AI 应用程序提供支持。如果您正在开发会话式人工智能应用程序,那么chatgpt 是一个值得考虑的选择。

## chatGPT能用来干什么,大致感受一下

由于本文主要讲解如何开发chatgpt微信小程序,以及更多使用场景,可以参考文末更多参考文章;

本文大纲分为以下几个部分,阅读大约需要5分钟

## 准备工作## openai 账号申请## 开发环境## 开发流程## 服务器接口## 腾讯API网关接入## 部署

## 准备工作

1.进入微信搜索“chatGPT”相关小程序,看看还有哪些名字可以注册

2.选择名称,申请微信小程序,记录并准备logo,需要满足144px*144px。

3.提交审核后,可以同时准备小程序开发

4、如无意外,耐心等待3小时左右即可通过审核。记得关注申请小程序的微信账号,会有消息提醒。

附小程序申请指南:

https://cloud.tencent.com/developer/article/1358178

## openai 账号申请

由于openai https://openai.com/未在中国开展业务,因此在中国无法正常体验openai提供的服务;

我们可以使用曲线救国来实现账号申请和注册,具体教程大家可以自行搜索;

申请了账号之后,为了在代码中实现openai提供的api,我们还需要申请一个apiKey;这是通过代码访问chatGPT的关键。

账户申请成功后,访问https://beta.openai.com/account/api-keys页面生成apiKey,稍后使用;特别注意保存好这个key,以后要用到,不能再查看。如果丢失了,就只能重新生成。

至此,账户申请已准备就绪。接下来是核心代码的开发流程;

## 开发环境

1.根据您的实际情况,下载对应版本的微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

本地开发环境

2.新建一个小程序,选择最简单的基本模板。麻雀虽小,五脏俱全。目的是去掉复杂的配置,让你快速初步了解微信小程序的代码结构。此时,由于申请的小程序尚未审核通过,可以选择测试号进行开发;

小程序云开发环境

2.1 这里也建议使用云开发环境,因为云开发环境中有很多可以直接套用的现场模板,对于新手使用来说非常友好,而且可以直接修改在现有项目中。立马就能看到效果,对于编程新手来说很有成就感。

更多参考文档可以查看。 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/quickstart.html

3、导出初始化工程后,看起来文件结构也很清晰了;其实小程序的开发和普通用来开发网页的html、css、js三剑客没有本质区别;微信这里的wxml、wxss、js也是html、css,只是js的子集;

页面的结构是用wxml编写的,使用的样式是在wxss中定义的;变量、函数、网络请求都是在js中执行的。

简单来说,小程序由一个描述整个程序的应用程序和多个描述各自页面的页面组成。

这里的app指的是放在根目录下的app.js、app.json、app.wxss这三个文件。他们主要负责全局逻辑、配置和样式。

页数是您要编写的页数。您可以通过官方的导航功能在多个页面之间跳转。

每个page页面由四个文件组成:page.js、page.json、page.wxml、page.wxss。 WXML页面与HTML文件类似,主要负责页面的结构。

但WXML比HTML简单,你的布局基本上是使用视图和文本标签,以及其他官方文档中解释的其他标签。

需要关注官方文档中这部分组件的内容。

## 开发过程

因为我主要写后端代码,所以前端只了解一些html基础知识;我现在只能学习和销售。使用微信官网开发的WEUI组件进行页面展示,不需要自己设计新的组件。我的目的只有一个,那就是尽快推出演示版。旨在让用户体验完整的chatGPT交互流程;稍后可以优化页面。

1. 如何引入 weui 组件

他们提供了两种组件访问方式

A。通过useExtendedLib扩展库导入,这种方式引入的组件不会计入代码包大小。

b.您可以通过npm (opens new window) 下载并构建,npm 包名称为weui-miniprogram

我不想再学习npm了,只是想快速看到效果,而且上小程序商店时代码包大小有限制,并且不包含useExtendedLib扩展库代码包大小,我当然选择了第一种方式。

weui官方参考文档

https://wechat-miniprogram.github.io/weui/docs/quickstart.html

2. 定义tabbar

页面显示的信息太单调。决定在小程序中使用tabbar方法,但是第一次不知道tabbar怎么写。我随便搜了一下,发现了很多结果。想着官网的文档有多么准确和权威,我就进去了,立刻就找到了答案。感觉很丝滑。

按照自定义的tabbar引导将代码复制到项目工程中并不是太容易。这里贴出核心步骤,如果有兴趣了解更多细节,可以访问原网页

主要步骤:在app.json中添加tabbar配置信息

{ 'pages': [ 'pages/chat/index', 'pages/index/index', 'pages/logs/logs' ], 'window': { 'backgroundTextStyle': 'light', 'navigationBarBackgroundColor': '# fff', 'navigationBarTitleText': 'ChatGPT', 'navigationBarTextStyle': '黑色' }, 'style': 'v2', 'sitemapLocation': 'sitemap.json', 'useExtendedLib': { 'weui': true }, 'tabBar': { 'color': '#1485EE', 'selectedColor': '#FF514E', 'list': [ { 'pagePath': 'pages/chat/index', 'text': 'ChatGPT 概述' } , { 'pagePath': 'pages/index/index', 'text': '我的创作' } ] }}复制

值得注意的是,tabBar-list-pagePath的路径需要存在,否则编译器会报错;为了方便大家,我把项目的工程目录截图下来,对比一下这个上下文中的配置信息来查看,比较容易理解;

3. 编写主界面

是一个非常简单的界面,只需要一个输入框,一个询问按钮;核心功能是获取点击询问按钮 时输入框中的值,然后请求服务器的/ask接口获取结果; get 数据后,设置到页面上的结果显示;确定了基本流程后,你只需要知道这些基本组件在微信小程序中使用的是什么标签即可;更多详情请查看微信小程序开发文档

form bindsubmit='submitForm' view class='weui-form' view class='weui-cells__title' 请输入您要解决的问题: /view view class='weui-cells' div class='weui-cell' div class='weui-cell__bd' textarea name='q' class='weui-textarea' placeholder='你能问我今天天气怎么样吗?或者讲个故事' rows='2'/textarea div class='weui-textarea-counter'span0/span/50/div /div /div block wx:if='{{result}}' view class='weui -cells__title'回复:/view view class='usermotto' text class='user-motto'{{result}}/text /view /block /view view class='weui-form__tips-area' block wx:if=' {{downloadUrl}}'视图类='weui-cell'按钮禁用='{{downloaddisabled}}'加载='{{downloadloading}}'加载aria-role='按钮'bindtap='下载'数据文本='{{downloadUrl}}' 立即简单下载/button /view /block block wx:if='{{message}}' view class='weui-form__tips' {{message}} /view /block /view view class='weui-form__opr-area' 按钮aria-role='按钮' class='weui-btn weui-btn_primary' 禁用='{{disabled}}' 加载='{{loading}}' 表单类型='提交'询问ChatGPT /button /view /view /formCopy

4. 绑定点击事件

在form表单上绑定事件

表单bindsubmit='submitForm' /表单副本

然后在对应的js文件中定义submitForm方法;

5. 请求服务器接口

commitForm: function (e) { //通用预检查代码. const that=this wx.request({ url: 'http://youdomain.com/api/xxxx', method: 'post', header: {'content- type': 'application/x-www-form-urlencoded'}, data: data, success(rsp) { console.log('询问结果-----',rsp.data) that.setData({ result: rsp.data.data.rsp, 禁用: false, 加载: false, }) },complete(d) { console.log(d) } }) console.info('form.submited') .其他相关代码},复制

注意,上面使用的url需要在小程序中的域名白名单中注册,否则无法访问;同时,注册的域名需要备案;

配置地址,登录微信小程序管理后台,在开发管理-服务器域名中配置

至此,小程序的配置部分完成,您可以在手机上预览或者在真机上调试;如果此时还没有配置域名,也可以通过忽略域名的方式强制检查。当然,这些只能在开发环境中使用;正式上线审核,必须有注册域名,且已在小程序后台配置;

## 服务器接口

货架都摆好了。自然是需要配置服务器的。我找到了一个现有的api服务器脚手架,https://github.com/wytxer/template-node-egg;初始化项目,简单配置路径即可。能够接收http请求;我感觉还不错。现在已经两个小时了,我得快点了;我花时间查看了一下,该小程序还没有通过审核;

本着快速开发的原则,一切都使用现成的轮子;效率第一;配置接口名称和对应的句柄。

我定义了一个名为/ask的接口名称,并定义了一个handle函数来处理ask接口

async Ask() { const { request, helper, axios, logger }=this.ctx const { message }=request.body logger.info('requset body===', request.body) logger.info('message===', message) .其余相关代码。这里的token就是前面提到的openai上应用的token。 const config={ headers: { 授权: `承载${token}` } } const req={ model : 'text-curie-001', 提示: message, max_tokens: 2000, 温度: 0.5 } console.log('req===',req) let text='' const result=wait axios.post('https://api.openai.com/v1/completions', req, { 超时: 300000, headers: { 授权: '承载${token} ' } }) .then(rsp={ console.log('pdf 文件结果', rsp) if (rsp.choices) { text=rsp.choices[0].text } }) .catch(err={ console. log('pdf 文件错误', err) }) const data={ rsp: text } helper.success (data, '成功')} 复制

这里的token就是上面提到的openai上应用的token,注意不要泄露;

更多玩法请参考openai更多机型、更多接口

参考文档:https://beta.openai.com/docs/api-reference/introduction

## 腾讯api网关接入

考虑到并发能力的接入、频率限制、自动扩容,我选择了腾讯云API网关。

如何通过腾讯云将api暴露到外网?

1.访问https://console.cloud.tencent.com/apigateway/service?rid=1

2、新建服务,选择https协议【微信需要https协议】

3.新建一个接口ask,映射到我们自己的服务器上

完成后,我们就可以通过api网关访问我们自己的服务了,干杯?

更多腾讯云API介绍https://cloud.tencent.com/developer/article/1877519

## 部署过程

这里很简单,直接在微信开发者工具中上传代码,然后就可以在微信小程序后台看到上传的版本;

建议先使用真机扫描体验后再送审;如有Bug,及时修复;

确认无误后即可提交审核,系统提示1-7个工作日完成;但基本上审稿3到4个小时就完成了,喜欢审稿人的高效率;

值得注意的是,需要时刻关注审核动态,因为审核完成后,还需要自己手动进行 “全量” 或者 “灰度” 发布,才能够在小程序里面搜索到;

体验

欢迎大家体验,还有很多bug,请多提宝贵意见;

好了,基本上就讲到这里了,如果还有不太明白的地方,可以通过扫描入群或者留言的方式总能联系到我;

有问题可以一起交流探索。

hope you have a nice day !

最后的最后

这里推荐腾讯云的api网关服务;能够快速实现小程序的后台访问真是太棒了

没有这些基础服务,不可能这么快开发上线chatgpt微信小程序。

谢谢微信,谢谢腾讯云

更多资源

- 如何玩聊天GPT https://mp.weixin.qq.com/s/qQXeKrad41lrvdeYhaRqwQ

- openai api 文档https://beta.openai.com/docs/api-reference/introduction

- 腾讯云API介绍https://cloud.tencent.com/developer/article/1877519

- API脚手架https://github.com/wytxer/template-node-egg;

- weui官方参考文档https://wechat-miniprogram.github.io/weui/docs/quickstart.html