微信小程式和 Web 開發完全是兩個物種:
wx.setStorage)wx.navigateTo 那一套)這個 skill 幫你:
不做的事:不替你寫完整業務程式碼(場景太多);不做 UI 設計;不做支付證書申請那種純賬號工作。
| 原生(WXML/WXSS/JS) | Taro(React 風格) | uni-app(Vue 風格) | |
|---|---|---|---|
| 學習成本 | 低(看官方文件 1 周) | 中(要會 React) | 中(要會 Vue) |
| 開發效率 | 中 | 高(元件化) | 高(生態成熟) |
| 效能 | 最好(原生) | 好(編譯後接近原生) | 好 |
| 多端編譯 | 只能微信 | ✅ 微信 / 支付寶 / H5 / RN | ✅ 微信 / 支付寶 / 抖音 / H5 / App |
| 除錯 | 最穩(官方工具) | 中(多一層編譯) | 中(多一層編譯) |
| 生態 | 官方元件 | React 生態 | Vue 生態 + DCloud 外掛市場 |
| 適合 | 純微信 / 效能要求高 | React 團隊 / 多端 | Vue 團隊 / 跨端跨平臺 |
是不是隻釋出微信?
├─ 是 → 團隊會 React 嗎?
│ ├─ 會 → Taro(更現代)或 原生(更穩)
│ └─ 不會 → 原生(學習成本最低)
└─ 否(要發抖音 / 支付寶 / H5 / App)→
├─ 團隊 React → Taro
└─ 團隊 Vue → uni-app(多端相容性最好)
// 1. 拿臨時登入憑證
wx.login({
success: async (res) => {
// res.code 5 分鐘有效,要立即發給後端
const { openid, session_key } = await fetch('/api/wx/login', {
method: 'POST',
body: JSON.stringify({ code: res.code })
}).then(r => r.json())
// 儲存 openid 到本地
wx.setStorageSync('openid', openid)
}
})
// 2. 後端用 code 換 openid(必須服務端做,不能前端)
// GET https://api.weixin.qq.com/sns/jscode2session?
// appid=xxx&secret=xxx&js_code=CODE&grant_type=authorization_code
坑:
wx.getUserInfo 2021 年起已廢棄,必須用 <button open-type="getUserProfile"> 主動觸發<button open-type="chooseAvatar"> 單獨獲取<button open-type="getPhoneNumber"> 使用者主動授權 → 後端解密// 前端:調起支付
wx.requestPayment({
timeStamp: '...', // 來自後端
nonceStr: '...',
package: 'prepay_id=...',
signType: 'MD5',
paySign: '...',
success: (res) => { /* 支付成功 */ },
fail: (err) => { /* 支付失敗/取消 */ }
})
// 後端流程:
// 1. 建立訂單到自己資料庫
// 2. 調微信統一下單 API(unifiedorder)
// 3. 拿到 prepay_id,組裝支付引數 + sign 給前端
// 4. 監聽微信回撥(必須驗籤 + 冪等處理)
// 5. 更新訂單狀態
坑:
// 前端:使用者點選觸發,請求訂閱
wx.requestSubscribeMessage({
tmplIds: ['xxx', 'xxx'], // 後臺預先申請的模板 ID
success: (res) => { /* res 裡看每個模板是否同意 */ }
})
// 後端:使用者操作後傳送
POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send
{
"touser": "使用者 openid",
"template_id": "xxx",
"page": "pages/order/detail?id=123",
"data": { "thing1": { "value": "您的訂單已發貨" } }
}
坑:
// 同步(小資料量,<10KB 推薦)
wx.setStorageSync('key', value)
const value = wx.getStorageSync('key')
// 非同步(推薦用法)
wx.setStorage({ key, data })
// 單 key 上限 1MB,整個小程式 10MB
7w4.net小蔥技能站收錄全網優質技能,值得收藏。
app.json 裡配 __usePrivacyCheck__: truewx.requirePrivacyAuthorize)| 項 | 要求 |
|---|---|
| 隱私協議 | 必須 + 使用者主動同意(2024 起強審) |
| 使用者資料收集 | 必須最小化、必須告知 |
| 第三方 SDK | 必須在隱私協議中列出(如友盟、Bugly) |
| 個人小程式 | 不能做電商 / 金融 / 醫療 / 教育(必須企業資質) |
| 內容安全 | 使用者輸入文字 / 圖片必須過 security.msgSecCheck 內容安全 API |
| ICP 備案 | 伺服器域名必須備案(境內)+ ICP 證(電商類) |
按問題型別給:
## 你的問題
(複述)
## 推薦方案
(選型 / 架構 / API / 修復)
## 程式碼示例
```javascript
// 註釋清楚,不寫廢話
不主動寫完整業務程式碼(場景太多);不主動給完整 UI 實現。
這個 Skill 質量較好,針對微信小程式開發者的實際痛點編寫,覆蓋全面且實用。優勢在於內容接地氣(稽核避坑、支付整合等本土化問題)、程式碼示例可執行、常見坑點標註清晰。不足之處是缺少示例演示和 FAQ,實際使用時可能需要結合其他資料學習。