導(dǎo)讀 |上周OpenAI發(fā)布了對(duì)話語(yǔ)言模型 ChatGPT，相關(guān)討論引爆全網(wǎng)。你是否也迫不及待體驗(yàn)一番？本文特邀作者騰訊云開(kāi)發(fā)者社區(qū)作者戴傳友從開(kāi)發(fā)環(huán)境準(zhǔn)備、開(kāi)發(fā)過(guò)程、服務(wù)器接口、騰訊API網(wǎng)關(guān)接入到部署，詳細(xì)教你如何動(dòng)手開(kāi)發(fā)一個(gè)chatGPT微信小程序。

(資料圖片)

在《ChatGPT-地表最強(qiáng)AI模型！要消滅人類？》、《算法工程師深度解構(gòu)ChatGPT技術(shù)》兩篇文章中，我們分別囊舉了ChatGPT的豐富玩法并解析其工作原理。如果你對(duì)相關(guān)內(nèi)容感興趣，歡迎回溯圍觀～公眾號(hào)的粉絲朋友們?cè)谠u(píng)論區(qū)暢想了更多ChatGP應(yīng)用實(shí)踐，也有粉絲表示想要親自體驗(yàn)下其奇妙之處。此次，我們邀請(qǐng)騰訊云開(kāi)發(fā)者社區(qū)開(kāi)發(fā)者由淺入深帶你動(dòng)手開(kāi)發(fā)一個(gè)ChatGPT微信小程序，其中會(huì)詳細(xì)介紹開(kāi)發(fā)環(huán)境準(zhǔn)備、項(xiàng)目實(shí)現(xiàn)、服務(wù)接口搭建、騰訊API網(wǎng)關(guān)接入、部署等環(huán)節(jié)。

準(zhǔn)備工作1）小程序申請(qǐng)?jiān)谖⑿胖兴阉?"ChatGPT"相關(guān)的小程序，檢查有哪些名字未被占用。選好名字并記錄準(zhǔn)備144px*144px尺寸的logo，并在微信公眾平臺(tái)官網(wǎng)首頁(yè)申請(qǐng)微信小程序。一般來(lái)說(shuō)，大概3個(gè)小時(shí)左右就可以通過(guò)審核。2）openai 賬號(hào)申請(qǐng)OpenAI（ https://openai.com/）目前不在中國(guó)區(qū)域開(kāi)展業(yè)務(wù)，國(guó)內(nèi)不能正常的體驗(yàn)到openai提供的服務(wù)。賬號(hào)的申請(qǐng)和注冊(cè)具體教程，各位閱讀者可以自行搜索。申請(qǐng)到賬號(hào)之后，為了在代碼中實(shí)對(duì)OpenAI 提供的 api ，我們還需要申請(qǐng)一個(gè)apiKey。這是通過(guò)代碼訪問(wèn)ChatGPT的關(guān)鍵所在。賬號(hào)申請(qǐng)成功后，訪問(wèn)https://beta.openai.com/account/api-keys頁(yè)面生成apiKey。其中尤其注意保存好key（不能再次查看，如果丟失只能重新生成）。

