3 小時！開發 ChatGPT 微信小程序

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

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

準備工作

1）小程序申請

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

2）openai 賬號申請

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

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

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

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

開發環境

1）新建小程序

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

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

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

2）定義 tabbar

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

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": "我的創作"
            }
        ]
    }
}

值得注意的是，tabBar-list-pagePath 的路徑需要存在，否則編譯器會報錯。此處我把項目的工程目錄截圖公開，各位對比上下文配置信息更容易理解。

3）編寫主界面

規劃的界面中只需要一個輸入框及一個詢問按鈕。當用戶點擊詢問按鈕的時候，獲取輸入框中的值，去請求服務器的 / ask 接口獲取結果。獲取數據之後，再展示到頁面中的結果展示中。

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

<form bindsubmit="submitForm">
        <view>
            <view>請輸入你想要解決的問題：</view>
            <view>
                <div>
                    <div>
                        <textarea 可以問我今天天氣怎麼樣？或者講個故事" rows="2"></textarea>
                        <div><span>0</span>/50</div>
                    </div>
                </div>

                <block wx:if="{{result}}">
                    <view>回覆：</view>
                    <view>
                        <text>{{result}}</text>
                    </view>
                </block>
            </view>

            <view>                
                <block wx:if="{{downloadUrl}}">
                    <view>
                        <button disabled="{{downloaddisabled}}" loading="{{downloadloading}}" load aria-role="button" bindtap='download' data-text="{{downloadUrl}}" plain>立即下載
                        </button>
                    </view>
                </block>

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

更多騰訊雲 api 介紹：

https://cloud.tencent.com/developer/article/1877519

2**）部署過程**

在微信開發者工具裏面進行代碼上傳，然後在微信小程序後臺裏面就能看到上傳的版本。建議各位開發者提交審覈之前用真機掃描體驗一下，有 bug 及時修復。

確認無誤後就可以提交審覈了，系統提示 1-7 個工作日內完成。審覈完成後，手動進行 “全量” 或者 “灰度” 發佈，你的 Chatgpt 小程序就能在微信內被搜索到。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/xVTHSMEfhwlPm2S9fug66Q

2）定義 tabbar

3） 編寫主界面

5）請求服務器接口

騰訊 api 網關接入及部署

猜你喜歡

3）編寫主界面