miniprogram-development
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseWhen to use this skill
何时使用本技能
Use this skill for WeChat Mini Program development when you need to:
- Develop WeChat mini program pages and components
- Integrate CloudBase capabilities (database, cloud functions, storage)
- Deploy and preview mini program projects
- Handle mini program authentication and user identity
- Call AI models in mini programs
- Get WeChat step count data
Do NOT use for:
- Web frontend development (use web-development skill)
- Backend service development (use cloudrun-development skill)
- UI design only (use ui-design skill, but may combine with this skill)
当你需要进行以下操作时,可使用本技能进行微信小程序开发:
- 开发微信小程序页面与组件
- 集成CloudBase能力(数据库、云函数、存储)
- 部署与预览小程序项目
- 处理小程序认证与用户身份
- 在小程序中调用AI模型
- 获取微信步数数据
请勿用于:
- Web前端开发(使用web-development技能)
- 后端服务开发(使用cloudrun-development技能)
- 仅UI设计(使用ui-design技能,但可与本技能结合使用)
How to use this skill (for a coding agent)
如何使用本技能(面向编码Agent)
-
Follow project structure conventions
- Mini program code in directory
miniprogram - Cloud functions in directory
cloudfunctions - Use latest base library version
- Include page configuration files (e.g., index.json) when generating pages
- Mini program code in
-
Understand authentication characteristics
- Important: Mini programs with CloudBase are naturally login-free
- Never generate login pages or login flows
- Get user identity via in cloud functions
cloud.getWXContext().OPENID
-
Use WeChat Developer Tools correctly
- Check has
project.config.jsonfield before openingappid - Use CLI command to open project pointing to directory containing
project.config.json
- Check
-
Handle resources properly
- Icons8 (Recommended): Use Icons8 for icon images (e.g., tabbar iconPath)
- URL format:
https://img.icons8.com/{style}/{size}/{color}/{icon-name}.png - Parameters:
- :
style(outline style) orios(filled style)ios-filled - :
size(recommended 100px, file size < 5KB)100 - : hex color code without # (e.g.,
colorfor gray,8E8E93for red)FF3B30 - : icon name (e.g.,
icon-name)checked--v1
- Examples:
- Unselected (gray outline):
https://img.icons8.com/ios/100/8E8E93/checked--v1.png - Selected (red filled):
https://img.icons8.com/ios-filled/100/FF3B30/checked--v1.png
- Unselected (gray outline):
- Advantages:
- ✅ Very small file size (usually < 3KB)
- ✅ Supports custom colors
- ✅ Clean and professional icons
- URL format:
- Use tool to download resources
downloadRemoteFile - Avoid build errors by ensuring all referenced resources exist
- Icons8 (Recommended): Use Icons8 for icon images (e.g., tabbar iconPath)
-
遵循项目结构规范
- 小程序代码存放于目录
miniprogram - 云函数存放于目录
cloudfunctions - 使用最新基础库版本
- 生成页面时需包含页面配置文件(如index.json)
- 小程序代码存放于
-
了解认证特性
- 重要提示:集成CloudBase的小程序天然免登录
- 禁止生成登录页面或登录流程
- 在云函数中通过获取用户身份
cloud.getWXContext().OPENID
-
正确使用WeChat Developer Tools
- 打开前检查是否包含
project.config.json字段appid - 使用CLI命令打开指向包含的目录的项目
project.config.json
- 打开前检查
-
合理处理资源
- Icons8(推荐):使用Icons8获取图标图片(如tabbar的iconPath)
- URL格式:
https://img.icons8.com/{style}/{size}/{color}/{icon-name}.png - 参数说明:
- :
style(轮廓样式)或ios(填充样式)ios-filled - :
size(推荐100px,文件大小<5KB)100 - :不带#的十六进制颜色码(如灰色
color,红色8E8E93)FF3B30 - :图标名称(如
icon-name)checked--v1
- 示例:
- 未选中(灰色轮廓):
https://img.icons8.com/ios/100/8E8E93/checked--v1.png - 选中(红色填充):
https://img.icons8.com/ios-filled/100/FF3B30/checked--v1.png
- 未选中(灰色轮廓):
- 优势:
- ✅ 文件体积极小(通常<3KB)
- ✅ 支持自定义颜色
- ✅ 图标简洁专业
- URL格式:
- 使用工具下载资源
downloadRemoteFile - 确保所有引用的资源存在,以避免构建错误
- Icons8(推荐):使用Icons8获取图标图片(如tabbar的iconPath)
WeChat Mini Program Development Rules
微信小程序开发规则
Project Structure
项目结构
-
CloudBase Integration:
- If user needs to develop mini program, you will use various WeChat CloudBase capabilities to develop the project
- Mini program base library should use version
latest
-
Directory Organization:
- Mini program projects follow WeChat CloudBase best practices
- Mini program code is generally in directory
miniprogram - If developing cloud functions, they can be stored in directory
cloudfunctions - Mini program's needs to specify
project.config.jsonand other configurationsminiprogramRoot
-
Page Generation:
- When generating mini program pages, must include page configuration files such as
index.json - Must comply with specifications to avoid compilation errors
- When generating mini program pages, must include page configuration files such as
-
CloudBase集成:
- 若用户需要开发小程序,需使用各类CloudBase能力进行项目开发
- 小程序基础库应使用版本
latest
-
目录组织:
- 小程序项目遵循CloudBase最佳实践
- 小程序代码通常存放于目录
miniprogram - 若开发云函数,可存放于目录
cloudfunctions - 小程序的需指定
project.config.json等配置miniprogramRoot
-
页面生成:
- 生成小程序页面时,必须包含等页面配置文件
index.json - 必须符合规范以避免编译错误
- 生成小程序页面时,必须包含
Development Tools
开发工具
WeChat Developer Tools Opening Project Workflow:
- When detecting current project is a mini program project, suggest user to use WeChat Developer Tools for preview, debugging, and publishing
- Before opening, confirm has
project.config.jsonfield configured. If not configured, must ask user to provide itappid - Use WeChat Developer built-in CLI command to open project (pointing to directory containing ):
project.config.json- Windows:
"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" open --project "项目根目录路径" - macOS:
/Applications/wechatwebdevtools.app/Contents/MacOS/cli open --project "/path/to/project/root"
- Windows:
- Project root directory path is the directory containing file
project.config.json
WeChat Developer Tools 打开项目流程:
- 当检测到当前项目为小程序项目时,建议用户使用WeChat Developer Tools进行预览、调试与发布
- 打开前需确认已配置
project.config.json字段,若未配置,必须要求用户提供appid - 使用WeChat Developer内置的CLI命令打开项目(指向包含的目录):
project.config.json- Windows:
"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" open --project "项目根目录路径" - macOS:
/Applications/wechatwebdevtools.app/Contents/MacOS/cli open --project "/path/to/project/root"
- Windows:
- 项目根目录路径为包含文件的目录
project.config.json
CloudBase Integration
CloudBase集成
-
Environment Configuration:
- When using in mini program, need to specify environment ID
wx.cloud - Environment ID can be queried via tool
envQuery
- When using
-
Resource Management:
- When generating mini program code, if material images are needed, such as tabbar's and other places, prefer Icons8 (see section 4 above for details)
iconPath - Use tool to download resources
downloadRemoteFile - When generating mini program code, if using and similar, must simultaneously help user download icons to avoid build errors
iconPath
- When generating mini program code, if material images are needed, such as tabbar's
-
环境配置:
- 在小程序中使用时,需指定环境ID
wx.cloud - 环境ID可通过工具查询
envQuery
- 在小程序中使用
-
资源管理:
- 生成小程序代码时,若需要素材图片(如tabbar的等位置),优先使用Icons8(详情见上文第4部分)
iconPath - 使用工具下载资源
downloadRemoteFile - 生成小程序代码时,若使用等,必须同时帮助用户下载图标以避免构建错误
iconPath
- 生成小程序代码时,若需要素材图片(如tabbar的
Mini Program Authentication Characteristics
小程序认证特性
Important: Mini programs with CloudBase are naturally login-free. It is strictly forbidden to generate login pages or login flows!
-
Login-Free Feature: Mini program CloudBase does not require user login, can get user identity in cloud functions via wx-server-sdk
-
User Identity Retrieval: In cloud functions, get user's unique identifier via
cloud.getWXContext().OPENID -
User Data Management: Manage user data in cloud functions based on openid, no login flow needed
js
// Example of getting user identity in cloud function
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
const openid = wxContext.OPENID;
return { openid: openid };
};重要提示:集成CloudBase的小程序天然免登录,严禁生成登录页面或登录流程!
-
免登录特性:小程序CloudBase无需用户登录,可通过wx-server-sdk在云函数中获取用户身份
-
用户身份获取:在云函数中,通过获取用户唯一标识
cloud.getWXContext().OPENID -
用户数据管理:基于openid在云函数中管理用户数据,无需登录流程
js
// 云函数中获取用户身份的示例
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
const openid = wxContext.OPENID;
return { openid: openid };
};AI Model Invocation
AI模型调用
Mini programs with base library version 3.7.1+ already support direct AI model invocation
js
// Create model instance, here we use DeepSeek AI model
const model = wx.cloud.extend.AI.createModel("deepseek");
// First set AI's system prompt, here using seven-character quatrain generation as example
const systemPrompt =
"请严格按照七言绝句或七言律诗的格律要求创作,平仄需符合规则,押韵要和谐自然,韵脚字需在同一韵部。创作内容围绕用户给定的主题,七言绝句共四句,每句七个字;七言律诗共八句,每句七个字,颔联和颈联需对仗工整。同时,要融入生动的意象、丰富的情感与优美的意境,展现出古诗词的韵味与美感。";
// User's natural language input, e.g., '帮我写一首赞美玉龙雪山的诗'
const userInput = "帮我写一首赞美玉龙雪山的诗";
// Pass system prompt and user input to AI model
const res = await model.streamText({
data: {
model: "deepseek-v3", // Specify specific model
messages: [
{ role: "system", content: systemPrompt },
{ role: "user", content: userInput },
],
},
});
// Receive AI model's response
// Since AI model's return result is streaming, we need to loop to receive complete response text
for await (let str of res.textStream) {
console.log(str);
}基础库版本3.7.1及以上的小程序已支持直接调用AI模型
js
// 创建模型实例,此处使用DeepSeek AI模型
const model = wx.cloud.extend.AI.createModel("deepseek");
// 首先设置AI的系统提示词,此处以七言绝句生成为例
const systemPrompt =
"请严格按照七言绝句或七言律诗的格律要求创作,平仄需符合规则,押韵要和谐自然,韵脚字需在同一韵部。创作内容围绕用户给定的主题,七言绝句共四句,每句七个字;七言律诗共八句,每句七个字,颔联和颈联需对仗工整。同时,要融入生动的意象、丰富的情感与优美的意境,展现出古诗词的韵味与美感。";
// 用户自然语言输入,例如:'帮我写一首赞美玉龙雪山的诗'
const userInput = "帮我写一首赞美玉龙雪山的诗";
// 将系统提示词和用户输入传入AI模型
const res = await model.streamText({
data: {
model: "deepseek-v3", // 指定具体模型
messages: [
{ role: "system", content: systemPrompt },
{ role: "user", content: userInput },
],
},
});
// 接收AI模型的响应
// 由于AI模型的返回结果为流式,需要循环接收完整响应文本
for await (let str of res.textStream) {
console.log(str);
}WeChat Step Count Retrieval
微信步数获取
WeChat step count retrieval must use CloudID method (base library 2.7.0+):
- Frontend: to get cloudID, use
wx.getWeRunData()to pass to cloud functionwx.cloud.CloudID(cloudID) - Cloud Function: Directly use to get decrypted step count data, check
weRunData.datato handle errorsweRunData.errCode - Forbidden: Do not use session_key manual decryption method, CloudID is more secure and simple
- Required: Must implement fallback mechanism (simulated data) to handle cloudID retrieval failure cases
微信步数获取必须使用CloudID方式(基础库2.7.0及以上):
- 前端:调用获取cloudID,使用
wx.getWeRunData()传递至云函数wx.cloud.CloudID(cloudID) - 云函数:直接使用获取解密后的步数数据,检查
weRunData.data处理错误weRunData.errCode - 禁止:请勿使用session_key手动解密方式,CloudID更安全简便
- 要求:必须实现降级机制(模拟数据)以处理cloudID获取失败的情况
Cloud Function Deployment and Permission Notes
云函数部署与权限说明
- After AI automatically deploys cloud functions, special permissions like cloud invocation may be missing
- Recommend users to right-click cloud function in WeChat Developer Tools, select "Install Dependencies in Cloud"
- For functions requiring cloud invocation permissions (such as WeChat step count decryption), recommend manually deploying once via Developer Tools to get complete permissions
- If encountering permission issues, prompt user to check cloud function's service authorization and API permission configuration
- AI自动部署云函数后,可能会缺失云调用等特殊权限
- 建议用户在WeChat Developer Tools中右键点击云函数,选择"云端安装依赖"
- 对于需要云调用权限的函数(如微信步数解密),建议通过开发者工具手动部署一次以获取完整权限
- 若遇到权限问题,提示用户检查云函数的服务授权与API权限配置
Development Workflow Guidance
开发流程指引
- After completing mini program project development, proactively suggest user to use WeChat Developer Tools for preview, debugging, and publishing
- If user agrees, use CLI command to open WeChat Developer Tools, pointing to project root directory containing
project.config.json - Remind user to perform real device preview, debugging, and publishing operations in WeChat Developer Tools
- 完成小程序项目开发后,主动建议用户使用WeChat Developer Tools进行预览、调试与发布
- 若用户同意,使用CLI命令打开WeChat Developer Tools,指向包含的项目根目录
project.config.json - 提醒用户在WeChat Developer Tools中进行真机预览、调试与发布操作