3小时!开发ChatGPT微信小程序
2022-12-21 18:24:21

导读 |上周OpenAI发布了对话语言模型 ChatGPT,相关讨论引爆全网。你是否也迫不及待体验一番?本文特邀作者腾讯云开发者社区作者戴传友从开发环境准备、开发过程、服务器接口、腾讯API网关接入到部署,详细教你如何动手开发一个chatGPT微信小程序。

在《ChatGPT-地表最强AI模型!要消灭人类?》、《算法工程师深度解构ChatGPT技术》两篇文章中,我们分别囊举了ChatGPT的丰富玩法并解析其工作原理。如果你对相关内容感兴趣,欢迎回溯围观~公众号的粉丝朋友们在评论区畅想了更多ChatGP应用实践,也有粉丝表示想要亲自体验下其奇妙之处。此次,我们邀请腾讯云开发者社区开发者由浅入深带你动手开发一个ChatGPT微信小程序,其中会详细介绍开发环境准备、项目实现、服务接口搭建、腾讯API网关接入、部署等环节。
准备工作1)小程序申请在微信中搜索 "ChatGPT"相关的小程序,检查有哪些名字未被占用。选好名字并记录准备144px*144px尺寸的logo,并在微信公众平台官网首页申请微信小程序。一般来说,大概3个小时左右就可以通过审核。2)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)环境介绍导出初始化项目之后,你会看到比较清晰的文件结构。小程序开发跟普通的html、css、js 三剑客用来开发网页没有本质的区别。在微信体系内,wxml、wxss、js 都是 html、css、js的子集。页面的结构在wxml 中写,用到的样式在 wxss中定义;变量和函数以及网络请求 等在 js 中执行。简单说来,小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。这里的 app 是指放在根目录的 app.js、app.json、app.wxss 这三个文件,他们主要负责全局性的逻辑、配置及样式。pages 则是你即将编写的多个页面。多个 pages 之间可以通过官方提供的导航功能进行跳转。每个 page 页面由 page.js、page.json、page.wxml、page.wxss 四个文件组成。其中 WXML 页面类似 HTML 文件,主要负责页面的结构。相比于HTML而言,WXML 更加简单。开发过程中,布局基本上是在使用view和text签,以及其它官方文档上说明的其他标签。但是各位在开发过程中,需要尤其关注官方文档中有关组件的内容。
开发过程1)如何引入 weui 组件
有两种组件接入方式可供选择:通过 useExtendedLib 扩展库 的方式引入。这种方式引入的组件将不会计入代码包大小。通过npm (opens new window)方式下载构建。npm包名为weui-miniprogram。如果你在开发过程中不想花大量时间研究npm且期望快速实现看到效果,又或者受困于小程序商店上架会限制到代码包大小(但是useExtendedLib 扩展库不计入代码包大小),个人建议选择了第一种方式。weui 官方参考文档如下:https://wechat-miniprogram.github.io/weui/docs/quickstart.html2)定义tabbar如果你觉得一个页面展示的信息过于单调,可以在小程序中使用tabbar。按照微信官方提供的自定义tabbar指引,你可以轻松把代码复制到项目工程中。本文把核心步骤代码公示出,更多细节有兴趣可以访问微信官方指引页,地址如下:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
主要步骤:在app.json 中新增 tabbar 配置信息

{    "pages": [        "pages/chat/index",        "pages/index/index",        "pages/logs/logs"    ],    "window": {        "backgroundTextStyle": "light",        "navigationBarBackgroundColor": "#fff",        "navigationBarTitleText": "ChatGPT",        "navigationBarTextStyle": "black"    },    "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接口获取结果。获取数据之后,再展示到页面中的结果展示中。确定了这个基本流程,接下来只要知道这些基本组件在微信小程序里面使用什么标签就好了。更多的细节可以访问 微信小程序的开发文档。

请输入你想要解决的问题:
0/50
回复: {{result}}
{{message}}


(资料图)

4)绑定点击事件在form表单上绑定事件:

