3小時！開發ChatGPT微信小程序
導讀 |上周(zhou)OpenAI發布(bu)了對話語言(yan)模型 ChatGPT，相關討論引爆全網。你是(shi)否也迫不(bu)及待體驗一番(fan)？本文特邀(yao)作者騰訊云開發者社區(qu)作者戴傳友從開發環境準(zhun)備、開發過程、服務器(qi)接口、騰訊API網關接入到部署，詳(xiang)細教你如(ru)何動手開發一個chatGPT微信小程序。
在《ChatGPT-地(di)表最強(qiang)AI模型！要消(xiao)滅人類(lei)？》、《算(suan)法工(gong)程師深度解構ChatGPT技術》兩(liang)篇文章中，我(wo)們分別囊舉了(le)ChatGPT的(de)豐(feng)富玩法并解析其工(gong)作原理。如果你對(dui)相關(guan)內容感興趣，歡迎回溯圍觀～公眾號的(de)粉(fen)絲(si)(si)朋友們在評論區暢想了(le)更多ChatGP應用實踐，也有粉(fen)絲(si)(si)表示想要親自體驗(yan)下其奇妙之處。此次(ci)，我(wo)們邀請騰訊云開發者社區開發者由(you)淺入深帶你動手開發一個(ge)ChatGPT微信(xin)小程序，其中會(hui)詳細介(jie)紹開發環境(jing)準備、項目實現、服務(wu)接口(kou)搭(da)建、騰訊API網關(guan)接入、部署等環節。
準備工作
1）小程序申請
在(zai)微信中搜(sou)索 "ChatGPT"相(xiang)關的小(xiao)程(cheng)序(xu)，檢查有哪(na)些名字未被占用。選好(hao)名字并(bing)記錄準備144px*144px尺寸的logo，并(bing)在(zai)微信公眾平(ping)臺官網首頁申(shen)請微信小(xiao)程(cheng)序(xu)。一(yi)般(ban)來說，大概3個小(xiao)時左(zuo)右(you)就(jiu)可以通過(guo)審(shen)核。
2）openai 賬號申請
OpenAI（ ）目前不在中國區域開展業務(wu)，國內不能正常的體驗到openai提供的服務(wu)。賬(zhang)號的申(shen)請和(he)注冊(ce)具體教程(cheng)，各(ge)位閱讀(du)者可以自行搜索。
申(shen)請(qing)到(dao)賬號(hao)之(zhi)后，為了在代(dai)碼中實對OpenAI 提(ti)供的 api ，我們還需要申(shen)請(qing)一個apiKey。這(zhe)是通過代(dai)碼訪問(wen)ChatGPT的關(guan)鍵所在。
賬號申(shen)請成(cheng)功后，訪(fang)問(wen)頁面生(sheng)成(cheng)apiKey。其中尤其注意保存(cun)好key（不(bu)能(neng)再次(ci)查看(kan)，如果丟(diu)失(shi)只能(neng)重新(xin)生(sheng)成(cheng)）。
至此(ci)，基本準備(bei)工作已全部(bu)完(wan)成(cheng)，接(jie)下來將為各位開發者講述核心代碼的開發流程。
開發環境
1）新建小程序
首先，根據自己(ji)的(de)實際(ji)情(qing)況下(xia)(xia)載對應版本的(de)微信(xin)開發(fa)者工(gong)具。下(xia)(xia)載地址如下(xia)(xia)：
其次，我個人建(jian)議新建(jian)小(xiao)(xiao)程(cheng)序時選(xuan)(xuan)擇最簡(jian)單的(de)(de)基(ji)礎模版，并勾選(xuan)(xuan)使用(yong)微信云開(kai)發(fa)環境(jing)。去除(chu)繁雜的(de)(de)配(pei)置以(yi)便你能(neng)更快速的(de)(de)對微信小(xiao)(xiao)程(cheng)序的(de)(de)代碼結構有初(chu)步了解。我成文(wen)時，因(yin)為申請的(de)(de)小(xiao)(xiao)程(cheng)序還沒有審(shen)核通過，所以(yi)選(xuan)(xuan)擇下述測試號用(yong)來進行(xing)開(kai)發(fa)。
2）環境介紹
導(dao)出初始化項目之后，你會看到比較清晰的文(wen)件結構。小程序(xu)開(kai)(kai)發跟(gen)普通的html、css、js 三劍客用(yong)來開(kai)(kai)發網(wang)頁沒(mei)有本(ben)質(zhi)的區(qu)別。在微信體系內，wxml、wxss、js 都是 html、css、js的子集。
頁(ye)面(mian)的(de)(de)結構在(zai)wxml 中寫，用到的(de)(de)樣式在(zai) wxss中定義；變量(liang)和函數以及(ji)網絡請求(qiu) 等在(zai) js 中執(zhi)行。簡單(dan)說來(lai)，小(xiao)程序(xu)包含一個(ge)描(miao)述整體程序(xu)的(de)(de) app 和多個(ge)描(miao)述各(ge)自頁(ye)面(mian)的(de)(de) page。這里的(de)(de) app 是指(zhi)放在(zai)根目錄的(de)(de) app.js、app.json、app.wxss 這三個(ge)文件，他(ta)們主要負責全(quan)局性(xing)的(de)(de)邏輯(ji)、配置及(ji)樣式。
pages 則是你即(ji)將(jiang)編寫的多(duo)個(ge)頁面(mian)。多(duo)個(ge) pages 之間可以通過官方提供的導(dao)航(hang)功能進行跳轉。每個(ge) page 頁面(mian)由 page.js、page.json、page.wxml、page.wxss 四個(ge)文(wen)(wen)件(jian)(jian)組成。其中 WXML 頁面(mian)類似 HTML 文(wen)(wen)件(jian)(jian)，主(zhu)要負責頁面(mian)的結構。
相比于HTML而言，WXML 更加簡單(dan)。開發(fa)過程(cheng)中(zhong)，布局基本(ben)上是(shi)在使用view和text標(biao)簽，以及其(qi)它(ta)官方(fang)文檔上說(shuo)明的其(qi)他標(biao)簽。但是(shi)各位在開發(fa)過程(cheng)中(zhong)，需要尤其(qi)關注官方(fang)文檔中(zhong)有關組件(jian)的內容。
開發過程
1）如何引入 weui 組件(jian)
有兩種(zhong)組(zu)件接入(ru)方(fang)式(shi)可供選擇：
如果你在開發過程中不想(xiang)花(hua)大(da)量(liang)時(shi)間研究npm且期(qi)望快速(su)實現看(kan)到(dao)效果，又或者(zhe)受(shou)困于小(xiao)程序商(shang)店上架會限(xian)制到(dao)代碼包(bao)(bao)大(da)小(xiao)（但是useExtendedLib 擴展庫不計入代碼包(bao)(bao)大(da)小(xiao)），個人建議(yi)選擇了(le)第一種(zhong)方式。
weui 官方(fang)參考文檔如下：
2）定義tabbar
如(ru)果你(ni)覺(jue)得一個頁面(mian)展(zhan)示的信息過于單(dan)調，可以在小(xiao)程序(xu)中使用tabbar。按照微信官(guan)方(fang)提(ti)供的自定義tabbar指引(yin)，你(ni)可以輕松把代碼(ma)復(fu)制到項目(mu)工(gong)程中。本文把核心步驟代碼(ma)公示出，更(geng)多細節(jie)有(you)興(xing)趣可以訪問微信官(guan)方(fang)指引(yin)頁，地址(zhi)如(ru)下：
主(zhu)要步驟：在app.json 中(zhong)新增 tabbar 配置信息
代碼語(yu)言：javascript
復制
{
"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": "我的創作"
}
]
}
}值得注意的是(shi)，tabBar-list-pagePath的路徑需(xu)要存在(zai)，否則(ze)編譯器會報錯。此處我把項目(mu)的工程(cheng)目(mu)錄(lu)截(jie)圖(tu)公開(kai)，各(ge)位(wei)對比上下文配置信(xin)息更容易理解(jie)。
3） 編寫主界面
規劃的(de)(de)界(jie)面(mian)中(zhong)只需要(yao)一個(ge)輸入框及(ji)一個(ge)詢(xun)問(wen)按(an)鈕。當用戶(hu)點擊(ji)詢(xun)問(wen)按(an)鈕的(de)(de)時候(hou)，獲(huo)取(qu)(qu)輸入框中(zhong)的(de)(de)值，去請求服務器的(de)(de)/ask接口獲(huo)取(qu)(qu)結果。獲(huo)取(qu)(qu)數據之后，再展(zhan)示到頁面(mian)中(zhong)的(de)(de)結果展(zhan)示中(zhong)。
確定了(le)這個基本流程(cheng)(cheng)，接下(xia)來只(zhi)要知道(dao)這些基本組件在微信小(xiao)程(cheng)(cheng)序(xu)(xu)里(li)面(mian)使用什么標簽就(jiu)好(hao)了(le)。更多的細(xi)節可以訪問(wen) 微信小(xiao)程(cheng)(cheng)序(xu)(xu)的開發文檔。
代(dai)碼語(yu)言(yan)：javascript
復制
4）綁定點擊事件
在(zai)form表(biao)單上綁定事件：
代碼語言：javascript
復制
然后在對應的js文件(jian)里面(mian)定義submitForm方法。
5）請求服務器接口
代碼語言(yan)：javascript
復制
submitForm: function (e) {
//一般前置檢查代碼
...
const that = this
wx.request({
url: '//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")
....其他相關代碼
},值得注(zhu)意的是，上面用到的url需(xu)要(yao)在小(xiao)程(cheng)序中進(jin)行域名白名單注(zhu)冊，否則無法被訪問到。同時進(jin)行注(zhu)冊的域名，需(xu)要(yao)進(jin)行備案(an)。
配置地址(zhi)：登(deng)錄微(wei)信小程(cheng)序(xu)管(guan)理(li)后臺，在開(kai)發管(guan)理(li)-服務器域名(ming)中進行(xing)配置。如下圖(tu)。
到此(ci)，小程序部分配置完成。開發者可以用手機進行預(yu)覽，或者真機調(diao)試。如果此(ci)時(shi)沒(mei)有配置域(yu)(yu)名，也可以通過忽(hu)略(lve)掉域(yu)(yu)名強制(zhi)檢(jian)查(cha)。當(dang)然，如果是正式上線審核(he)的話，必須有一(yi)個經過備案的域(yu)(yu)名，且該域(yu)(yu)名在(zai)小程序后臺中完成了配置。
服務器接口
上述內容搭建完成(cheng)后，下(xia)一步是配置服務器。本著快速開發的原(yuan)則，可(ke)以借用“現成(cheng)的輪子(zi)”，保障效率第一。各位可(ke)以參考(kao)現有的api-server腳手架（）。
之后配(pei)置接口名字以及對應的(de)(de)handle。我定義(yi)了一(yi)個名字叫做(zuo) /ask 的(de)(de)接口名字，同(tong)時定義(yi)了處理ask接口的(de)(de) handle函數如下。
代碼(ma)語言：javascript
復制
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('//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就是(shi)前面提(ti)到的在openai上申(shen)請到的token ，注意不要泄(xie)漏(lou)。
騰訊api網關(guan)接入及部(bu)署
1）網關接入
考慮到(dao)并發(fa)能力，頻(pin)率限(xian)制，自動擴容(rong)等能力的接入，我選擇了騰訊云api網關(guan)。如何把api通過騰訊云暴露到(dao)外網呢？首先，訪(fang)問。其次，新建一個service，并且選擇https協議(yi)【微信要求https協議(yi)】。最(zui)后，新建接口(kou)ask并且映射到(dao)我們自己的服務器。
