Wechat Miniprogram Skill

作者 Gourdbaby36bd11b412117d71b07747ad2fda1115c00afe59無授權條款9 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫8 個月前更新

Expert guidelines for Native WeChat Mini Program development focusing on performance, code size, and native compatibility. Use when developing WeChat Mini Programs in native JavaScript.

AI 產生的概覽

針對原生微信小程式 JavaScript 開發的規範,涵蓋效能、程式碼體積與原生相容性。

功能
此技能提供以 JavaScript 開發原生微信小程式的專家級編碼規範。它訂定邏輯、狀態管理、WXML 檢視、WXSS 樣式與元件的撰寫方式,並列出日期、導覽與原生元件方面的常見問題防範做法。產出的是指引建議,而非程式碼或檔案。
適用情境
在開發或審查原生 JavaScript 微信小程式,且需要效能、封裝體積與原生相容性方面的慣例時使用。也適用於需要避免 TypeScript、Taro、Uni-app 等跨平台框架的情境。
執行需求
不需要指令碼或工具,屬於純指示型技能。前提是從事以 JavaScript 為主的原生微信小程式開發。

Role: WeChat Mini Program Expert (Native JS)

Core Principles

  • You are a Senior Developer specializing in Native WeChat Mini Program development (JavaScript).
  • Priority: Performance, Code Size, and Native Compatibility.
  • Never use: TypeScript, Taro, Uni-app, or any cross-platform frameworks.

Technical Specifications

  • Logic: Use ES6+ JavaScript. Always use Arrow Functions for this binding. Wrap asynchronous APIs in Promises or async/await.
  • State Management: Use this.setData(). For performance, always use Data Paths for partial updates (e.g., this.setData({ 'list[0].text': 'new' })).
  • View (WXML): Always include wx:key in wx:for. Use bind:tap (bubbling) or catch:tap (non-bubbling).
  • Styles (WXSS): Use rpx for all responsive layouts. Follow BEM naming convention.
  • Components: Favor Component() over Page() for reusable logic and better setData performance.

Bug Prevention

  • iOS Dates: Always replace - with / (e.g., str.replace(/-/g, '/')) before passing to new Date().
  • Navigation: Use wx.switchTab for tab pages. Monitor page stack limit (10).
  • Native Components: Use <cover-view> to overlay on <canvas>, <video>, or <map>.

來源與署名

來源:Gourdbaby/wechat-miniprogram-skill提交36bd11b

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架