微信小程式開發提示詞（頁面 WXML / WXSS / JS / JSON 分文件生成、生命週期、登入與分包）
用原生框架開發微信小程式頁面時用：描述頁面功能，得到按小程式目錄規範拆分的四個文件代碼，正確使用生命週期與數據綁定、封裝網絡請求、處理登入態與授權，並提醒包體積、分包和審核相關的注意事項。
通用大模型 對話模型通用
你是一名有多個上線項目經驗的微信小程式開發工程師。請幫我實現一個頁面。 - 頁面路徑與功能：[頁面路徑與功能]（例：pages/order/list 訂單列表，下拉刷新、上拉加載、按狀態切換） - 開發方式：[原生小程式/Taro/uni-app] - 後端接口：[接口地址、參數、返回格式] - 登入方式：[如 wx.login 換取後端登入態] - 需要用到的能力：[如下拉刷新、分享、訂閱消息、掃碼] 要求： 1. 按頁面目錄輸出四個文件：頁面配置、結構、樣式、邏輯，各自職責清楚；需要的話補充公共組件和全局配置中需要增加的內容。 2. 生命週期：說明在頁面加載、顯示、下拉刷新、觸底等生命週期中分別做什麼；避免在顯示時每次都重複請求不需要刷新的數據。 3. 數據綁定：只把介面需要的數據放進頁面數據；修改數據時只更新變化的部分（例如按路徑更新列表中的某一項），避免一次性傳輸大量數據導致卡頓。 4. 網絡請求：封裝統一的請求方法，處理登入態過期後自動重新登入並重試一次、統一錯誤提示、加載狀態；伺服器域名需要在後台配置。 5. 列表：分頁加載、到底提示、空狀態、加載失敗重試，防止快速滾動時重複請求同一頁。 6. 登入與授權：按當前平台規則處理，不在用戶進入頁面時就強制索要個人資料；獲取手機號等能力按官方要求通過按鈕由用戶主動觸發。 7. 性能與包體積：圖片放到伺服器或使用合適的壓縮格式；主包體積受平台限制，說明何時需要分包以及分包的配置方式。 8. 審核提醒：與這個頁面功能相關的常見審核要求（如私隱協議、用戶主動觸發授權）。 涉及平台限制（包體積上限、接口權限、授權規則）的數字和規則，註明「以微信官方文檔當前說明為準」。
高亮處換成你自己的內容：[頁面路徑與功能]、[原生小程式/Taro/uni-app]、[接口地址、參數、返回格式]、[如 wx.login 換取後端登入態]、[如下拉刷新、分享、訂閱消息、掃碼]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[開發方式] 一定要寫清楚：原生小程式、Taro、uni-app 的寫法完全不同。[需要用到的能力] 裏提到的分享、訂閱消息、獲取手機號等能力，各有平台規則和權限要求，AI 會一併提醒。
常見坑：
- 每次更新數據都把整個列表重新傳給頁面，列表一長就明顯卡頓。只更新變化的那一項。
- 用戶一進頁面就彈出授權或索要個人資料，體驗差，也容易在審核時被拒。按需、由用戶主動觸發。
- 登入態過期的處理分散在各個頁面裏，到處重複。在統一的請求方法裏集中處理。
追問技巧：追問「把這個頁面的請求方法封裝成可以在全部頁面複用的模組，並加上請求去重」，或「主包快超出限制了，幫我規劃分包方案」。
示例輸出
示例，僅供參考（邏輯文件節選）
js
// pages/order/list/list.js
const { request } = require('../../../utils/request')
Page({
data: { status: 'all', list: [], page: 1, loading: false, finished: false },
onLoad() { this.loadPage(true) },
onPullDownRefresh() {
this.loadPage(true).finally(() => wx.stopPullDownRefresh())
},
onReachBottom() { this.loadPage(false) },
async loadPage(reset) {
if (this.data.loading || (!reset && this.data.finished)) return // 防止重複請求
const page = reset ? 1 : this.data.page
this.setData({ loading: true })
try {
const res = await request({ url: '/api/orders', data: { status: this.data.status, page } })
this.setData({
list: reset ? res.items : this.data.list.concat(res.items),
page: page + 1,
finished: res.items.length < 20,
})
} catch (e) {
wx.showToast({ title: '加載失敗，下拉重試', icon: 'none' })
} finally {
this.setData({ loading: false })
}
},
})同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～