然后在对应的js文件里面定义submitForm方法。
5)请求服务器接口

submitForm: 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("ask result-----",rsp.data)            that.setData({                result: rsp.data.data.rsp,                disabled: false,                loading: false,            })        },        complete(d) {            console.log(d)        }    })    console.info("form.submited")        ....其他相关代码},

值得注意的是,上面用到的url需要在小程序中进行域名白名单注册,否则无法被访问到。同时进行注册的域名,需要进行备案。配置地址:登录微信小程序管理后台,在开发管理-服务器域名中进行配置。如下图。
到此,小程序部分配置完成。开发者可以用手机进行预览,或者真机调试。如果此时没有配置域名,也可以通过忽略掉域名强制检查。当然,如果是正式上线审核的话,必须有一个经过备案的域名,且该域名在小程序后台中完成了配置。
服务器接口
上述内容搭建完成后,下一步是配置服务器。本着快速开发的原则,可以借用“现成的轮子”,保障效率第一。各位可以参考现有的api-server脚手架(https://github.com/wytxer/template-node-egg)。之后配置接口名字以及对应的handle。我定义了一个名字叫做 /ask 的接口名字,同时定义了处理ask接口的 handle函数如下。

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: { Authorization: `Bearer ${token}` }  }  const req = {    model: "text-curie-001",    prompt: message,    max_tokens: 2000,    temperature: 0.5  }  console.log("req===",req)  let text = ""  const result = await axios.post("https://api.openai.com/v1/completions", req, {    timeout: 300000,    headers: { Authorization: "Bearer ${token}" }  })    .then(rsp => {      console.log("pdf file result", rsp)      if (rsp.choices) {        text = rsp.choices[0].text      }    })    .catch(err => {      console.log("pdf file error", err)    })  const data = {    rsp: text  }  helper.success(data, "success")}

这里的token就是前面提到的在openai上申请到的token ,注意不要泄漏。腾讯api网关接入及部署1)网关接入考虑到并发能力,频率限制,自动扩容等能力的接入,我选择了腾讯云api网关。如何把api通过腾讯云暴露到外网呢?首先,访问https://console.cloud.tencent.com/apigateway/service?rid=1。其次,新建一个service,并且选择https协议【微信要求https协议】。最后,新建接口ask并且映射到我们自己的服务器。
更多腾讯云api 介绍:https://cloud.tencent.com/developer/article/1877519
2)部署过程在微信开发者工具里面进行代码上传,然后在微信小程序后台里面就能看到上传的版本。建议各位开发者提交审核之前用真机扫描体验一下,有bug及时修复。
确认无误后就可以提交审核了,系统提示1-7个工作日内完成。审核完成后,手动进行 “全量” 或者 “灰度” 发布,你的Chatgpt小程序就能在微信内被搜索到。腾讯工程师技术干货直达:

1、算法工程师深度解构ChatGPT技术

2、耗时减半?腾讯云OCR只做了3件事

3、探秘微信业务优化:DDD从入门到实践

4、10分钟!从架构视角读懂K8s

粉丝福利,后台回复“ChatGPT”获得本篇作者推荐相关学习材料

3小时!开发ChatGPT微信小程序

2022-12-21 18:24:21

库兹马29分奇才射日结束10连败 比尔27+6保罗12+11

2022-12-21 12:38:00

美股三大指数小幅收涨,特斯拉大跌8%,热门中概股走弱

2022-12-21 06:46:33

闰秒终于要取消了!一文详解其来源及影响

2022-12-20 17:34:49

前沿热点:广发期货:焦煤正套持有,关注政策动向

2022-12-20 11:07:21

全球实时:12月19日基金净值:嘉实多利收益债券A最新净值0.8827,跌0.18%

2022-12-20 00:48:13

世界即时:小厨房大空间,集成灶十大品牌帅丰T1-7B大牌好物带回家

2022-12-19 16:33:47

焦点观察:深圳宝安区红星旧工业区旧改规划调整公示

2022-12-19 11:02:38

每日快播:小将拉莫斯“帽子戏法 ”葡萄牙大胜瑞士晋级八强

