图片

导读 | 上星期OpenAI发布了对话言语模型 ChatGPT，相关评论引爆全网。你是否也迫不及待体会一番？本文特邀作者腾讯云开发者社区作者戴传友从开发环境准备、开发进程、服务器接口、腾讯API网关接入到布置，详细教你怎么着手开发一个chatGPT微信小程序。

在《ChatGPT-地表最强AI模型！要消除人类？》、《算法工程师深度解构ChatGPT技能》两篇文章中，咱们分别囊举了ChatGPT的丰厚玩法并解析其工作原理。假如你对相关内容感兴趣，欢迎回溯围观～大众号的粉丝朋友们在评论区畅想了更多ChatGP运用实践，也有粉丝表明想要亲身体会下其美妙之处。此次，咱们约请腾讯云开发者社区开发者由浅入深带你着手开发一个ChatGPT微信小程序，其中会详细介绍开发环境准备、项目完结、服务接口建立、腾讯API网关接入、布置等环节。

图片

图片

准备工作

1）小程序恳求

在微信中查找 “ChatGPT”相关的小程序，查看有哪些姓名未被占用。选好姓名并记载准备144px*144px尺度的logo，并在微信大众平台官网首页恳求微信小程序。一般来说，大概3个小时左右就能够经过审阅。

图片

2）openai 账号恳求

OpenAI（ openai.com/）目前不在中国区域展开…

恳求到账号之后，为了在代码中实对OpenAI 供给的 api ，咱们还需求恳求一个apiKey。这是经过代码拜访ChatGPT的关键所在。

账号恳求成功后，拜访beta.openai.com/account/api…

图片

至此，根本准备工作已悉数完结，接下来将为各位开发者讲述中心代码的开发流程。

图片

开发环境

1）新建小程序

首要，根据自己的实际情况下载对应版别的微信开发者工具。下载地址如下：

developers.weixin.qq.com/miniprogram…

其次，我个人主张**新建小程序时挑选最简略的基础模版，并勾选运用微信云开发环境。**去除冗杂的装备以便你能更快速的对微信小程序的代码结构有开始了解。我成文时，由于恳求的小程序还没有审阅经过，所以挑选下述测验号用来进行开发。

图片

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 官方参考文档如下：

wechat-miniprogram.github.io/weui/docs/q…

2）界说tabbar

假如你觉得一个页面展现的信息过于单调，能够在小程序中运用tabbar。依照微信官方供给的自界说tabbar指引，你能够轻松把代码复制到项目工程中。本文把中心进程代码公示出，更多细节有兴趣能够拜访微信官方指引页，地址如下：

developers.weixin.qq.com/miniprogram…

首要进程： 在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接口获取成果。获取数据之后，再展现到页面中的成果展现中。

确认了这个根本流程，接下来只要知道这些根本组件在微信小程序里边运用什么标签就好了。更多的细节能够拜访 微信小程序的开发文档。

<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"><span>0</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}}">
                    <view class="weui-cell">
                        <button disabled="{{downloaddisabled}}" loading="{{downloadloading}}" load aria-role="button" bindtap='download' data-text="{{downloadUrl}}" plain>立即下载
                        </button>
                    </view>
                </block>
                <block wx:if="{{message}}">
                    <view class="weui-form__tips">
                        {{message}}
                    </view>
                </block>
            </view>
            <view class="weui-form__opr-area">
                <button aria-role="button" class="weui-btn weui-btn_primary" disabled="{{disabled}}" loading="{{loading}}" form-type="submit"> 问询ChatGPT
                </button>
            </view>
        </view>
    </form>

4）绑定点击事情

在form表单上绑定事情：

<form bindsubmit="submitForm"> </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脚手架（github.com/wytxer/temp…

之后装备接口姓名以及对应的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经过腾讯云暴露到外网呢？首要，拜访console.cloud.tencent.com/apigateway/…

图片

图片

更多腾讯云api 介绍 ：

cloud.tencent.com/developer/a…

2）布置进程

在微信开发者工具里边进行代码上传，然后在微信小程序后台里边就能看到上传的版别。主张各位开发者提交审阅之前用真机扫描体会一下，有bug及时修正。

图片

确认无误后就能够提交审阅了，体系提示1-7个工作日内完结。审阅完结后，手动进行 “全量” 或许 “灰度” 发布，你的Chatgpt小程序就能在微信内被查找到。

腾讯工程师技能干货直达：

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

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

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

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

粉丝福利，大众号后台回复“ChatGPT”取得本篇作者引荐相关学习材料

图片

阅览原文