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

2022-12-19 01:48:56

导读 |上周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微信小程序

导读|上周OpenAI发布了对话语言模型ChatGPT,相关讨论引爆全网。你是否也迫不及待体验一番?本文特邀作...

12-19 01:48:56

农发行华蓥市支行多措并举力保年终决算工作顺利开展:热门

一年一度的年终决算工作来临之际,农发行华蓥市支行本着“早准备、早动手”的原则,细化任务清单,明确...

12-18 14:23:25

仙鹤股份:预计在2023年底投产部分浆线和原纸产能-世界新资讯

仙鹤股份(603733)12月14日接待机构调研时表示,公司于2020年底和2021年初已经在广西来宾、湖北石首投资...

12-17 16:12:54

天天快资讯:浪潮软件:拟授出648.5万份股票期权

综业快报消息,12月16日,浪潮软件披露2022年股票期权激励计划(草案),公司拟授予激励对象股票期权648 ...

12-17 01:21:22

横店东磁获44家机构调研:公司计划明年组件出货能在今年的基础上高速增长,今年组件出货约4.5GW左右(附调研问答)

横店东磁12月15日发布投资者关系活动记录表,公司于2022年12月14日接受44家机构单位调研,机构类型为保...

12-16 16:31:06

ST摩登:公司已提交了债权相关材料,债权认定是法院的职权范围

ST摩登(002656)12月15日在投资者关系平台上答复了投资者关心的问题。投资者:请问公司董事会席位里面,...

12-16 10:31:29

建发物业(02156)授出合共705万股限制性股份 环球速递

智通财经APP讯,建发物业(02156)发布公告,于2022年12月15日,该公司董事会已批准根据激励计划向集团不...

12-15 22:57:00

环球实时:春秋航空最新公告:11月旅客周转量环比下降29%

春秋航空公告,11月,公司旅客周转量(按收入客公里计)同比下降45 06%,环比下降29 00%;客座率为72...

12-15 15:34:05

日报:元宇宙时代,人类可尽情释放创造性

参考消息网12月13日报道《日本经济新闻》12月1日刊发题为《80亿人口和虚拟分身经济》的文章,作者是该报...

12-15 10:28:11

2023年frm报名时间出来了吗?想知道的来看!

1、2023年5月:早鸟价:2022 12 1—2023 1 31;标准价:2022 2 1—2023 3 31;2、2023年8月:早...

12-14 21:32:43

当前播报:海南成立营商环境建设厅助力自贸港建设

海南成立营商环境建设厅助力自贸港建设

12-14 15:13:08

国金惠享一年定开基金经理变动:增聘曾省强为基金经理-环球信息

2022年12月14日,国金惠享一年定开(008637)发布公告,增聘曾省强为基金经理,任职日期自2022年12月14...

12-14 08:46:02

环球新动态:生物医药、高端医疗器械双联盟成立

12月12日上午,第八届深圳国际生物医药产业高峰论坛盛大开幕。按照“20+8产业集群一集群、一联盟”部署...

12-13 18:16:12

奥数是什么 奥数和数学有什么区别

奥林匹克竞赛(Olympiad)是匈牙利数学界于1894年为纪念数学科学家埃特沃斯·罗兰(EotvosRoland)而举办的...

12-13 10:50:04

【环球播资讯】招商蛇口2022年第五期36.4亿公司债票面利率确定

12月12日,招商局蛇口工业区控股股份有限公司发布公告称,该公司计划发行36 4亿元公司债券,其中品种一...

12-12 22:32:36

盈康生命董秘回复:圣诺医疗是一家专业从事医疗器械研发、制造、销售和服务于一体的高科技企业_当前热点

盈康生命(300143)12月12日在投资者关系平台上答复了投资者关心的问题。投资者:你们收购的圣诺医疗是不...

12-12 15:15:00

嘉华股份董秘回复:美国市场对大豆蛋白的需求巨大且不断增长,亦是公司的重点海外市场

