【已上線(xiàn)】用AI做微信小程序的完整步驟
從需求梳理到代碼生成,從組件搭建到上線(xiàn)發(fā)布,本文詳細(xì)拆解用AI構(gòu)建微信小程序的全流程,幫助產(chǎn)品人和開(kāi)發(fā)者真正理解“AI工具鏈”的落地方式與協(xié)作邊界。
之前拿AI開(kāi)發(fā)了一套內(nèi)部使用工具,開(kāi)發(fā)過(guò)程確實(shí)非常高效便捷。然后,前段時(shí)間正好看到有人發(fā)了一個(gè)單頁(yè)面的AI應(yīng)用網(wǎng)頁(yè),于是調(diào)研了一下DeepSeek的API價(jià)格,發(fā)現(xiàn)挺便宜的,調(diào)用一次R1模型也就是1-2分錢(qián)。那就意味著搞個(gè)AI應(yīng)用沒(méi)啥成本,于是琢磨著搞個(gè)微信小程序玩玩,本篇記錄了完整的步驟。
微信小程序注冊(cè)
在微信公眾號(hào)平臺(tái)可以申請(qǐng)注冊(cè)小程序,個(gè)人也是可以的。需要準(zhǔn)備好如下資料:
- 小程序名稱(chēng):不能重復(fù),不能侵權(quán)他人商標(biāo)
- 圖標(biāo):小程序的圖標(biāo),這個(gè)拿AI生成一個(gè)就行
- 工信部備案:所有小程序都需要工信部備案,備案提交前微信團(tuán)隊(duì)會(huì)做初審,如果有問(wèn)題會(huì)讓你修改后再提交。提交后一般3-7個(gè)工作日會(huì)通過(guò)。沒(méi)有備案不影響小程序的發(fā)布和上架,但是沒(méi)備案的話(huà)無(wú)法被搜索。
- 微信認(rèn)證:需要填寫(xiě)認(rèn)證資料,然后交30塊錢(qián)。微信會(huì)委托第三方對(duì)個(gè)人信息進(jìn)行核實(shí)。我開(kāi)始認(rèn)證為產(chǎn)品經(jīng)理,結(jié)果沒(méi)通過(guò)(第三方網(wǎng)站發(fā)布的文章截圖不算數(shù)),快的話(huà),選擇認(rèn)證身份為“無(wú)”就行了。
認(rèn)證和備案沒(méi)通過(guò)都不影響小程序開(kāi)發(fā)和上線(xiàn),只是影響分發(fā)(沒(méi)通過(guò)限制50人/天)和搜索。注冊(cè)號(hào)之后,從開(kāi)發(fā)管理里獲取AppID,這個(gè)在開(kāi)發(fā)的時(shí)候會(huì)用到。
DeepSeek接口開(kāi)通
在DeepSeek官網(wǎng)通過(guò)API開(kāi)放平臺(tái)進(jìn)入,做完實(shí)名認(rèn)證,充值就可以使用了,最低充值10元,門(mén)檻不高。
充值好之后,創(chuàng)建一個(gè)APIKey,方便在小程序利用這個(gè)APIKey來(lái)請(qǐng)求接口(注意不要泄露APIKey,否則其他人就可以用你的接口了)。
開(kāi)發(fā)工具準(zhǔn)備
我是用Visual Studio Code+TRAE AI代碼插件來(lái)使用AI編程(兩個(gè)都是免費(fèi)的),然后在微信開(kāi)發(fā)者工具中模擬測(cè)試,微信開(kāi)發(fā)者工具可以在微信公眾號(hào)平臺(tái)的開(kāi)發(fā)工具里下載,還需要安裝Node.js (網(wǎng)址:https://nodejs.org/zh-cn/)。
不會(huì)安裝或不會(huì)使用的沒(méi)關(guān)系,問(wèn)AI就行,他會(huì)告訴你怎么做,比如如何安裝TRAE插件,可以這樣問(wèn):Visual Studio Code如何安裝TRAE插件?下面是AI的回答。
AI開(kāi)發(fā)
TRAE有個(gè)自動(dòng)化構(gòu)建功能(Builder),也算一個(gè)Agent,對(duì)于不懂編程的推薦使用這個(gè)模式。因?yàn)榫幊痰哪夸浗Y(jié)構(gòu)比較復(fù)雜,如果不懂的可能一開(kāi)始目錄結(jié)構(gòu)就錯(cuò)了,會(huì)踩不少坑。
然后就是給AI聊天發(fā)開(kāi)發(fā)任務(wù)了,我通常會(huì)這樣描述開(kāi)發(fā)任務(wù):
1)這是一個(gè)什么項(xiàng)目:這是一個(gè)新的微信小程序項(xiàng)目(AI會(huì)基于項(xiàng)目類(lèi)型構(gòu)建對(duì)應(yīng)的項(xiàng)目目錄結(jié)構(gòu))
2)頁(yè)面描述:前端界面的描述,比如我的小程序有兩個(gè)界面,我會(huì)告訴AI,這個(gè)小程序有兩個(gè)頁(yè)面,第一個(gè)頁(yè)面有xxx組件,組件排列的次序,組件前面的文字標(biāo)簽是什么,如果是輸入組件輸入的類(lèi)型是什么(比如日期,開(kāi)關(guān),年份)。第二個(gè)頁(yè)面也是類(lèi)似。
3)交互描述:頁(yè)面內(nèi)的交互,比如是否要顯示加載中,點(diǎn)擊按鈕提交前做什么處理(如表單驗(yàn)證),提交后處理,拿到接口結(jié)果后怎么處理。頁(yè)面間如何跳轉(zhuǎn)。
4)業(yè)務(wù)邏輯描述:比如提交按鈕該請(qǐng)求什么接口,接口的關(guān)鍵參數(shù)是什么,像DeepSeek就可以把APIKey,使用的模型給到AI,他會(huì)自動(dòng)編寫(xiě)調(diào)用DeepSeek的接口 —— 畢竟文檔是他自家的。比如下面的DeepSeek接口調(diào)用是AI生成的,然后我改了一下參數(shù)。
基本上按照上面的步驟,在Buidler模式下就會(huì)給你生成一堆目錄和代碼,同時(shí)還會(huì)需要你執(zhí)行一些命令行命令,你要做的就是確認(rèn)(Accept就是接受修改,Run就是運(yùn)行命令)就好了。然后項(xiàng)目目錄就好了。這是我目前這個(gè)小程序的目錄結(jié)構(gòu),大家可以參考一下。注意,需要在project.config.json文件中填寫(xiě)一下appid(也就是前面提到的小程序的AppID)。
所有這些都好了之后,就可以到微信開(kāi)發(fā)者工具模擬運(yùn)行。當(dāng)然,一般來(lái)說(shuō)會(huì)遇到一些問(wèn)題。這個(gè)時(shí)候就把遇到的問(wèn)題復(fù)制下來(lái),扔給AI(切換到Chat模式),然后它會(huì)告訴你怎么處理。調(diào)試器打開(kāi)后,可以在Console欄看到錯(cuò)誤信息,把錯(cuò)誤信息復(fù)制到TRAE里,然后告訴他說(shuō)出現(xiàn)了錯(cuò)誤:xxxx(復(fù)制的錯(cuò)誤信息),AI就會(huì)幫你分析錯(cuò)誤和提供解決方案。
模擬運(yùn)行還會(huì)發(fā)現(xiàn)界面可能不那么美觀,這個(gè)時(shí)候你可以要求AI修改某個(gè)界面的組件樣式,比如:出生日期輸入框的字體要是白色,90%的透明度。AI會(huì)給你生成樣式,應(yīng)用后就可以更改了。
按照上面的方式,多調(diào)整幾次,就可以運(yùn)行起來(lái)了。過(guò)程其實(shí)就是一個(gè)循環(huán):調(diào)整->問(wèn)題->扔給AI調(diào)整……
上架發(fā)布
調(diào)試沒(méi)問(wèn)題之后,就可以在微信開(kāi)發(fā)者工具通過(guò)上傳按鈕提交版本,提交后在小程序后臺(tái)能夠看得到,可以設(shè)置為體驗(yàn)版,然后自己用真機(jī)驗(yàn)證一番。沒(méi)問(wèn)題就可以提交審核了,審核一般1個(gè)工作日,通過(guò)后就可以發(fā)布了。
我這個(gè)易說(shuō)測(cè)測(cè)小程序就兩個(gè)頁(yè)面,大概花了1天時(shí)間完成全部過(guò)程,大家可以搜索體驗(yàn)一下。
后記
對(duì)于不懂編程的產(chǎn)品經(jīng)理來(lái)說(shuō),前期可能會(huì)踩一些坑,建議多嘗試用結(jié)構(gòu)化的方式做表達(dá),AI理解起來(lái)會(huì)更準(zhǔn)確。然后就是,需求盡量明確(和我們自己做產(chǎn)品需求一樣)。我個(gè)人就發(fā)現(xiàn),出現(xiàn)偏差的時(shí)候往往是我的表述沒(méi)那么明確,有時(shí)候AI會(huì)理解錯(cuò),結(jié)果需要反復(fù)調(diào)整。
另外就是調(diào)用DeepSeek的prompt很關(guān)鍵,一個(gè)是對(duì)任務(wù)的prompt要清晰沒(méi)有歧義,否則功能可用性就比較差。一個(gè)是對(duì)輸出格式的要求,因?yàn)镈eepSeek默認(rèn)輸出的是Markdown格式,不是結(jié)構(gòu)化的字段,而且會(huì)夾雜AI自己的總結(jié),在小程序里展示就不太好。我自己就是在調(diào)整輸出HTML網(wǎng)頁(yè)格式的時(shí)候花了不少時(shí)間,最后還是將需求丟給AI,然后AI給了我下面的prompt:
實(shí)際上目前還有很多人不知道怎么用好AI,對(duì)于一些非常細(xì)分的領(lǐng)域,如果我們自己研究出來(lái)了好的prompt,可以使用傳統(tǒng)應(yīng)用的表單形式,讓用戶(hù)填寫(xiě)表單,然后我們?cè)俎D(zhuǎn)成prompt,再將AI結(jié)果呈現(xiàn)給用戶(hù),也能給用戶(hù)創(chuàng)造比較好的價(jià)值。
專(zhuān)欄作家
產(chǎn)品海豚灣,公眾號(hào):產(chǎn)品海豚灣(ID:pm-dophin-bay),人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。技術(shù)出身的產(chǎn)品經(jīng)理,從事過(guò) C 端產(chǎn)品和 B 端產(chǎn)品設(shè)計(jì),擅長(zhǎng) SaaS 產(chǎn)品設(shè)計(jì)、產(chǎn)品架構(gòu)設(shè)計(jì)和需求分析。負(fù)責(zé)的B 端產(chǎn)品完成了完整的從0到1,從1到 N 的過(guò)程,成功簽約行業(yè)百?gòu)?qiáng)客戶(hù)。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!