一、前言
AI 生成程式碼,早不是新鮮事了,但是 AI 生成微信小程式,似乎還不多見。

究其原因,大概是小程式的開源專案較少,模型訓練不好搞。
上週,我遇到騰訊的同學,得知“騰訊雲開發[1]”最近有一個大的版本更新,大幅加強了小程式的 AI 能力。我還挺期待的,騰訊自己搞小程式 AI,要比其他人更合適。
後來,我試用了本次更新的 AI 功能,有一個強烈的感覺,微信小程式可能很快就會成為國內 AI 應用(又稱“智慧體”)的主要載體。
因為本次更新以後,小程式呼叫 AI 模型,以及生成智慧體,變得非常方便。並且,小程式從 API 到開發工具,都把 AI 整合進去了,整個開發過程都有 AI 輔助,不僅開發效率提高了,而且大量程式碼可以透過 AI 生成。
下面就是我的試用過程的介紹和記錄。這些功能都是公開的,大部分已經上線,剩下的也即將釋出,大家現在就可以跟著做,體驗 AI 生成小程式。
二、雲開發助手:進入方法
我的第一步是體驗小程式的“雲開發助手”(又稱雲開發 Copilot)。它的作用是透過 AI 加快小程式的開發。
它的全功能版,目前要透過“騰訊雲開發平臺[2]”網站使用。

此外,還有一個遊客版的小程式,可以體驗部分功能。如果你手邊只有手機,可以先試試遊客版。

手機上,點選“從 AI 開始探索雲開發”,就能進入。

手機版看一下就可以了,正式的開發還是要使用網站。本文下面的內容,都是基於網站的全功能版。
首先,登入“雲開發平臺[3]”後,頁面右下角就會出現小助手圖示。

點選它,就能開啟“雲開發助手”。

它的右上角有一個“全屏”圖示(下圖)。

點選進入完整介面。

三、雲開發助手:文件功能
“雲開發助手”的主要功能如下圖。

這些功能可以分成兩大類,一類是文件相關的功能,另一類是程式碼生成。
先看看文件功能。
(1)Copilot
這個功能是 AI 問答引擎,任何關於小程式的問題,都可以向它提出。

這大大減少了文件查閱,有些簡單的函式,可以讓它生成,還能讓它教你如何開發小程式。
(2)AI 識圖
這個功能是透過上傳頁面截圖(或者設計稿),生成需求文件。
我上傳了一張抽獎的轉盤。

它生成了如下的需求文件,用文字詳細複述了這個頁面的介面佈局、設計細節、功能需求等。

大公司的程式設計師,一般都是根據產品需求文件(PRD)進行開發,所以這個功能可以簡化產品經理的工作,需求文件也可以作為 AI 程式碼生成的文字記錄儲存下來。
生成的需求文件,下一步可以傳入“雲開發助手”,來生成頁面程式碼,所以它也是 AI 生成小程式的中間步驟。
(3)寫需求高手
這個功能跟“AI 識圖”作用相同,都是生成需求文件,區別是它輸入文字描述。

由於不需要截圖,它適合只有功能需求、沒有設計稿的場景,即讓 AI 來設計頁面。
四、雲開發助手:生成小程式前端程式碼
接著,我們就來試試,讓“雲開發助手”生成小程式的前端程式碼。
選擇左側選單的 “AI 生成視覺化應用”,這個功能就是根據截圖或者文字描述,直接生成應用(Web 或者小程式)。

上傳一張微信頁面的截圖。

它會自動生成該截圖的頁面程式碼,可以預覽效果(下圖)。

可以看到,生成的頁面還原了原始佈局,但是有許多細節差異。
目前階段,好像還做不到100%還原,比較適合當作程式碼基礎,在它生成的頁面基礎上,進行手動細節調整。
除了上傳截圖,還可以輸入文字描述(或者上一節的需求文件),也能生成應用。

讓它生成程式設計師的個人小程式,效果還是可以的。

預覽初步效果後,你可以在雲開發平臺上,直接線上編輯程式碼。

編輯完這個頁面以後,還可以反覆這個過程,向小程式新增更多頁面(下圖)。

有了多個頁面,就能設定頁面之間的跳轉,這樣就基本是一個可用的小程式了。
調整小程式的樣式時,雲開發助手還提供了一個貼心的功能“AI 編輯元件樣式”,也就是根據指令,自動修改樣式。

