戰(zhàn):非程序員如何用AI開(kāi)發(fā)微信小程序?)
最近這段時(shí)間AI 編程從一個(gè)“程序員才能玩”的新奇玩具變成了很多非技術(shù)崗位也能上手的生產(chǎn)力工具。最典型的例子不是誰(shuí)用 AI 寫(xiě)出了多復(fù)雜的系統(tǒng)而是一個(gè)不懂代碼的設(shè)計(jì)師靠 AI 編程工具做了一個(gè)微信小程序用來(lái)做交通調(diào)查。這件事本身并不驚天動(dòng)地但它反映了一個(gè)真實(shí)趨勢(shì)AI 編程真正降低的不是“寫(xiě)代碼”的難度而是“把想法變成可用工具”的門(mén)檻。設(shè)計(jì)師不需要理解函數(shù)和類(lèi)但她需要把需求講清楚把 AI 生成的代碼粘貼到微信開(kāi)發(fā)者工具里然后解決一個(gè)又一個(gè)看起來(lái)莫名其妙的報(bào)錯(cuò)。這篇文章不會(huì)講那些“一句話生成 App”的營(yíng)銷(xiāo)故事而是以“交查助手”這類(lèi)交通調(diào)查小程序?yàn)楸尘安鸾庖粋€(gè)非程序員用 AI 編程開(kāi)發(fā)微信小程序的完整路徑需求怎么拆、提示詞怎么給、AI 生成的代碼怎么驗(yàn)證、遇到問(wèn)題怎么排查。如果你也在考慮用 AI 編程做點(diǎn)小工具這篇文章應(yīng)該能讓你少走很多彎路。1. 這篇文章真正要解決的問(wèn)題交通調(diào)查在很多行業(yè)都存在路口車(chē)流量統(tǒng)計(jì)、停車(chē)場(chǎng)占用率、小區(qū)周邊非機(jī)動(dòng)車(chē)停放數(shù)量、公交站點(diǎn)乘客上下車(chē)情況。過(guò)去這些數(shù)據(jù)的收集方式非常原始基本是靠紙質(zhì)表或 Excel 手記然后回辦公室再錄入電腦。效率低容易出錯(cuò)并且現(xiàn)場(chǎng)數(shù)據(jù)難以做到定位留痕?!敖徊橹帧边@類(lèi)小程序想解決的就是這個(gè)問(wèn)題調(diào)查員用手機(jī)完成現(xiàn)場(chǎng)填報(bào)數(shù)據(jù)直接進(jìn)入云端數(shù)據(jù)庫(kù)后臺(tái)可以實(shí)時(shí)匯總和導(dǎo)出。理論上這需要一個(gè)小程序開(kāi)發(fā)團(tuán)隊(duì)至少需要后端開(kāi)發(fā)。但現(xiàn)在一個(gè)不會(huì)寫(xiě)代碼的設(shè)計(jì)師可以通過(guò) AI 編程把前端頁(yè)面、交互邏輯、定位功能和云存儲(chǔ)全部做出來(lái)。這篇文章重點(diǎn)要講三件事。第一AI 編程適合解決哪些“小場(chǎng)景、單體件、工具型”的需求第二微信小程序 云開(kāi)發(fā)的模式下AI 生成的代碼如何組織、如何調(diào)試第三非程序員在使用 AI 編程時(shí)最容易在哪些環(huán)節(jié)卡住以及對(duì)應(yīng)的排查思路。2. AI 編程與傳統(tǒng)開(kāi)發(fā)方式的差異理解 AI 編程的價(jià)值得先認(rèn)清傳統(tǒng)開(kāi)發(fā)流程中的成本分布。假設(shè)你要做一個(gè)最簡(jiǎn)單的交通調(diào)查小程序傳統(tǒng)流程大致是需求溝通、原型設(shè)計(jì)、前端開(kāi)發(fā)、后端開(kāi)發(fā)、測(cè)試聯(lián)調(diào)、部署上線。其中前端要熟悉小程序語(yǔ)法后端要考慮服務(wù)器、數(shù)據(jù)庫(kù)、接口鑒權(quán)。整個(gè)過(guò)程對(duì)專(zhuān)業(yè)背景要求很高而且大部分成本發(fā)生在“把需求翻譯成代碼”這一步。AI 編程改變了這個(gè)翻譯過(guò)程。你不需要自己掌握每種技術(shù)棧的語(yǔ)法而是通過(guò)自然語(yǔ)言描述需求AI 生成對(duì)應(yīng)的代碼。這帶來(lái)的效果是一個(gè)非技術(shù)人員可以獲得“接近初級(jí)工程師”的代碼產(chǎn)出能力。但注意是“接近”不是“超越”。AI 生成的代碼仍可能出錯(cuò)處理不了復(fù)雜業(yè)務(wù)也不知道你的工程文件放在哪里。更準(zhǔn)確地說(shuō)AI 編程解決的是“寫(xiě)代碼”的邊際成本但“運(yùn)行、調(diào)試、部署、發(fā)布”這部分成本依然存在并且往往成為非程序員最大的障礙。所以這篇文章反復(fù)強(qiáng)調(diào)一個(gè)觀點(diǎn)用 AI 編程做小程序的真正門(mén)檻不是“寫(xiě)”而是“驗(yàn)”——驗(yàn)證 AI 生成的代碼是否和你的需求一致是否在當(dāng)前工程環(huán)境里能跑起來(lái)。下面用一個(gè)典型的交通調(diào)查小程序來(lái)拆解整個(gè)過(guò)程。3. 交查助手的功能需求拆解小程序之所以適合 AI 編程是因?yàn)樗墓δ苓吔缜逦鷨雾?yè)面邏輯相對(duì)簡(jiǎn)單還有微信云開(kāi)發(fā)這種“免后端”方案。如果要做復(fù)雜的多人協(xié)作、權(quán)限管理和報(bào)表系統(tǒng)AI 編程能幫的忙會(huì)小很多因?yàn)殡y度主要在架構(gòu)設(shè)計(jì)上?!敖徊橹帧钡牡湫凸δ芸梢圆鸪晌鍌€(gè)模塊模塊功能主要技術(shù)點(diǎn)登錄通過(guò)微信手機(jī)號(hào)快速注冊(cè)/登錄wx.login、getPhoneNumber調(diào)查問(wèn)卷選擇方向、填寫(xiě)數(shù)量、記錄時(shí)間表單、picker、input定位記錄調(diào)查點(diǎn)位經(jīng)緯度wx.getLocation、地圖選點(diǎn)數(shù)據(jù)存儲(chǔ)上報(bào)數(shù)據(jù)自動(dòng)寫(xiě)入云端云開(kāi)發(fā)數(shù)據(jù)庫(kù)數(shù)據(jù)查看匯總當(dāng)天填報(bào)記錄列表查詢(xún)、條件篩選這五個(gè)模塊就是一個(gè)非常好的 AI 編程提示詞單位。不要一次性讓 AI 生成整個(gè)小程序而是按模塊拆開(kāi)分別讓 AI 生成頁(yè)面和邏輯。如果是不懂代碼的設(shè)計(jì)師一開(kāi)始最容易犯的錯(cuò)誤是打開(kāi)一個(gè)聊天窗口輸入“幫我做一個(gè)小程序”。這個(gè)提示詞太模糊AI 會(huì)給出一個(gè)復(fù)雜且不完整的大綱或者生成一堆看似合理但根本無(wú)法直接運(yùn)行的文件。正確的做法是把功能需求拆成上面表格里的顆粒度然后針對(duì)每個(gè)模塊單獨(dú)生成代碼。4. 用 AI 編程開(kāi)發(fā)小程序的整體流程整個(gè)流程可以概括為六個(gè)步驟這也是非程序員第一次嘗試時(shí)最容易上手的路徑。4.1 注冊(cè)微信小程序賬號(hào)并準(zhǔn)備工具要先到微信公眾平臺(tái)注冊(cè)小程序賬號(hào)個(gè)人主體即可適合調(diào)試和學(xué)習(xí)。如果需要開(kāi)通微信支付、獲取用戶手機(jī)號(hào)則需要企業(yè)主體并且需要完成認(rèn)證。下載微信開(kāi)發(fā)者工具創(chuàng)建一個(gè)原生小程序項(xiàng)目空目錄就行。4.2 決定使用云開(kāi)發(fā)還是自建后端強(qiáng)烈推薦云開(kāi)發(fā)。它是微信官方提供的后端方案包含數(shù)據(jù)庫(kù)、云函數(shù)、存儲(chǔ)和調(diào)用能力。對(duì) AI 編程來(lái)說(shuō)云開(kāi)發(fā)意味著 AI 生成前端代碼后你不需要額外生成后端接口前端代碼可以直接調(diào)用wx.cloud.database()讀寫(xiě)數(shù)據(jù)。4.3 用 AI 工具逐頁(yè)生成代碼在項(xiàng)目根目錄下先確認(rèn)頁(yè)面路徑規(guī)劃。頁(yè)面不算多index首頁(yè)、survey填報(bào)頁(yè)、records記錄列表、mine個(gè)人中心。然后一個(gè)一個(gè)讓 AI 生成比如“生成 survey 頁(yè)面的 wxml 和 js完成表單和定位功能”。4.4 粘貼代碼并編譯AI 生成代碼后要把文件分別放入對(duì)應(yīng)目錄。這一步看似簡(jiǎn)單但最容易出錯(cuò)AI 可能把整個(gè)頁(yè)面代碼放在一個(gè)代碼塊里需要你手動(dòng)拆分到.wxml、.js、.json、.wxss四個(gè)文件。拆好后點(diǎn)編譯微信開(kāi)發(fā)者工具會(huì)直接告訴你語(yǔ)法錯(cuò)誤和路徑錯(cuò)誤。4.5 逐步驗(yàn)證每個(gè)功能每個(gè)頁(yè)面編譯通過(guò)后再用微信開(kāi)發(fā)者工具里的“模擬器”點(diǎn)一遍。比如點(diǎn)擊提交按鈕看數(shù)據(jù)有沒(méi)有寫(xiě)入云數(shù)據(jù)庫(kù)點(diǎn)擊定位按鈕看有沒(méi)有彈出授權(quán)框。這一步是最花時(shí)間的也是 AI 編程最有價(jià)值的部分——你不需要寫(xiě)代碼但你需要理解每個(gè)交互動(dòng)作背后的數(shù)據(jù)流轉(zhuǎn)。4.6 真機(jī)預(yù)覽與提審發(fā)布模擬器通過(guò)后要真機(jī)預(yù)覽。兩個(gè)環(huán)境有差異尤其是授權(quán)彈窗、定位精度和手機(jī)號(hào)獲取。最后按微信小程序提審要求填寫(xiě)類(lèi)目信息等待審核通過(guò)后即可上線。5. 環(huán)境準(zhǔn)備與前置條件如果讀者打算自己動(dòng)手復(fù)現(xiàn)一個(gè)類(lèi)似“交查助手”的小程序我建議按下面的環(huán)境來(lái)準(zhǔn)備。微信開(kāi)發(fā)者工具穩(wěn)定版即可版本號(hào)以官網(wǎng)最新版為準(zhǔn)本文演示的是通用思路。微信小程序賬號(hào)個(gè)人主體和企業(yè)主體都可以只是部分能力受限。云開(kāi)發(fā)環(huán)境在開(kāi)發(fā)者工具中創(chuàng)建云環(huán)境環(huán)境 ID 會(huì)被寫(xiě)進(jìn)app.js。AI 編程工具可選擇 Claude、ChatGPT、Cursor、Codex 等不需要區(qū)分哪家最強(qiáng)能輸出代碼塊的都可以。先創(chuàng)建一個(gè)空項(xiàng)目。創(chuàng)建成功后開(kāi)發(fā)者工具會(huì)自動(dòng)生成pages/index目錄。后面所有 AI 生成的頁(yè)面都要放到pages目錄下并在app.json中注冊(cè)頁(yè)面路徑。app.json是全局配置文件AI 生成代碼后經(jīng)常容易忽略它。如果你新增了一個(gè)頁(yè)面但沒(méi)注冊(cè)編譯時(shí)一定會(huì)報(bào)錯(cuò)。下面這個(gè)示例是把“survey”頁(yè)面加進(jìn)去{ pages: [ pages/index/index, pages/survey/survey, pages/records/records, pages/mine/mine ], window: { navigationBarTitleText: 交查助手, navigationBarBackgroundColor: #2c3e50, navigationBarTextStyle: white }, permission: { scope.userLocation: { desc: 用于記錄當(dāng)前調(diào)查點(diǎn)位的位置信息 } } }這里的permission字段非常重要如果不配置用戶拒絕定位授權(quán)時(shí)小程序不能彈出帶有說(shuō)明的授權(quán)框。6. 核心示例從提示詞到可運(yùn)行代碼這一節(jié)給出一個(gè)完整的最小示例覆蓋一個(gè)交通調(diào)查記錄頁(yè)面的核心邏輯。先看提示詞再看 AI 應(yīng)該給出的代碼最后說(shuō)明每個(gè)部分的用途。6.1 示例提示詞復(fù)制下面這段話給 AI 工具你是一名熟悉微信小程序原生開(kāi)發(fā)的工程師。請(qǐng)為我生成一個(gè)“交通流量記錄”頁(yè)面要求使用原生微信小程序語(yǔ)法文件包含 index.wxml、index.js、index.wxss、index.json。頁(yè)面功能如下 1. 頂部顯示當(dāng)前調(diào)查點(diǎn)位點(diǎn)擊后調(diào)用 wx.getLocation 獲取經(jīng)緯度并展示。 2. 有一個(gè)下拉選擇器選項(xiàng)為東、南、西、北。 3. 有一個(gè)數(shù)字輸入框用于填寫(xiě)15分鐘內(nèi)通過(guò)的機(jī)動(dòng)車(chē)數(shù)量。 4. 有一個(gè)“提交記錄”按鈕點(diǎn)擊后校驗(yàn)數(shù)據(jù)然后通過(guò)云開(kāi)發(fā)數(shù)據(jù)庫(kù)將記錄保存到名為 traffic_survey 的集合中。 5. 保存成功后顯示“提交成功”并清空表單。 請(qǐng)給出完整代碼并在關(guān)鍵函數(shù)處添加中文注釋。這個(gè)提示詞的特點(diǎn)是指定技術(shù)棧、指定文件、指定功能、指定數(shù)據(jù)處理方式。信息越具體AI 生成代碼的可用率就越高。6.2 頁(yè)面布局index.wxmlview classcontainer view classcard view classcard-title當(dāng)前調(diào)查點(diǎn)位/view view classlocation bindtapchooseLocation {{locationText || 點(diǎn)擊獲取當(dāng)前位置}} /view /view view classcard view classcard-title行駛方向/view picker modeselector range{{directions}} bindchangeonDirectionChange view classpicker-value{{directions[directionIndex]}}/view /picker /view view classcard view classcard-title15分鐘通過(guò)數(shù)量/view input typenumber placeholder請(qǐng)輸入車(chē)輛數(shù)量 value{{count}} bindinputonCountInput/ /view button classsubmit-btn bindtapsubmitRecord提交記錄/button /view這個(gè) WXML 文件定義了一個(gè)非常常見(jiàn)的表單界面。重點(diǎn)在于bindtap和bindinput這是小程序的事件綁定方式AI 生成代碼后你需要檢查每個(gè)事件名和 JS 里定義的函數(shù)名是否一致。不一致時(shí)按鈕點(diǎn)擊不會(huì)有任何反應(yīng)這是新手最容易忽略的坑。6.3 頁(yè)面邏輯index.jsconst app getApp(); Page({ data: { directions: [東, 南, 西, 北], directionIndex: 0, count: , locationText: , latitude: , longitude: }, // 獲取當(dāng)前經(jīng)緯度 chooseLocation() { const self this; wx.getLocation({ type: gcj02, success(res) { self.setData({ latitude: res.latitude, longitude: res.longitude, locationText: res.latitude.toFixed(5) , res.longitude.toFixed(5) }); wx.showToast({ title: 定位成功, icon: success }); }, fail() { wx.showToast({ title: 定位失敗請(qǐng)檢查授權(quán), icon: none }); } }); }, onDirectionChange(e) { this.setData({ directionIndex: Number(e.detail.value) }); }, onCountInput(e) { this.setData({ count: e.detail.value }); }, // 提交到云開(kāi)發(fā)數(shù)據(jù)庫(kù) submitRecord() { const self this; const count Number(this.data.count); if (!this.data.latitude || !this.data.longitude) { wx.showToast({ title: 請(qǐng)先獲取定位, icon: none }); return; } if (!count || count 0) { wx.showToast({ title: 請(qǐng)?zhí)顚?xiě)有效的數(shù)量, icon: none }); return; } const db wx.cloud.database(); db.collection(traffic_survey).add({ data: { direction: this.data.directions[this.data.directionIndex], count: count, latitude: this.data.latitude, longitude: this.data.longitude, createTime: db.serverDate() }, success(res) { wx.showToast({ title: 提交成功, icon: success }); self.setData({ count: , locationText: , latitude: , longitude: }); }, fail(err) { console.error(提交失敗, err); wx.showToast({ title: 提交失敗, icon: none }); } }); } });這段代碼整體邏輯并不復(fù)雜但里面有幾個(gè)關(guān)鍵點(diǎn)決定了能否正常輸出結(jié)果第一數(shù)據(jù)庫(kù)集合必須先存在。在云開(kāi)發(fā)控制臺(tái)里如果traffic_survey集合不存在add操作會(huì)報(bào)錯(cuò)。AI 生成代碼時(shí)不會(huì)提醒你創(chuàng)建集合所以這一步要靠自己完成。第二定位和表單校驗(yàn)必須做在前端。如果沒(méi)獲取位置就提交云端記錄就沒(méi)有坐標(biāo)如果數(shù)量為空記錄就是無(wú)效數(shù)據(jù)。這種基礎(chǔ)校驗(yàn)最好由前端攔截既不影響云端數(shù)據(jù)質(zhì)量也能給用戶即時(shí)反饋。第三數(shù)據(jù)寫(xiě)入之后的回調(diào)函數(shù)里清空表單。setData后再重置data這樣下一次調(diào)查可以重新填寫(xiě)。6.4 頁(yè)面樣式index.wxss.container { padding: 24rpx; background-color: #f6f6f6; min-height: 100vh; } .card { background-color: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; } .card-title { font-size: 28rpx; color: #333; margin-bottom: 16rpx; } .location { padding: 20rpx; background-color: #fafafa; border-radius: 8rpx; color: #576b95; } .picker-value { padding: 20rpx; background-color: #fafafa; border-radius: 8rpx; } input { border: 1px solid #eee; border-radius: 8rpx; padding: 16rpx; } .submit-btn { background-color: #2c3e50; color: #fff; border-radius: 8rpx; margin-top: 16rpx; }樣式不復(fù)雜但它是讓小程序看起來(lái)不像“半成品”的關(guān)鍵。AI 生成的樣式通常比較粗糙可以自己改配色和間距。設(shè)計(jì)師做這件事有天然優(yōu)勢(shì)。6.5 云開(kāi)發(fā)初始化app.jsApp({ onLaunch() { if (!wx.cloud) { console.error(請(qǐng)使用 2.2.3 或以上的基礎(chǔ)庫(kù)以使用云能力); return; } wx.cloud.init({ env: your-cloud-env-id, traceUser: true }); } });將env替換成你自己的云環(huán)境 ID。獲取方式是在開(kāi)發(fā)者工具頂部點(diǎn)擊“云開(kāi)發(fā)”進(jìn)入控制臺(tái)后能看到環(huán)境 ID。如果初始化失敗后面所有云數(shù)據(jù)庫(kù)操作都會(huì)返回-502002、-404之類(lèi)的錯(cuò)誤。很多新手以為是自己代碼寫(xiě)錯(cuò)了其實(shí)只是環(huán)境沒(méi)有配對(duì)。7. 運(yùn)行結(jié)果與效果驗(yàn)證代碼寫(xiě)完后最重要的環(huán)節(jié)是驗(yàn)證每一步是否真實(shí)可用。下面是我建議的驗(yàn)證順序。7.1 編譯檢查點(diǎn)擊微信開(kāi)發(fā)者工具左上角的“編譯”按鈕。如果出現(xiàn)紅色報(bào)錯(cuò)先看錯(cuò)誤定位到哪個(gè)文件。經(jīng)常出現(xiàn)的情況有page is not defined說(shuō)明 JS 文件里的Page()函數(shù)寫(xiě)成了Component()或漏寫(xiě)。Cannot read property setData of undefined多半是回調(diào)函數(shù)里this指向問(wèn)題需要用const self this;或在箭頭函數(shù)中操作。app.json: 未找到頁(yè)面路徑 pages/survey/survey檢查文件是否真的存在以及pages數(shù)組是否寫(xiě)錯(cuò)大小寫(xiě)。7.2 功能點(diǎn)逐一測(cè)試在模擬器中用鼠標(biāo)點(diǎn)擊“獲取當(dāng)前位置”會(huì)彈出一個(gè)授權(quán)窗口。允許之后經(jīng)緯度會(huì)顯示在界面上。如果點(diǎn)擊沒(méi)反應(yīng)很可能是bindtap拼寫(xiě)成了bindtap以外的事件名或者函數(shù)名不一致。填寫(xiě)方向和數(shù)量后點(diǎn)擊“提交記錄”如果頁(yè)面提示“提交成功”打開(kāi)云開(kāi)發(fā)控制臺(tái)點(diǎn)擊“數(shù)據(jù)庫(kù)”找到traffic_survey集合你應(yīng)該能看到一條新記錄包含direction、count、latitude、longitude和createTime字段。7.3 真機(jī)驗(yàn)證模擬器通過(guò)不等于真機(jī)通過(guò)。尤其是定位功能模擬器用的是電腦的 IP 定位經(jīng)緯度并不準(zhǔn)確。建議點(diǎn)擊開(kāi)發(fā)者工具工具欄的“預(yù)覽”二維碼用手機(jī)打開(kāi)小程序在戶外實(shí)際走一圈確認(rèn)經(jīng)緯度變化并再次提交一條測(cè)試數(shù)據(jù)。如果真機(jī)上定位失敗先檢查手機(jī)是否開(kāi)啟定位服務(wù)、微信是否獲得了定位權(quán)限以及app.json中permission配置是否存在。8. 常見(jiàn)問(wèn)題與排查思路下面這幾個(gè)問(wèn)題是“交查助手”這類(lèi)小程序最容易遇到的AI 編程生成代碼后也很容易踩中。問(wèn)題現(xiàn)象可能原因排查方式解決方案編譯報(bào)錯(cuò)“未找到頁(yè)面路徑”頁(yè)面目錄不存在或app.json未注冊(cè)檢查文件是否在pages目錄下創(chuàng)建文件或在app.json補(bǔ)上路徑點(diǎn)擊提交按鈕無(wú)反應(yīng)事件綁定名與函數(shù)名不一致檢查 WXML 中的bindtap和 JS 中函數(shù)名統(tǒng)一事件綁定名稱(chēng)定位失敗或無(wú)法彈窗未配置permission或用戶拒絕授權(quán)查看app.json并在微信設(shè)置里檢查授權(quán)配置permission引導(dǎo)用戶手動(dòng)授權(quán)云開(kāi)發(fā)添加記錄失敗環(huán)境 ID 錯(cuò)誤、未初始化或集合不存在看 console 報(bào)錯(cuò)打開(kāi)云開(kāi)發(fā)控制臺(tái)修改app.js創(chuàng)建對(duì)應(yīng)集合數(shù)據(jù)提交成功但列表不顯示查詢(xún)條件寫(xiě)錯(cuò)或集合權(quán)限設(shè)置不正確在數(shù)據(jù)庫(kù)控制臺(tái)手動(dòng)查詢(xún)調(diào)整數(shù)據(jù)庫(kù)權(quán)限為“僅創(chuàng)建者可讀寫(xiě)”或“所有用戶可讀”手機(jī)號(hào)獲取失敗小程序主體不是企業(yè)或未觸發(fā)真實(shí)手機(jī)號(hào)按鈕查看 console 錯(cuò)誤碼企業(yè)認(rèn)證用button open-typegetPhoneNumber獲取這里再?gòu)?qiáng)調(diào)一個(gè)很多人忽略的點(diǎn)AI 生成的代碼在語(yǔ)法上通常是完美的所以當(dāng)功能表現(xiàn)異常時(shí)問(wèn)題往往出在環(huán)境配置、事件綁定、權(quán)限設(shè)置和集合存在性這四個(gè)方面。不要急著懷疑 AI 寫(xiě)錯(cuò)了先把運(yùn)行環(huán)境排查完。9. 數(shù)據(jù)庫(kù)權(quán)限與數(shù)據(jù)安全設(shè)置交通調(diào)查數(shù)據(jù)往往會(huì)涉及具體位置和拍攝照片屬于敏感的個(gè)人信息在設(shè)計(jì)小程序時(shí)要把安全和隱私放在首位不能因?yàn)槭切」ぞ呔头潘?。微信云開(kāi)發(fā)數(shù)據(jù)庫(kù)默認(rèn)權(quán)限是“僅創(chuàng)建者可讀寫(xiě)”也就是說(shuō)某個(gè)用戶提交的數(shù)據(jù)只有他自己能看。如果你是團(tuán)隊(duì)內(nèi)部工具所有人都要能讀最全的數(shù)據(jù)那可以改成“所有用戶可讀僅創(chuàng)建者可寫(xiě)”。在云開(kāi)發(fā)控制臺(tái)里可以一鍵修改。個(gè)人主體小程序還有一個(gè)限制數(shù)據(jù)庫(kù)的權(quán)限邏輯不能做到字段級(jí)控制。所以更穩(wěn)妥的做法是在云函數(shù)中讀取數(shù)據(jù)庫(kù)然后在小程序端只調(diào)用云函數(shù)。這樣權(quán)限控制完全掌握在云函數(shù)代碼中不會(huì)因?yàn)榭蛻舳藬?shù)據(jù)庫(kù)權(quán)限設(shè)置不當(dāng)而泄露數(shù)據(jù)。此外建議在提交表單前提醒用戶“本次位置和記錄將上傳用于交通調(diào)查”并讓用戶主動(dòng)勾選同意。雖然這是合規(guī)咨詢(xún)的問(wèn)題但從工程習(xí)慣來(lái)說(shuō)提示文案一定要放在首次使用時(shí)的彈窗或頁(yè)面上。10. 非程序員使用 AI 編程的最佳實(shí)踐對(duì)于真正不懂代碼的設(shè)計(jì)師、產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員用 AI 編程開(kāi)發(fā)小程序完全可以走通但有幾個(gè)經(jīng)過(guò)驗(yàn)證的習(xí)慣能大幅提高成功率。10.1 把需求寫(xiě)成“給程序員看”的風(fēng)格不要對(duì) AI 說(shuō)“我想要一個(gè)統(tǒng)計(jì)車(chē)輛的功能”要說(shuō)“請(qǐng)生成一個(gè)頁(yè)面包含一個(gè)數(shù)字輸入框和一個(gè)提交按鈕點(diǎn)擊提交后通過(guò)云開(kāi)發(fā)把數(shù)據(jù)寫(xiě)到 traffic_survey 集合”。AI 非常擅長(zhǎng)理解工程表達(dá)不擅長(zhǎng)猜你的需求。寫(xiě)好一段描述功能的最小提示詞比反復(fù)讓 AI 幫你設(shè)計(jì)界面更高效。10.2 一次只讓 AI 做一件事很多人在同一個(gè)對(duì)話框里不斷追加需求看起來(lái)方便但 AI 容易遺忘原上下文也容易生成結(jié)構(gòu)混亂的代碼。建議每次對(duì)話只生成一個(gè)頁(yè)面或一個(gè)函數(shù)生成后立刻粘貼到項(xiàng)目里編譯驗(yàn)證。通過(guò)了再開(kāi)下一個(gè)功能。10.3 保存自己維護(hù)好的提示詞把成功調(diào)通功能的提示詞保存成文檔。下一次做類(lèi)似小程序時(shí)可以直接復(fù)制出來(lái)修改。這也是非程序員做 AI 編程資產(chǎn)的積累方式比收藏一堆教程文章更實(shí)用。10.4 學(xué)會(huì)看錯(cuò)誤提示而不是直接再問(wèn)一遍 AI當(dāng)報(bào)錯(cuò)出現(xiàn)時(shí)不要急著把錯(cuò)誤信息原樣甩給 AI 讓它再生成一遍??梢韵扔梦⑿砰_(kāi)發(fā)者工具自帶的“調(diào)試器”查看 console 輸出很多錯(cuò)誤信息已經(jīng)告訴你了是文件沒(méi)找到還是權(quán)限不足還是 API 不存在。學(xué)會(huì)讀錯(cuò)誤提示是 AI 編程時(shí)代最重要的基礎(chǔ)能力。10.5 不要跳過(guò)真機(jī)預(yù)覽沒(méi)有真機(jī)預(yù)覽你永遠(yuǎn)不知道用戶真正打開(kāi)小程序時(shí)的體驗(yàn)。地理定位、網(wǎng)絡(luò)請(qǐng)求、頁(yè)面渲染在真機(jī)上和模擬器差別很大。真機(jī)報(bào)錯(cuò)后還可以在開(kāi)發(fā)者工具里打開(kāi)“真機(jī)調(diào)試”模式直接看手機(jī)端的控制臺(tái)日志。10.6 保持對(duì)核心概念的理解雖然不用背語(yǔ)法但下面幾個(gè)概念必須理解否則無(wú)法排查問(wèn)題Page和Component的區(qū)別頁(yè)面數(shù)據(jù)放在data用setData更新。事件綁定WXML 里寫(xiě)bindtapJS 里就要有同名函數(shù)。云開(kāi)發(fā)調(diào)用客戶端可以直接讀數(shù)據(jù)庫(kù)但復(fù)雜操作要放云函數(shù)。異步回調(diào)success函數(shù)里的代碼不會(huì)立刻執(zhí)行但同步代碼會(huì)先執(zhí)行。理解了這些AI 生成的代碼對(duì)你來(lái)說(shuō)就不再是黑盒。11. 總結(jié)AI 編程讓“能做小程序”不再是程序員特權(quán)回到最開(kāi)始那個(gè)設(shè)計(jì)師。她不需要知道wx.getLocation底層是 GPS 還是基站定位也不需要理解數(shù)據(jù)庫(kù)索引但她能理解調(diào)查業(yè)務(wù)邏輯能把一條條需求拆給 AI能在報(bào)錯(cuò)時(shí)判斷是權(quán)限問(wèn)題還是邏輯問(wèn)題。這正是 AI 編程帶給普通開(kāi)發(fā)者的最大價(jià)值?!敖徊橹帧边@個(gè)小程序的完整實(shí)現(xiàn)本質(zhì)上就是“需求拆解 AI 生成代碼 工程驗(yàn)證”這套方法論的一次實(shí)踐。它證明了只要愿意花時(shí)間理解基本概念完全可以跨過(guò)代碼這道墻做出真正可用的工具。如果你也打算用 AI 編程做點(diǎn)東西我的建議非常簡(jiǎn)單先選一個(gè)最小需求比如“記錄每次調(diào)查數(shù)據(jù)并保存到云端”然后照著本文第 6 節(jié)的方式把提示詞發(fā)給 AI把代碼粘進(jìn)微信開(kāi)發(fā)者工具跑通一次再說(shuō)。第一次成功之后你會(huì)發(fā)現(xiàn)后續(xù)的每一個(gè)功能都在不斷放大你對(duì)“自己動(dòng)手做軟件”這件事的信心。AI 編程不是取代程序員而是讓“想法生成工具”這件事變得更快、更便宜也更有趣。對(duì)于設(shè)計(jì)師、產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員來(lái)說(shuō)這可能是目前技術(shù)發(fā)展給非技術(shù)崗位最好的禮物。