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並且對映到我們自己的伺服器。