至此，基本準(zhǔn)備工作已全部完成，接下來(lái)將為各位開(kāi)發(fā)者講述核心代碼的開(kāi)發(fā)流程。開(kāi)發(fā)環(huán)境1）新建小程序首先，根據(jù)自己的實(shí)際情況下載對(duì)應(yīng)版本的微信開(kāi)發(fā)者工具。下載地址如下：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html其次，我個(gè)人建議新建小程序時(shí)選擇最簡(jiǎn)單的基礎(chǔ)模版，并勾選使用微信云開(kāi)發(fā)環(huán)境。去除繁雜的配置以便你能更快速的對(duì)微信小程序的代碼結(jié)構(gòu)有初步了解。我成文時(shí)，因?yàn)樯暾?qǐng)的小程序還沒(méi)有審核通過(guò)，所以選擇下述測(cè)試號(hào)用來(lái)進(jìn)行開(kāi)發(fā)。2）環(huán)境介紹導(dǎo)出初始化項(xiàng)目之后，你會(huì)看到比較清晰的文件結(jié)構(gòu)。小程序開(kāi)發(fā)跟普通的html、css、js 三劍客用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)沒(méi)有本質(zhì)的區(qū)別。在微信體系內(nèi)，wxml、wxss、js 都是 html、css、js的子集。頁(yè)面的結(jié)構(gòu)在wxml 中寫，用到的樣式在 wxss中定義；變量和函數(shù)以及網(wǎng)絡(luò)請(qǐng)求 等在 js 中執(zhí)行。簡(jiǎn)單說(shuō)來(lái)，小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁(yè)面的 page。這里的 app 是指放在根目錄的 app.js、app.json、app.wxss 這三個(gè)文件，他們主要負(fù)責(zé)全局性的邏輯、配置及樣式。pages 則是你即將編寫的多個(gè)頁(yè)面。多個(gè) pages 之間可以通過(guò)官方提供的導(dǎo)航功能進(jìn)行跳轉(zhuǎn)。每個(gè) page 頁(yè)面由 page.js、page.json、page.wxml、page.wxss 四個(gè)文件組成。其中 WXML 頁(yè)面類似 HTML 文件，主要負(fù)責(zé)頁(yè)面的結(jié)構(gòu)。相比于HTML而言，WXML 更加簡(jiǎn)單。開(kāi)發(fā)過(guò)程中，布局基本上是在使用view和text標(biāo)簽，以及其它官方文檔上說(shuō)明的其他標(biāo)簽。但是各位在開(kāi)發(fā)過(guò)程中，需要尤其關(guān)注官方文檔中有關(guān)組件的內(nèi)容。

開(kāi)發(fā)過(guò)程1）如何引入 weui 組件

有兩種組件接入方式可供選擇：通過(guò) useExtendedLib 擴(kuò)展庫(kù) 的方式引入。這種方式引入的組件將不會(huì)計(jì)入代碼包大小。通過(guò)npm (opens new window)方式下載構(gòu)建。npm包名為weui-miniprogram。如果你在開(kāi)發(fā)過(guò)程中不想花大量時(shí)間研究npm且期望快速實(shí)現(xiàn)看到效果，又或者受困于小程序商店上架會(huì)限制到代碼包大小（但是useExtendedLib 擴(kuò)展庫(kù)不計(jì)入代碼包大?。瑐€(gè)人建議選擇了第一種方式。weui 官方參考文檔如下：https://wechat-miniprogram.github.io/weui/docs/quickstart.html2）定義tabbar如果你覺(jué)得一個(gè)頁(yè)面展示的信息過(guò)于單調(diào)，可以在小程序中使用tabbar。按照微信官方提供的自定義tabbar指引，你可以輕松把代碼復(fù)制到項(xiàng)目工程中。本文把核心步驟代碼公示出，更多細(xì)節(jié)有興趣可以訪問(wèn)微信官方指引頁(yè)，地址如下：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": "我的創(chuàng)作"            }        ]    }}

值得注意的是，tabBar-list-pagePath的路徑需要存在，否則編譯器會(huì)報(bào)錯(cuò)。此處我把項(xiàng)目的工程目錄截圖公開(kāi)，各位對(duì)比上下文配置信息更容易理解。3） 編寫主界面規(guī)劃的界面中只需要一個(gè)輸入框及一個(gè)詢問(wèn)按鈕。當(dāng)用戶點(diǎn)擊詢問(wèn)按鈕的時(shí)候，獲取輸入框中的值，去請(qǐng)求服務(wù)器的/ask接口獲取結(jié)果。獲取數(shù)據(jù)之后，再展示到頁(yè)面中的結(jié)果展示中。確定了這個(gè)基本流程，接下來(lái)只要知道這些基本組件在微信小程序里面使用什么標(biāo)簽就好了。更多的細(xì)節(jié)可以訪問(wèn) 微信小程序的開(kāi)發(fā)文檔。

                    請(qǐng)輸入你想要解決的問(wèn)題：                            
                    
                                                
