3小時！開發ChatGPT微信小程序_騰訊雲開發者

導讀 | 上週OpenAI發佈了對話語言模型 ChatGPT，相關討論引爆全網。你是否也迫不及待體驗一番？本文特邀作者騰訊雲開發者社區作者戴傳友從開發環境準備、開發過程、服務器接口、騰訊API網關接入到部署，詳細教你如何動手開發一個chatGPT微信小程序。

在《ChatGPT-地表最強AI模型！要消滅人類？》、《算法工程師深度解構ChatGPT技術》兩篇文章中，我們分別囊舉了ChatGPT的豐富玩法並解析其工作原理。如果你對相關內容感興趣，歡迎回溯圍觀～公眾號的粉絲朋友們在評論區暢想了更多ChatGP應用實踐，也有粉絲表示想要親自體驗下其奇妙之處。此次，我們邀請騰訊雲開發者社區開發者由淺入深帶你動手開發一個ChatGPT微信小程序，其中會詳細介紹開發環境準備、項目實現、服務接口搭建、騰訊API網關接入、部署等環節。

準備工作

1）小程序申請

在微信中搜索 "ChatGPT"相關的小程序，檢查有哪些名字未被佔用。選好名字並記錄準備144px*144px尺寸的logo，並在微信公眾平台官網首頁申請微信小程序。一般來説，大概3個小時左右就可以通過審核。

2）openai 賬號申請

OpenAI（ http://openai.com/）目前不在中國區域開展業務，國內不能正常的體驗到openai提供的服務。賬號的申請和註冊具體教程，各位閲讀者可以自行搜索。

申請到賬號之後，為了在代碼中實對OpenAI 提供的 api ，我們還需要申請一個apiKey。這是通過代碼訪問ChatGPT的關鍵所在。

賬號申請成功後，訪問http://beta.openai.com/account/api-keys頁面生成apiKey。其中尤其注意保存好key（不能再次查看，如果丟失只能重新生成）。

至此，基本準備工作已全部完成，接下來將為各位開發者講述核心代碼的開發流程。

開發環境

1）新建小程序

首先，根據自己的實際情況下載對應版本的微信開發者工具。下載地址如下：

http://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 官方參考文檔如下：

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

2）定義tabbar

如果你覺得一個頁面展示的信息過於單調，可以在小程序中使用tabbar。按照微信官方提供的自定義tabbar指引，你可以輕鬆把代碼複製到項目工程中。本文把核心步驟代碼公示出，更多細節有興趣可以訪問微信官方指引頁，地址如下：

http://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接口獲取結果。獲取數據之後，再展示到頁面中的結果展示中。

確定了這個基本流程，接下來只要知道這些基本組件在微信小程序裏面使用什麼標籤就好了。更多的細節可以訪問微信小程序的開發文檔。

```

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腳手架（http://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('http://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通過騰訊雲暴露到外網呢？首先，訪問http://console.cloud.tencent.com/apigateway/service?rid=1。其次，新建一個service，並且選擇https協議【微信要求https協議】。最後，新建接口ask並且映射到我們自己的服務器。