2022-12-19 02:13:10

【全球播资讯】以岭药业回应连花清瘟安全性质疑:未见肝肾功能损伤不良反应

2022-12-18 15:03:39

微速讯:创业板指午盘跌1.2%,新冠相关板块集体重挫

2022-12-17 16:17:49

5g nsa sa的区别 两者之间有何区别

2022-12-17 02:04:46

国盛智科: 第三届监事会第四次会议决议公告

2022-12-16 17:04:48

要闻速递:福特(F.US)上调F-150 Lightning电动皮卡价格 最低起售价近5.6万美元

2022-12-16 10:46:33

【环球时快讯】北京大兴:她们逆流而上,挺进战“疫”一线

2022-12-15 23:29:40

葵花药业董秘回复:公司在销产品中包括布洛芬产品

2022-12-15 15:41:27

天天速讯:美媒:“一边如厕一边看手机”健康风险升

2022-12-15 10:22:08

德生科技: 2022年股票期权激励计划首次授予激励对象名单

2022-12-14 21:57:50

焦点速读:洛阳市涧西区教体局举办2021年度小学语文学科优质课比赛

2022-12-14 15:05:11

视讯!抓项目 走出去 促消费 河南不断出招发力促发展稳经济

2022-12-14 08:54:32

快看点丨新天科技(300259):独立董事提名人声明-吴跃平

2022-12-13 18:37:09

观点:宁波银行正式启动本外币合一银行结算账户便利化试点服务

2022-12-13 10:54:01

【世界报资讯】唐恬:与癌症抗争十年,和陈奕迅带着《孤勇者》,走进世界杯

2022-12-12 23:24:15

环球今头条!利群股份董秘回复:公司暂无销售抗原检测试剂业务

2022-12-12 15:36:10

徐家汇(002561)12月9日主力资金净卖出3560.47万元

2022-12-12 08:50:03

恒指午间收涨1.69% 恒生科技指数涨1.41%

2022-12-09 12:10:54

3000余处抗联遗迹!吉林省抗联遗址考古取得重要进展

2022-12-08 10:49:20

心脉医疗(688016)12月6日主力资金净买入564.54万元

2022-12-07 07:52:33

研究发现:海龟肠道里有14块塑料 死亡率将达到50%

2022-06-20 15:17:29

研究发现:鳀鱼、沙丁鱼、鲱鱼和小型鱼类的饵料生物正在减少

2022-06-20 15:05:24

研究发现:全球海产品消费量50年里翻了一番

2022-06-20 15:05:24

本土品牌“推”进免税市场 免税行业迎来新机遇

2022-06-20 15:03:32

经营证券期货业务许可证获批 安徽金融业七大类牌照齐全

2022-03-20 14:38:08

多措并举全面排查 咸阳全力做好市第八次党代会安全保障工作

2022-03-20 14:30:43

便民办税:灵源镇大王村为失联多年的特殊村民办理医保

2022-03-20 14:28:01

践行新使命忠诚保大庆:八旬老人“丢失”钱财 彬州民警帮找回

2022-03-20 14:26:38

创新集聚新动能 宁国着力构建汽车零部件产业龙头

2022-03-20 14:22:29

碑林区司法局:护航消费普法先行

2022-03-19 15:55:13

桑树坪矿“四项举措”筑牢矿井环保防线

2022-03-19 15:40:54

两岸专家:美日澳频打“台湾牌”加剧台海局势紧张

2022-01-11 10:33:28

人民网评:金色的盾牌,无悔的坚守

2022-01-11 10:33:28

数字政通:步入无人驾驶新赛道 与主线科技签署战略合作

2022-01-11 10:33:27

珠海高新区新政揽才 最高600万元住房补

2022-01-11 10:33:27

台胞在西安:“抗击疫情需要我们每一个人的力量”

2022-01-11 10:33:26

在京台生体验冰雪乐趣

2022-01-11 10:33:26

澳门未来发展有了新的时间表

2022-01-11 10:33:24