0/50
                    
                
                                    回復(fù)：                                            {{result}}                                                                                                                        立即下載                                                                                                                        {{message}}                                                                             詢問(wèn)ChatGPT                                                 

4）綁定點(diǎn)擊事件在form表單上綁定事件：

然后在對(duì)應(yīng)的js文件里面定義submitForm方法。

5）請(qǐng)求服務(wù)器接口

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")        ....其他相關(guān)代碼},

值得注意的是，上面用到的url需要在小程序中進(jìn)行域名白名單注冊(cè)，否則無(wú)法被訪問(wèn)到。同時(shí)進(jìn)行注冊(cè)的域名，需要進(jìn)行備案。配置地址：登錄微信小程序管理后臺(tái)，在開(kāi)發(fā)管理-服務(wù)器域名中進(jìn)行配置。如下圖。

到此，小程序部分配置完成。開(kāi)發(fā)者可以用手機(jī)進(jìn)行預(yù)覽，或者真機(jī)調(diào)試。如果此時(shí)沒(méi)有配置域名，也可以通過(guò)忽略掉域名強(qiáng)制檢查。當(dāng)然，如果是正式上線審核的話，必須有一個(gè)經(jīng)過(guò)備案的域名，且該域名在小程序后臺(tái)中完成了配置。

服務(wù)器接口

上述內(nèi)容搭建完成后，下一步是配置服務(wù)器。本著快速開(kāi)發(fā)的原則，可以借用“現(xiàn)成的輪子”，保障效率第一。各位可以參考現(xiàn)有的api-server腳手架（https://github.com/wytxer/template-node-egg）。之后配置接口名字以及對(duì)應(yīng)的handle。我定義了一個(gè)名字叫做 /ask 的接口名字，同時(shí)定義了處理ask接口的 handle函數(shù)如下。

async ask() {  const { request, helper, axios, logger } = this.ctx  const { message } = request.body  logger.info("requset body===", request.body)  logger.info("message===",message)  ...其余相關(guān)代碼  這里的token就是前面提到的在openai上申請(qǐng)到的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上申請(qǐng)到的token ，注意不要泄漏。騰訊api網(wǎng)關(guān)接入及部署1）網(wǎng)關(guān)接入考慮到并發(fā)能力，頻率限制，自動(dòng)擴(kuò)容等能力的接入，我選擇了騰訊云api網(wǎng)關(guān)。如何把a(bǔ)pi通過(guò)騰訊云暴露到外網(wǎng)呢？首先，訪問(wèn)https://console.cloud.tencent.com/apigateway/service?rid=1。其次，新建一個(gè)service，并且選擇https協(xié)議【微信要求https協(xié)議】。最后，新建接口ask并且映射到我們自己的服務(wù)器。

更多騰訊云api 介紹：https://cloud.tencent.com/developer/article/1877519

2）部署過(guò)程在微信開(kāi)發(fā)者工具里面進(jìn)行代碼上傳，然后在微信小程序后臺(tái)里面就能看到上傳的版本。建議各位開(kāi)發(fā)者提交審核之前用真機(jī)掃描體驗(yàn)一下，有bug及時(shí)修復(fù)。

確認(rèn)無(wú)誤后就可以提交審核了，系統(tǒng)提示1-7個(gè)工作日內(nèi)完成。審核完成后，手動(dòng)進(jìn)行 “全量” 或者 “灰度” 發(fā)布，你的Chatgpt小程序就能在微信內(nèi)被搜索到。騰訊工程師技術(shù)干貨直達(dá)：

1、算法工程師深度解構(gòu)ChatGPT技術(shù)

2、耗時(shí)減半？騰訊云OCR只做了3件事

3、探秘微信業(yè)務(wù)優(yōu)化：DDD從入門到實(shí)踐

4、10分鐘！從架構(gòu)視角讀懂K8s

粉絲福利，后臺(tái)回復(fù)“ChatGPT”獲得本篇作者推薦相關(guān)學(xué)習(xí)材料