上圖就是讓 AI 為頁面新增漸變背景,這樣修改樣式,就方便了很多。
大家可能看到了,左側選單欄還有一個“AI 生成元件”的功能。該功能用來生成頁面的元件,適合為現有的頁面新增功能。但是,它暫時只支援 Web 應用,不支援小程式,所以這裡就忽略不介紹了。
完成前端開發以後,雲開發平臺可以直接釋出小程式。當然,你也可以複製或者下載程式碼,透過微信開發工具釋出。
五、雲開發助手:生成小程式後端程式碼
小程式除了前端 UI 程式碼,還需要後端的業務邏輯和資料庫讀寫。“雲開發助手”也能生成後端程式碼,主要用到下面兩個功能。

(1)AI 生成雲函式
雲函式是微信平臺在雲端執行的函式,可以用來獲取各種後端能力。
“雲開發助手”可以幫我們生成雲函式。下圖就是讓 AI 生成獲取小程式 OPENID 的雲函式。

AI 在給出示例程式碼的同時,還會展示各個檔案的寫法(下圖)。

如果你覺得可以接受,就點選“建立雲函式”按鈕 ,程式碼就會進入新開啟的雲 IDE 環境,用來編輯和除錯。

編輯完成後,點選“部署”按鈕,就可以將雲函式部署到線上了。
(2)AI 生成資料模型
這個模型用來生成資料庫的資料模型(也就是“表結構”)。
比如,生成一個部落格的資料模型,包括文章、作者和評論。

點選“檢視”,顯示一個 JSON 陣列,表示資料結構。

點選“確認生成”,資料結構就會以表格形式呈現,確認沒有問題,就可以儲存。

六、AI 大模型接入
上面都是介紹“雲開發助手”,即 AI 輔助小程式開發。下面介紹 AI 開發的另一個重頭戲:如何做出 AI 智慧體的小程式,也就是讓小程式本身具有 AI 功能。
還是在“雲開發平臺”,左側選單選擇 AI+。

這時,頁面會讓你選擇,接入大模型還是開發智慧體(下圖)。

(1)開發智慧體(AI Agent)
這裡可以簡單把“智慧體”想象成一個 AI 對話應用,使用者輸入要求,AI 給出響應。
騰訊雲開發平臺將“智慧體”的後端大模型,預設指定為騰訊的混元模型。
你自己需要定製開場白、提示詞、知識庫(你自己的訓練材料)。

然後,定製前端介面(對話元件)。

基本流程就完成了:使用者在前端介面,根據開場白的提示,輸入他的要求,系統收到後,傳給後端模型,再將回復展示給使用者。
是不是很簡單?一個智慧體就這樣做好了。
(2)AI 大模型接入
如果選擇自己接入大模型,頁面會根據開發型別(Web/小程式/雲函式),給出接入指引。

小程式 API 已經對大模型做了適配,按照指引,只要幾行程式碼就能接入。
具體來說,從小程式基礎庫3.7.1開始,新增了
wx.cloud.extend.AI
物件,專用於 AI。•wx.cloud.extend.AI.createModel():用來接入大模型•wx.cloud.extend.AI.bot:用來呼叫智慧體
用了這個 API,就不需要任何 SDK,也不需要後端伺服器,系統直接負責 AI 接入,同時處理好鑑權、加密、流式傳輸,不需要使用者介入。
下面是示例程式碼,詳見官方文件[4]。

七、總結
以上就是我試用的全部內容,我的總體感覺是,這些已經做好的部分,對小程式的開發有巨大的助力。如果你正在開發小程式,一定要試試這些功能。
小程式的 AI 能力,後面還會持續擴充套件。騰訊希望把雲的基礎設施、微信小程式、AI 大模型都打通,從而讓小程式開發的門檻更低,效率更高。
我聽騰訊的同學說,下一階段有幾個開發重點。
(1)用 AI 生成前後端完整的小程式,進一步與微信開發環境打通。
(2)加強 AI 的程式碼生成能力,搭配小程式模版和低碼編輯器,快速生成小程式。
(3)在 AI 的幫助,無痛接入資料庫和呼叫雲函式。
(4)客戶端、服務端、大模型三者之間資料互動的標準化和統一介面。
上面的每一點,都能解決目前小程式開發的痛點,期待早日看到突破。
(完)
References
[1]
騰訊雲開發:
https://tcb.cloud.tencent.com[2]
騰訊雲開發平臺:
https://tcb.cloud.tencent.com[3]
雲開發平臺:
https://tcb.cloud.tencent.com[4]
官方文件:
https://docs.cloudbase.net/ai/introduce