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

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

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

手機上,點擊"從 AI 開始探索雲開發",就能進入。

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

點擊它,就能打開"雲開發助手"。

它的右上角有一個"全屏"圖標(下圖)。

點擊進入完整界面。

三、雲開發助手:文檔功能
"雲開發助手"的主要功能如下圖。

這些功能可以分成兩大類,一類是文檔相關的功能,另一類是代碼生成。
先看看文檔功能。
(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 接入,同時處理好鑑權、加密、流式傳輸,不需要用戶介入。
下面是示例代碼,詳見官方文檔。

七、總結
以上就是我試用的全部內容,我的總體感覺是,這些已經做好的部分,對小程序的開發有巨大的助力。如果你正在開發小程序,一定要試試這些功能。
小程序的 AI 能力,後面還會持續擴展。騰訊希望把雲的基礎設施、微信小程序、AI 大模型都打通,從而讓小程序開發的門檻更低,效率更高。
我聽騰訊的同學說,下一階段有幾個開發重點。
(1)用 AI 生成前後端完整的小程序,進一步與微信開發環境打通。
(2)加強 AI 的代碼生成能力,搭配小程序模版和低碼編輯器,快速生成小程序。
(3)在 AI 的幫助,無痛接入數據庫和調用雲函數。
(4)客戶端、服務端、大模型三者之間數據交互的標準化和統一接口。
上面的每一點,都能解決目前小程序開發的痛點,期待早日看到突破。
(完)












