From 278d05b5b12fa90462d48d0f971f1e2652de990a Mon Sep 17 00:00:00 2001 From: gjwroot <1017444825@qq.com> Date: Fri, 6 Mar 2026 19:46:44 +0800 Subject: [PATCH 1/7] feat: add wechat-miniprogram skill for WeChat mini-program development --- skills/wechat-miniprogram/SKILL.md | 198 +++++++++++++++++++++++++++++ 1 file changed, 198 insertions(+) create mode 100644 skills/wechat-miniprogram/SKILL.md diff --git a/skills/wechat-miniprogram/SKILL.md b/skills/wechat-miniprogram/SKILL.md new file mode 100644 index 0000000..7f8b268 --- /dev/null +++ b/skills/wechat-miniprogram/SKILL.md @@ -0,0 +1,198 @@ +--- +name: "wechat-miniprogram" +description: "微信小程序开发专用技能，提供标准项目结构、请求封装、接口管理等规范。Invoke when developing WeChat mini-programs or when user asks for mini-program development support." +--- + +# 微信小程序开发专用 Skill + +## 核心功能 + +提供微信小程序开发的完整规范和最佳实践，包括： +- 标准项目结构生成 +- 统一请求封装 +- 接口地址统一管理 +- 配置文件规范 + +## 标准项目结构 + +``` +├── app.js // 小程序入口逻辑文件 +├── app.json // 小程序全局配置文件 +├── app.wxss // 小程序全局样式文件 +├── sitemap.json // 站点地图配置（SEO 相关） +├── pages/ // 页面文件夹 +│ ├── index/ // 首页 +│ │ ├── index.js // 页面逻辑 +│ │ ├── index.json // 页面配置 +│ │ ├── index.wxml // 页面结构 +│ │ └── index.wxss // 页面样式 +│ └── [其他页面]/ // 其他页面遵循相同结构 +├── components/ // 自定义组件文件夹 +├── utils/ // 工具函数文件夹 +├── assets/ // 静态资源文件夹 +│ ├── images/ // 图片资源 +│ └── icons/ // 图标资源 +└── .trae/ // TRAE 配置文件夹 +``` + +## 接口统一管理 (utils/api.js) + +```javascript +// 接口统一管理 +export default { + // 用户模块 + user: { + login: '/user/login', + info: '/user/info', + update: '/user/update' + }, + // 商品模块 + goods: { + list: '/goods/list', + detail: '/goods/detail', + search: '/goods/search' + }, + // 订单模块 + order: { + create: '/order/create', + list: '/order/list', + detail: '/order/detail' + } +}; +``` + +## 统一请求封装 (utils/request.js) + +### 请求拦截器功能 +- 自动拼接完整请求地址（baseUrl + 接口路径） +- 自动添加统一请求头（Content-Type: application/json） +- 自动注入用户认证 token +- 自动添加公共参数 +- 支持自定义请求头、超时时间、加载状态 +- 自动处理 GET/POST 参数格式 + +### 响应拦截器功能 +- 统一隐藏加载状态 +- HTTP 状态码 200-299 视为成功 +- 业务状态码 code: 0 为成功 +- 自动返回业务数据 data 字段 +- 业务失败自动弹窗提示 +- 401 自动跳转登录页并清除 token +- 5xx 和网络错误统一处理 + +### 标准实现代码 + +```javascript +import config from './config.js'; +import api from './api.js'; + +const request = (options) => { + return new Promise((resolve, reject) => { + const showLoading = options.showLoading !== false; + if (showLoading) { + wx.showLoading({ + title: options.loadingText || '加载中...', + mask: true + }); + } + + const token = wx.getStorageSync('token'); + let url = config.baseUrl + options.url; + + if (options.method === 'GET' && options.data) { + const queryParams = Object.keys(options.data) + .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(options.data[key])}`) + .join('&'); + url += (url.includes('?') ? '&' : '?') + queryParams; + } + + wx.request({ + url: url, + method: options.method || 'GET', + data: options.method !== 'GET' ? options.data : {}, + header: { + 'Content-Type': 'application/json', + 'Authorization': token ? `Bearer ${token}` : '', + ...options.header + }, + timeout: options.timeout || config.timeout, + success: (res) => { + if (showLoading) wx.hideLoading(); + const { statusCode, data } = res; + + if (statusCode >= 200 && statusCode < 300) { + if (data.code === 0) { + resolve(data.data || {}); + } else { + if (data.code === 401) { + wx.removeStorageSync('token'); + wx.removeStorageSync('userInfo'); + wx.redirectTo({ url: '/pages/login/login' }); + } + wx.showToast({ + title: data.msg || '请求失败', + icon: 'none', + duration: 2000 + }); + reject(data); + } + } else { + wx.showToast({ + title: '网络错误', + icon: 'none', + duration: 2000 + }); + reject(res); + } + }, + fail: (err) => { + if (showLoading) wx.hideLoading(); + wx.showToast({ + title: '网络连接失败', + icon: 'none', + duration: 2000 + }); + reject(err); + } + }); + }); +}; + +export default request; +``` + +## 配置文件 (utils/config.js) + +```javascript +export default { + baseUrl: 'https://api.example.com', + timeout: 10000, + appId: 'your-app-id' +}; +``` + +## 使用示例 + +```javascript +import request from '../../utils/request.js'; +import api from '../../utils/api.js'; + +// 获取用户信息 +request({ + url: api.user.info, + method: 'GET' +}).then(data => { + console.log('用户信息:', data); +}); + +// 登录 +request({ + url: api.user.login, + method: 'POST', + data: { + code: 'xxx' + } +}).then(data => { + wx.setStorageSync('token', data.token); +}); +``` From f24fbc7c06ebba5d5192f516e24f5d24293ebb1b Mon Sep 17 00:00:00 2001 From: gjwroot <1017444825@qq.com> Date: Fri, 6 Mar 2026 21:54:53 +0800 Subject: [PATCH 2/7] fix: improve wechat-miniprogram skill based on review feedback --- skills/wechat-miniprogram/SKILL.md | 192 ++++++++++++++++------------- 1 file changed, 107 insertions(+), 85 deletions(-) diff --git a/skills/wechat-miniprogram/SKILL.md b/skills/wechat-miniprogram/SKILL.md index 7f8b268..143d0e3 100644 --- a/skills/wechat-miniprogram/SKILL.md +++ b/skills/wechat-miniprogram/SKILL.md @@ -1,58 +1,86 @@ --- name: "wechat-miniprogram" -description: "微信小程序开发专用技能，提供标准项目结构、请求封装、接口管理等规范。Invoke when developing WeChat mini-programs or when user asks for mini-program development support." +description: "WeChat mini-program development skill with standard project structure, request wrapper, and API management. Invoke when developing WeChat mini-programs or when user asks for mini-program development support." --- -# 微信小程序开发专用 Skill +# WeChat Mini-Program Development Skill -## 核心功能 +A comprehensive skill for WeChat mini-program development, providing standard project structure, unified request wrapper, API endpoint management, and configuration file conventions. -提供微信小程序开发的完整规范和最佳实践，包括： -- 标准项目结构生成 -- 统一请求封装 -- 接口地址统一管理 -- 配置文件规范 +## Description -## 标准项目结构 +This skill helps developers quickly scaffold and develop WeChat mini-programs with best practices and standardized code structure. It provides: +- Standard project directory structure +- Unified HTTP request wrapper with interceptors +- Centralized API endpoint management +- Configuration file conventions + +## Usage Scenario + +Invoke this skill when: +- User asks to create a new WeChat mini-program project +- User needs help with WeChat mini-program development +- User asks for HTTP request wrapper for WeChat mini-program +- User wants to set up API management in WeChat mini-program + +## Instructions + +### 1. Project Structure Setup + +Create the following directory structure for the WeChat mini-program: + +``` +├── app.js // Mini-program entry logic +├── app.json // Mini-program global configuration +├── app.wxss // Mini-program global styles +├── sitemap.json // Sitemap configuration (SEO related) +├── pages/ // Pages folder +│ ├── index/ // Home page +│ │ ├── index.js // Page logic +│ │ ├── index.json // Page configuration +│ │ ├── index.wxml // Page structure +│ │ └── index.wxss // Page styles +│ └── [other pages]/ // Other pages follow same structure +├── components/ // Custom components folder +├── utils/ // Utility functions folder +├── assets/ // Static assets folder +│ ├── images/ // Image resources +│ └── icons/ // Icon resources +└── .trae/ // TRAE configuration folder ``` -├── app.js // 小程序入口逻辑文件 -├── app.json // 小程序全局配置文件 -├── app.wxss // 小程序全局样式文件 -├── sitemap.json // 站点地图配置（SEO 相关） -├── pages/ // 页面文件夹 -│ ├── index/ // 首页 -│ │ ├── index.js // 页面逻辑 -│ │ ├── index.json // 页面配置 -│ │ ├── index.wxml // 页面结构 -│ │ └── index.wxss // 页面样式 -│ └── [其他页面]/ // 其他页面遵循相同结构 -├── components/ // 自定义组件文件夹 -├── utils/ // 工具函数文件夹 -├── assets/ // 静态资源文件夹 -│ ├── images/ // 图片资源 -│ └── icons/ // 图标资源 -└── .trae/ // TRAE 配置文件夹 + +### 2. Create Configuration File (utils/config.js) + +Create `utils/config.js` with CommonJS syntax: + +```javascript +module.exports = { + baseUrl: 'https://api.example.com', + timeout: 10000, + appId: 'your-app-id' +}; ``` -## 接口统一管理 (utils/api.js) +### 3. Create API Management (utils/api.js) + +Create `utils/api.js` with centralized endpoint management: ```javascript -// 接口统一管理 -export default { - // 用户模块 +module.exports = { + // User module user: { login: '/user/login', info: '/user/info', update: '/user/update' }, - // 商品模块 + // Goods module goods: { list: '/goods/list', detail: '/goods/detail', search: '/goods/search' }, - // 订单模块 + // Order module order: { create: '/order/create', list: '/order/list', @@ -61,58 +89,51 @@ export default { }; ``` -## 统一请求封装 (utils/request.js) +### 4. Create Request Wrapper (utils/request.js) -### 请求拦截器功能 -- 自动拼接完整请求地址（baseUrl + 接口路径） -- 自动添加统一请求头（Content-Type: application/json） -- 自动注入用户认证 token -- 自动添加公共参数 -- 支持自定义请求头、超时时间、加载状态 -- 自动处理 GET/POST 参数格式 +Create `utils/request.js` with unified request/response interceptors: -### 响应拦截器功能 -- 统一隐藏加载状态 -- HTTP 状态码 200-299 视为成功 -- 业务状态码 code: 0 为成功 -- 自动返回业务数据 data 字段 -- 业务失败自动弹窗提示 -- 401 自动跳转登录页并清除 token -- 5xx 和网络错误统一处理 +**Request Interceptor Features:** +- Automatically concatenate full request URL (baseUrl + endpoint path) +- Automatically add unified request headers (Content-Type: application/json) +- Automatically inject user authentication token +- Automatically add common parameters +- Support custom headers, timeout, loading state +- Let wx.request handle parameter serialization natively -### 标准实现代码 +**Response Interceptor Features:** +- Unified loading state management +- HTTP status code 200-299 considered successful +- Business status code === 0 considered successful +- Automatically return business data field +- Business failure automatically shows toast +- 401 automatically redirects to login page and clears token +- 5xx and network errors handled uniformly ```javascript -import config from './config.js'; -import api from './api.js'; +const config = require('./config.js'); +const api = require('./api.js'); const request = (options) => { return new Promise((resolve, reject) => { const showLoading = options.showLoading !== false; if (showLoading) { wx.showLoading({ - title: options.loadingText || '加载中...', + title: options.loadingText || 'Loading...', mask: true }); } const token = wx.getStorageSync('token'); - let url = config.baseUrl + options.url; - - if (options.method === 'GET' && options.data) { - const queryParams = Object.keys(options.data) - .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(options.data[key])}`) - .join('&'); - url += (url.includes('?') ? '&' : '?') + queryParams; - } + const url = config.baseUrl + options.url; wx.request({ url: url, method: options.method || 'GET', - data: options.method !== 'GET' ? options.data : {}, + data: options.data || {}, header: { 'Content-Type': 'application/json', - 'Authorization': token ? `Bearer ${token}` : '', + 'Authorization': token ? 'Bearer ' + token : '', ...options.header }, timeout: options.timeout || config.timeout, @@ -128,17 +149,18 @@ const request = (options) => { wx.removeStorageSync('token'); wx.removeStorageSync('userInfo'); wx.redirectTo({ url: '/pages/login/login' }); + } else { + wx.showToast({ + title: data.msg || 'Request failed', + icon: 'none', + duration: 2000 + }); } - wx.showToast({ - title: data.msg || '请求失败', - icon: 'none', - duration: 2000 - }); reject(data); } } else { wx.showToast({ - title: '网络错误', + title: 'Network error', icon: 'none', duration: 2000 }); @@ -148,7 +170,7 @@ const request = (options) => { fail: (err) => { if (showLoading) wx.hideLoading(); wx.showToast({ - title: '网络连接失败', + title: 'Network connection failed', icon: 'none', duration: 2000 }); @@ -158,34 +180,26 @@ const request = (options) => { }); }; -export default request; +module.exports = request; ``` -## 配置文件 (utils/config.js) +### 5. Usage Examples -```javascript -export default { - baseUrl: 'https://api.example.com', - timeout: 10000, - appId: 'your-app-id' -}; -``` - -## 使用示例 +Show how to use the request wrapper in pages: ```javascript -import request from '../../utils/request.js'; -import api from '../../utils/api.js'; +const request = require('../../utils/request.js'); +const api = require('../../utils/api.js'); -// 获取用户信息 +// Get user info request({ url: api.user.info, method: 'GET' }).then(data => { - console.log('用户信息:', data); + console.log('User info:', data); }); -// 登录 +// Login request({ url: api.user.login, method: 'POST', @@ -196,3 +210,11 @@ request({ wx.setStorageSync('token', data.token); }); ``` + +## Key Improvements + +1. **Language**: English content following repository conventions +2. **Structure**: Added "Usage Scenario" and "Instructions" sections from template +3. **Module Syntax**: Uses CommonJS (module.exports/require) for WeChat mini-program compatibility +4. **GET Requests**: Simplified parameter handling by letting wx.request serialize data natively +5. **401 Handling**: Removed toast when redirecting to login page for better UX From f2aa18f5ea88658773d7661395fce901ec1744c9 Mon Sep 17 00:00:00 2001 From: gjwroot <1017444825@qq.com> Date: Fri, 6 Mar 2026 22:06:51 +0800 Subject: [PATCH 3/7] refactor: remove unused api import from request wrapper --- skills/wechat-miniprogram/SKILL.md | 1 - 1 file changed, 1 deletion(-) diff --git a/skills/wechat-miniprogram/SKILL.md b/skills/wechat-miniprogram/SKILL.md index 143d0e3..2233f0c 100644 --- a/skills/wechat-miniprogram/SKILL.md +++ b/skills/wechat-miniprogram/SKILL.md @@ -112,7 +112,6 @@ Create `utils/request.js` with unified request/response interceptors: ```javascript const config = require('./config.js'); -const api = require('./api.js'); const request = (options) => { return new Promise((resolve, reject) => { From e8676c8e6deeb6d5aa99481ba21191cc2dacc265 Mon Sep 17 00:00:00 2001 From: gjwroot <1017444825@qq.com> Date: Fri, 6 Mar 2026 22:33:56 +0800 Subject: [PATCH 4/7] fix: address additional review comments --- skills/wechat-miniprogram/SKILL.md | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/skills/wechat-miniprogram/SKILL.md b/skills/wechat-miniprogram/SKILL.md index 2233f0c..a56ce13 100644 --- a/skills/wechat-miniprogram/SKILL.md +++ b/skills/wechat-miniprogram/SKILL.md @@ -97,7 +97,6 @@ Create `utils/request.js` with unified request/response interceptors: - Automatically concatenate full request URL (baseUrl + endpoint path) - Automatically add unified request headers (Content-Type: application/json) - Automatically inject user authentication token -- Automatically add common parameters - Support custom headers, timeout, loading state - Let wx.request handle parameter serialization natively @@ -142,7 +141,7 @@ const request = (options) => { if (statusCode >= 200 && statusCode < 300) { if (data.code === 0) { - resolve(data.data || {}); + resolve(data.data !== undefined ? data.data : {}); } else { if (data.code === 401) { wx.removeStorageSync('token'); @@ -158,11 +157,17 @@ const request = (options) => { reject(data); } } else { - wx.showToast({ - title: 'Network error', - icon: 'none', - duration: 2000 - }); + if (statusCode === 401) { + wx.removeStorageSync('token'); + wx.removeStorageSync('userInfo'); + wx.redirectTo({ url: '/pages/login/login' }); + } else { + wx.showToast({ + title: 'Network error', + icon: 'none', + duration: 2000 + }); + } reject(res); } }, @@ -209,11 +214,3 @@ request({ wx.setStorageSync('token', data.token); }); ``` - -## Key Improvements - -1. **Language**: English content following repository conventions -2. **Structure**: Added "Usage Scenario" and "Instructions" sections from template -3. **Module Syntax**: Uses CommonJS (module.exports/require) for WeChat mini-program compatibility -4. **GET Requests**: Simplified parameter handling by letting wx.request serialize data natively -5. **401 Handling**: Removed toast when redirecting to login page for better UX From 95e32485f161ccbe806a14d47dda12e953c3493e Mon Sep 17 00:00:00 2001 From: gjwroot <1017444825@qq.com> Date: Fri, 6 Mar 2026 23:52:59 +0800 Subject: [PATCH 5/7] refactor: rename skill to wechat-mini-program-development --- skills/wechat-miniprogram/SKILL.md | 216 ----------------------------- 1 file changed, 216 deletions(-) delete mode 100644 skills/wechat-miniprogram/SKILL.md diff --git a/skills/wechat-miniprogram/SKILL.md b/skills/wechat-miniprogram/SKILL.md deleted file mode 100644 index a56ce13..0000000 --- a/skills/wechat-miniprogram/SKILL.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -name: "wechat-miniprogram" -description: "WeChat mini-program development skill with standard project structure, request wrapper, and API management. Invoke when developing WeChat mini-programs or when user asks for mini-program development support." ---- - -# WeChat Mini-Program Development Skill - -A comprehensive skill for WeChat mini-program development, providing standard project structure, unified request wrapper, API endpoint management, and configuration file conventions. - -## Description - -This skill helps developers quickly scaffold and develop WeChat mini-programs with best practices and standardized code structure. It provides: - -- Standard project directory structure -- Unified HTTP request wrapper with interceptors -- Centralized API endpoint management -- Configuration file conventions - -## Usage Scenario - -Invoke this skill when: -- User asks to create a new WeChat mini-program project -- User needs help with WeChat mini-program development -- User asks for HTTP request wrapper for WeChat mini-program -- User wants to set up API management in WeChat mini-program - -## Instructions - -### 1. Project Structure Setup - -Create the following directory structure for the WeChat mini-program: - -``` -├── app.js // Mini-program entry logic -├── app.json // Mini-program global configuration -├── app.wxss // Mini-program global styles -├── sitemap.json // Sitemap configuration (SEO related) -├── pages/ // Pages folder -│ ├── index/ // Home page -│ │ ├── index.js // Page logic -│ │ ├── index.json // Page configuration -│ │ ├── index.wxml // Page structure -│ │ └── index.wxss // Page styles -│ └── [other pages]/ // Other pages follow same structure -├── components/ // Custom components folder -├── utils/ // Utility functions folder -├── assets/ // Static assets folder -│ ├── images/ // Image resources -│ └── icons/ // Icon resources -└── .trae/ // TRAE configuration folder -``` - -### 2. Create Configuration File (utils/config.js) - -Create `utils/config.js` with CommonJS syntax: - -```javascript -module.exports = { - baseUrl: 'https://api.example.com', - timeout: 10000, - appId: 'your-app-id' -}; -``` - -### 3. Create API Management (utils/api.js) - -Create `utils/api.js` with centralized endpoint management: - -```javascript -module.exports = { - // User module - user: { - login: '/user/login', - info: '/user/info', - update: '/user/update' - }, - // Goods module - goods: { - list: '/goods/list', - detail: '/goods/detail', - search: '/goods/search' - }, - // Order module - order: { - create: '/order/create', - list: '/order/list', - detail: '/order/detail' - } -}; -``` - -### 4. Create Request Wrapper (utils/request.js) - -Create `utils/request.js` with unified request/response interceptors: - -**Request Interceptor Features:** -- Automatically concatenate full request URL (baseUrl + endpoint path) -- Automatically add unified request headers (Content-Type: application/json) -- Automatically inject user authentication token -- Support custom headers, timeout, loading state -- Let wx.request handle parameter serialization natively - -**Response Interceptor Features:** -- Unified loading state management -- HTTP status code 200-299 considered successful -- Business status code === 0 considered successful -- Automatically return business data field -- Business failure automatically shows toast -- 401 automatically redirects to login page and clears token -- 5xx and network errors handled uniformly - -```javascript -const config = require('./config.js'); - -const request = (options) => { - return new Promise((resolve, reject) => { - const showLoading = options.showLoading !== false; - if (showLoading) { - wx.showLoading({ - title: options.loadingText || 'Loading...', - mask: true - }); - } - - const token = wx.getStorageSync('token'); - const url = config.baseUrl + options.url; - - wx.request({ - url: url, - method: options.method || 'GET', - data: options.data || {}, - header: { - 'Content-Type': 'application/json', - 'Authorization': token ? 'Bearer ' + token : '', - ...options.header - }, - timeout: options.timeout || config.timeout, - success: (res) => { - if (showLoading) wx.hideLoading(); - const { statusCode, data } = res; - - if (statusCode >= 200 && statusCode < 300) { - if (data.code === 0) { - resolve(data.data !== undefined ? data.data : {}); - } else { - if (data.code === 401) { - wx.removeStorageSync('token'); - wx.removeStorageSync('userInfo'); - wx.redirectTo({ url: '/pages/login/login' }); - } else { - wx.showToast({ - title: data.msg || 'Request failed', - icon: 'none', - duration: 2000 - }); - } - reject(data); - } - } else { - if (statusCode === 401) { - wx.removeStorageSync('token'); - wx.removeStorageSync('userInfo'); - wx.redirectTo({ url: '/pages/login/login' }); - } else { - wx.showToast({ - title: 'Network error', - icon: 'none', - duration: 2000 - }); - } - reject(res); - } - }, - fail: (err) => { - if (showLoading) wx.hideLoading(); - wx.showToast({ - title: 'Network connection failed', - icon: 'none', - duration: 2000 - }); - reject(err); - } - }); - }); -}; - -module.exports = request; -``` - -### 5. Usage Examples - -Show how to use the request wrapper in pages: - -```javascript -const request = require('../../utils/request.js'); -const api = require('../../utils/api.js'); - -// Get user info -request({ - url: api.user.info, - method: 'GET' -}).then(data => { - console.log('User info:', data); -}); - -// Login -request({ - url: api.user.login, - method: 'POST', - data: { - code: 'xxx' - } -}).then(data => { - wx.setStorageSync('token', data.token); -}); -``` From f0eecbacbcb93b8064d559ce50be65f88f8b6084 Mon Sep 17 00:00:00 2001 From: gjwroot <1017444825@qq.com> Date: Sun, 8 Mar 2026 01:02:36 +0800 Subject: [PATCH 6/7] fix: use wx.reLaunch instead of wx.redirectTo for 401 handling - wx.redirectTo cannot navigate to tabBar pages - wx.reLaunch can navigate to any page and clears page stack - This fixes the issue where 401 redirect fails when login page is a tabBar page --- skills/wechat-mini-program-development/SKILL.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/skills/wechat-mini-program-development/SKILL.md b/skills/wechat-mini-program-development/SKILL.md index 05d16e5..3ca4291 100644 --- a/skills/wechat-mini-program-development/SKILL.md +++ b/skills/wechat-mini-program-development/SKILL.md @@ -146,7 +146,7 @@ const request = (options) => { if (data.code === 401) { wx.removeStorageSync('token'); wx.removeStorageSync('userInfo'); - wx.redirectTo({ url: '/pages/login/login' }); + wx.reLaunch({ url: '/pages/login/login' }); } else { wx.showToast({ title: data.msg || 'Request failed', @@ -160,7 +160,7 @@ const request = (options) => { if (statusCode === 401) { wx.removeStorageSync('token'); wx.removeStorageSync('userInfo'); - wx.redirectTo({ url: '/pages/login/login' }); + wx.reLaunch({ url: '/pages/login/login' }); } else { wx.showToast({ title: 'Network error', From 8d2f29fb95a5652342c6d8df425aee22232dd018 Mon Sep 17 00:00:00 2001 From: gjwroot <1017444825@qq.com> Date: Sun, 8 Mar 2026 01:09:24 +0800 Subject: [PATCH 7/7] feat: enhance wechat-mini-program-development skill with best practices Add new sections to improve developer experience: - utils/util.js: Common utility functions (formatTime, showLoading, showToast, etc.) - app.js: Global login status check with checkLoginStatus() - app.json: TabBar configuration example - Enhanced usage examples with util integration All additions are generic and follow WeChat mini-program best practices, making the skill more practical for real-world development. --- .../wechat-mini-program-development/SKILL.md | 163 +++++++++++++++++- 1 file changed, 159 insertions(+), 4 deletions(-) diff --git a/skills/wechat-mini-program-development/SKILL.md b/skills/wechat-mini-program-development/SKILL.md index 3ca4291..d083309 100644 --- a/skills/wechat-mini-program-development/SKILL.md +++ b/skills/wechat-mini-program-development/SKILL.md @@ -187,13 +187,155 @@ const request = (options) => { module.exports = request; ``` -### 5. Usage Examples +### 5. Create Utility Functions (utils/util.js) + +Create `utils/util.js` with common utility functions: + +```javascript +// Format time +const formatTime = date => { + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hour = date.getHours(); + const minute = date.getMinutes(); + const second = date.getSeconds(); + return [year, month, day].map(formatNumber).join('/') + ' ' + + [hour, minute, second].map(formatNumber).join(':'); +}; + +const formatNumber = n => { + n = n.toString(); + return n[1] ? n : '0' + n; +}; + +// Show loading +const showLoading = (title = 'Loading...') => { + wx.showLoading({ title, mask: true }); +}; + +// Hide loading +const hideLoading = () => { + wx.hideLoading(); +}; + +// Show toast +const showToast = (title, icon = 'none') => { + wx.showToast({ title, icon, duration: 2000 }); +}; + +// Show success +const showSuccess = (title = 'Success') => { + showToast(title, 'success'); +}; + +// Show confirm dialog +const showConfirm = (content, title = 'Confirm') => { + return new Promise((resolve) => { + wx.showModal({ + title, + content, + success: (res) => resolve(res.confirm) + }); + }); +}; + +module.exports = { + formatTime, + showLoading, + hideLoading, + showToast, + showSuccess, + showConfirm +}; +``` + +### 6. Setup Global Login Check (app.js) + +Create `app.js` with global login status check: + +```javascript +App({ + onLaunch() { + console.log('Mini-program launched'); + this.checkLoginStatus(); + }, + + onShow() { + console.log('Mini-program shown'); + }, + + onHide() { + console.log('Mini-program hidden'); + }, + + // Check login status on app launch + checkLoginStatus() { + const token = wx.getStorageSync('token'); + if (!token) { + wx.reLaunch({ url: '/pages/login/login' }); + } + }, + + globalData: { + userInfo: null + } +}); +``` + +### 7. Configure TabBar (app.json) + +Add tabBar configuration in `app.json`: + +```json +{ + "pages": [ + "pages/index/index", + "pages/login/login" + ], + "window": { + "backgroundTextStyle": "dark", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTitleText": "Mini Program", + "navigationBarTextStyle": "black" + }, + "tabBar": { + "color": "#999999", + "selectedColor": "#ff6b4a", + "backgroundColor": "#ffffff", + "borderStyle": "white", + "list": [ + { + "pagePath": "pages/index/index", + "text": "Home" + }, + { + "pagePath": "pages/menu/menu", + "text": "Menu" + }, + { + "pagePath": "pages/cart/cart", + "text": "Cart" + }, + { + "pagePath": "pages/mine/mine", + "text": "Mine" + } + ] + }, + "style": "v2", + "sitemapLocation": "sitemap.json" +} +``` + +### 8. Usage Examples Show how to use the request wrapper in pages: ```javascript const request = require('../../utils/request.js'); const api = require('../../utils/api.js'); +const util = require('../../utils/util.js'); // Get user info request({ @@ -207,10 +349,23 @@ request({ request({ url: api.user.login, method: 'POST', - data: { - code: 'xxx' - } + data: { code: 'xxx' } }).then(data => { wx.setStorageSync('token', data.token); + util.showSuccess('Login successful'); +}); + +// Show loading and make request +util.showLoading('Loading data...'); +request({ + url: api.goods.list, + method: 'GET', + showLoading: false // Disable default loading +}).then(data => { + util.hideLoading(); + console.log('Goods list:', data); +}).catch(err => { + util.hideLoading(); + util.showError('Failed to load data'); }); ```