最高检:法治副校长应指导学校落实未成年人保护责任

2022-01-11 10:33:24

检察官担任法治副校长有了“指挥棒”

2022-01-11 10:33:22

全国首份《家庭教育令》来了!督促家长“依法带娃”

2022-01-11 10:33:22

俄军装甲车辆将具备隐身能力

2022-01-11 10:33:21

俄美双边对话 欧盟处境尴尬

2022-01-11 10:33:21

国资委:决战决胜国企改革三年行动 更好发挥国有经济战

2022-01-11 10:33:19

美海岸警卫队盯上濒海战斗舰

2022-01-11 10:33:19

证监会发布标准:统一金融行业对移动互联网应用程序的安

2022-01-11 10:33:17

日本声称以电磁炮加强防御

2022-01-11 10:33:17

2022-01-29 14:39:05

江苏南京:上万块显示屏支撑征兵宣传

2022-01-11 10:33:16

2022-01-29 14:39:05

广东省汕头市组织军地海上联合搜救演练

2022-01-11 10:33:14

2022-01-29 14:37:35

山东省枣庄军分区组织两级首长机关野营拉练

2022-01-11 10:33:08

2022-01-29 14:37:35

83年后,“故乡土”撒在烈士墓前

2022-01-11 10:33:06

岛与岸的守望:你的岛,我的岸

2022-01-11 10:33:04

2022-01-29 14:37:35

长武县税务局:聚焦企业需求 精准精细服务

2022-01-11 10:33:02

集安组织将就哈局势举行视频峰会

2022-01-11 10:33:02

美俄新一轮战略稳定对话前景不容乐观

2022-01-11 10:33:01

质效双优赋能奋进 咸阳市城管执法局召开项目推进会

2022-01-11 10:33:01

第二轮第五批中央生态环境保护督察全面完成督察进驻工作

2022-01-11 10:33:00

小小菜花架起保供连心桥——汉中桃心岛商贸公司在行动

2022-01-11 10:33:00

江秋莲诉刘暖曦生命权纠纷案一审宣判

2022-01-11 10:32:58

2022-01-29 14:37:21

新疆军区某团侦察连官兵边关巡逻

2022-01-11 10:32:54

第78集团军某旅实战化演练设强对手设难情况

2022-01-11 10:32:54

军队医疗待遇保障新规定如期落地有序施行

2022-01-11 10:32:52

2022-01-29 14:37:21

2022-01-29 14:37:21

荣盛发展:2021年签约金额1345.58亿元 同比增长5.87%

2022-01-11 10:32:50

2022-01-29 14:37:09

2022-01-29 14:37:09

证监会发布《关于北京证券交易所上市公司转板的指导意见

2022-01-11 10:32:47

2022-01-29 14:37:09

2022-01-29 14:37:09

奥密克戎高速传播 美国医疗物资供应无法满足病毒检测需求

2022-01-11 10:32:44

原住民控诉美政府在其家园进行“900次核试验”:这是种族

2022-01-11 10:32:42

2022-01-29 14:37:09

2022-01-29 14:37:09

2022-01-29 14:37:09

奥密克戎肆虐 美国公共服务受重创

2022-01-11 10:32:38

公安部1月10日举行新闻发布会

2022-01-11 10:32:38

詹姆斯·韦伯太空望远镜顺利“完全部署”

2022-01-11 10:32:37

日美联合委员会发布声明:驻日美军离开基地将仅限于必要

2022-01-11 10:32:37

【暖心警事】周至警方帮助走失母亲平安回家

2022-01-11 10:32:35

《我们北京见》 来自55位世界冠军的邀约

2022-01-11 10:32:35

世界冠军进校园 小小少年感受运动乐趣

2022-01-11 10:32:34

2022-01-29 14:36:57

时政Vlog丨带你体验冬奥运动员的备战日常

2022-01-11 10:32:32

伊朗制裁51名参与暗杀高级将领苏莱曼尼的美国人

2022-01-11 10:32:32

今年要有序推动绿色低碳发展

2022-01-11 10:32:30