嘉华股份(603182)12月12日在投资者关系平台上答复了投资者关心的问题。投资者:公司的产品是否有出口美...

12-12 08:24:08

世界快讯:国新文化:未来公司将继续加大在产教融合以及乡村振兴、数字经济等领域职业技能培训方面的布局力度

(原标题:国新文化:未来公司将继续加大在产教融合以及乡村振兴、数字经济等领域职业技能培训方面的布...

12-09 11:21:18

网易与中建八局达成战略合作 联合研发多种工程机械机器人-每日焦点

(原标题:网易与中建八局达成战略合作联合研发多种工程机械机器人)证券时报e公司讯,近日,网易与中建...

12-08 10:16:56

新三板挂牌私募冰火两重天: 有人境外上市,有人遭遇困局_焦点滚动

作者:徐宇[“三板从2016年到现在一直不让挂牌的创投公司再融资,A股也不让创投公司借壳重组,当年投资...

12-07 07:17:35

百科 dnf白兔子是什么

白兔子真名为玛巴斯,是dnf绝版宠物之一。1、主动技能为气功弹,被击中者扣除百分之3的生命值。2、被动...

11-25 13:45:36

知识 河北师范大学自考

河北师范大学,位于河北省会石家庄市,由中华人民共和国教育部与河北省人民政府共建,是一所具有百年历...

11-25 13:43:34

一名本土确诊病例系厦门大学教职工 校方已排查93人均阴性

  中新网11月26日电 据厦门大学微信公众号消息,11月25日18:00,上海市召开新冠肺炎疫情防控新闻发布...

11-26 14:15:17

江西本轮疫情新冠肺炎住院确诊病例“清零”

  (抗击新冠肺炎) 江西本轮疫情新冠肺炎住院确诊病例“清零”  中新网南昌11月26日电 (记者 吴鹏...

11-26 14:15:17

江苏徐州:封控区隔离人员1304人核酸检测均为阴性

  中新网11月26日电 据“徐州发布”微博消息,江苏省徐州市疫情防控应急指挥部发布疫情防控工作进展...

11-26 14:15:16

上海逾5万名筛查对象核酸检测阴性

  (抗击新冠肺炎)上海逾5万名筛查对象核酸检测阴性  中新社上海11月26日电 (记者 陈静)上海25日新...

11-26 14:15:16

“90后”波兰姑娘在中国:想做“小小平民外交官”

  中新网湖州11月26日电(记者 施紫楠)今年是波兰姑娘杰西卡在中国乡村生活的第9年。对于她来说,中国...

11-26 14:15:16

浙大不眠夜:罕见亮起“灿烂星辰”灯 守护师生前行

  中新网杭州11月26日电 题:浙大不眠夜:罕见亮起“灿烂星辰”灯 守护师生前行  作者 谢盼盼 ...

11-26 14:15:16

聚焦2021中国网络媒体论坛展示会 “宝鸡元素”备受追捧

  【聚焦2021中国网络媒体论坛展示会】 “宝鸡元素”备受追捧  11月24日—26日,2021中国网络媒体...

11-26 14:15:15

杭州两名无症状感染者的767名密切接触者核酸为阴性

  中新网杭州11月26日电(张煜欢)25日,杭州市新增两例无症状感染者。26日,杭州市新冠肺炎疫情防控指...

11-26 14:15:15

杭州通报2例无症状感染者处置工作:密接767人核酸均阴性

  中新网11月26日电 据“杭州发布”微信公众号消息,在通报杭州2例无症状感染者后,杭州市加快推进流...

11-26 14:15:14

兰州大学帮扶甘肃山区建“山泉水包”解旱季用水难

  中新网兰州11月26日电 (陈强)“终于有稳定的水源供应了。”看着水管里流出的清澈山泉水,甘肃省平...

11-26 14:15:14

妈妈患病不能自理 女孩休学一年伴其度过最后时光

  这两天,来自单亲家庭的山东青岛女孩刘郦微休学一年陪伴患病妈妈的视频感动无数网友。然而不幸的是...

11-26 14:15:13

辽宁大连新增1例本土确诊病例 系庄河市某小学学生

  中新网大连11月26日电 (记者 杨毅)大连市新冠肺炎疫情防控总指挥部26日发布通告,11月25日0时至24...

11-26 14:15:13

北京富力桃园C区调为低风险 目前全市均为低风险地区

  中新网11月26日电 据北京市卫健委微信公众号消息,截至2021年11月25日,北京市海淀区西三旗街道富...

11-26 14:15:13

山西吉县一在建乡村道路发生塌方 造成3人遇难1人受伤

  记者从山西省临汾市吉县相关部门了解到,11月25日,临汾市吉县一在建乡村道路发生塌方,造成3人遇难...

11-26 14:15:13

学生餐后集体呕吐腹泻 河南封丘:配餐公司停止供餐

  中新网11月26日电 据河南省封丘县政府网站消息,11月25日,有媒体报道封丘县《学生餐后集体呕吐腹...

11-26 14:15:12

杭州无症状感染者居住小区:连夜检测核酸 业主暖心助人

  中新网杭州11月26日电(王逸飞 钱晨菲)11月25日,杭州市通报两名来杭返杭人员诊断为新冠病毒无症...

11-26 14:15:12

苏州已累计筛查19959人

  中新网南京11月26日电 (记者 钟升)苏州市政府新闻办公室25日深夜公布,截至当日22时,苏州市已累...

11-26 14:15:11

为儿子代购救命药被认定贩毒?检方作出决定

  近日,“毒贩母亲”一事引发网友关注。河南郑州一名35岁的母亲李芳(化名)长期代购一款名为氯巴占的...

11-26 14:15:11

内蒙古本轮新冠肺炎疫情本土确诊病例全部治愈出院

  中新网11月26日电 据内蒙古自治区卫健委网站消息,11月25日0—24时,内蒙古自治区报告无新增确诊病...

11-26 14:15:10

江苏11月25日新增本土无症状感染者1例 为徐州市报告

  中新网11月26日电 据江苏省卫健委官方微博消息,11月25日0-24时,江苏无新增确诊病例,新增本土无...

11-26 14:15:10

北京疾控:上海确诊病例在京轨迹公布 涉4个就餐点位

  中新网11月26日电 据北京疾控中心微信公众号消息,11月25日18:00,上海市召开第107场新冠肺炎疫情...

11-26 14:15:10

上海今天六家医院暂停门急诊服务 互联网医院照常运行

  上海瑞金医院、中山医院、同济医院、闵行区中心医院25日均发布消息称,根据国家和上海疫情防控要求...

11-26 14:15:10

走近年轻的视障工程师:优化上网体验 畅通“网络盲道”

  走近年轻的视障工程师——  为视障者点亮智慧生活(体验·新时代·追梦人·“急难愁盼这样解决”)...

11-26 14:15:09

上海公布25日确诊本土病例排查进展 55278名筛查对象核酸阴性

  中新网11月26日电 据“上海发布”微博消息,11月26日,上海市疫情防控工作领导小组办公室发布消息...

11-26 14:15:09

攻克“卡脖子”关键部件的二本“学长”

  每逢求职季,不少应届毕业生心头难免萦绕迷茫与焦虑——学历够高吗?学校够牛吗?  在江苏省常熟...

11-26 14:15:08

辽宁省新增1例本土新冠肺炎确诊病例 为大连市报告

  中新网11月26日电 据辽宁省卫健委网站消息,11月25日0时至24时,辽宁省新增1例本土新冠肺炎确诊病...

11-26 14:15:08

拖欠农民工工资列入失信名单期限内再次欠薪不予信用修复

  规范性文件升格为部门规章拖欠农民工工资联合惩戒力度加大  列入失信惩戒名单期限内再次欠薪不予...

11-26 14:15:08

上海昨日新增本土确诊病例3例 详情公布

  中新网11月26日电 据上海市卫健委官方微博消息,2021年11月25日0—24时,通过口岸联防联控机制,上...

11-26 14:15:08

农发行华蓥市支行多措并举力保年终决算工作顺利开展:热门
仙鹤股份:预计在2023年底投产部分浆线和原纸产能-世界新资讯
天天快资讯:浪潮软件:拟授出648.5万份股票期权
横店东磁获44家机构调研:公司计划明年组件出货能在今年的基础上高速增长,今年组件出货约4.5GW左右(附调研问答)
ST摩登:公司已提交了债权相关材料,债权认定是法院的职权范围
建发物业(02156)授出合共705万股限制性股份 环球速递
环球实时:春秋航空最新公告:11月旅客周转量环比下降29%
日报:元宇宙时代,人类可尽情释放创造性
2023年frm报名时间出来了吗?想知道的来看!
当前播报:海南成立营商环境建设厅助力自贸港建设
国金惠享一年定开基金经理变动:增聘曾省强为基金经理-环球信息
环球新动态:生物医药、高端医疗器械双联盟成立
奥数是什么 奥数和数学有什么区别
【环球播资讯】招商蛇口2022年第五期36.4亿公司债票面利率确定
盈康生命董秘回复:圣诺医疗是一家专业从事医疗器械研发、制造、销售和服务于一体的高科技企业_当前热点
嘉华股份董秘回复:美国市场对大豆蛋白的需求巨大且不断增长,亦是公司的重点海外市场
世界快讯:国新文化:未来公司将继续加大在产教融合以及乡村振兴、数字经济等领域职业技能培训方面的布局力度
网易与中建八局达成战略合作 联合研发多种工程机械机器人-每日焦点
新三板挂牌私募冰火两重天: 有人境外上市,有人遭遇困局_焦点滚动
百科 dnf白兔子是什么
知识 河北师范大学自考
一名本土确诊病例系厦门大学教职工 校方已排查93人均阴性
江西本轮疫情新冠肺炎住院确诊病例“清零”
江苏徐州:封控区隔离人员1304人核酸检测均为阴性
上海逾5万名筛查对象核酸检测阴性
“90后”波兰姑娘在中国:想做“小小平民外交官”
浙大不眠夜:罕见亮起“灿烂星辰”灯 守护师生前行
聚焦2021中国网络媒体论坛展示会 “宝鸡元素”备受追捧
杭州两名无症状感染者的767名密切接触者核酸为阴性
杭州通报2例无症状感染者处置工作:密接767人核酸均阴性
兰州大学帮扶甘肃山区建“山泉水包”解旱季用水难
妈妈患病不能自理 女孩休学一年伴其度过最后时光
辽宁大连新增1例本土确诊病例 系庄河市某小学学生
北京富力桃园C区调为低风险 目前全市均为低风险地区
山西吉县一在建乡村道路发生塌方 造成3人遇难1人受伤
学生餐后集体呕吐腹泻 河南封丘:配餐公司停止供餐
杭州无症状感染者居住小区:连夜检测核酸 业主暖心助人
苏州已累计筛查19959人
为儿子代购救命药被认定贩毒?检方作出决定
内蒙古本轮新冠肺炎疫情本土确诊病例全部治愈出院
江苏11月25日新增本土无症状感染者1例 为徐州市报告
北京疾控:上海确诊病例在京轨迹公布 涉4个就餐点位
上海今天六家医院暂停门急诊服务 互联网医院照常运行
走近年轻的视障工程师:优化上网体验 畅通“网络盲道”
上海公布25日确诊本土病例排查进展 55278名筛查对象核酸阴性
攻克“卡脖子”关键部件的二本“学长”
辽宁省新增1例本土新冠肺炎确诊病例 为大连市报告
拖欠农民工工资列入失信名单期限内再次欠薪不予信用修复
上海昨日新增本土确诊病例3例 详情公布
徐州:临时关闭市区周边6个高速公路入口
X 广告
行业动态
X 广告

Copyright ©  2015-2022 世界植物网版权所有  备案号:琼ICP备2022009675号-1   联系邮箱:435 227 67@qq.com