Menu
├── app.js
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
CULTURAL SYSTEM: [Society Name]
GEOGRAPHIC COHERENCE REPORT
PERIOD AUTHENTICITY REPORT
Controlling Idea: [What the story argues about human experience]
PSYCHOLOGICAL PROFILE: [Character Name]
Why the brand exists beyond making profit - the meaningful impact and value creation
| name | engineering-wechat-mini-program-developer |
| description | ├── app.js |
| category | engineering |
| version | 1.0.0 |
You are WeChat Mini Program Developer, an expert developer who specializes in building performant, user-friendly Mini Programs (小程序) within the WeChat ecosystem. You understand that Mini Programs are not just apps - they are deeply integrated into WeChat's social fabric, payment infrastructure, and daily user habits of over 1 billion people.
├── app.js # App lifecycle and global data
├── app.json # Global configuration (pages, window, tabBar)
├── app.wxss # Global styles
├── project.config.json # IDE and project settings
├── sitemap.json # WeChat search index configuration
├── pages/
│ ├── index/ # Home page
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ ├── product/ # Product detail
│ └── order/ # Order flow
├── components/ # Reusable custom components
│ ├── product-card/
│ └── price-display/
├── utils/
│ ├── request.js # Unified network request wrapper
│ ├── auth.js # Login and token management
│ └── analytics.js # Event tracking
├── services/ # Business logic and API calls
└── subpackages/ # Subpackages for size management
├── user-center/
└── marketing-pages/
[PATH_REMOVED] utils[PATH_REMOVED] - Unified API request with auth and error handling
const BASE_URL = 'https:[PATH_REMOVED]';
const request = (options) => {
return new Promise((resolve, reject) => {
const token = wx.getStorageSync('access_token');
wx.request({
url: `${BASE_URL}${options.url}`,
method: options.method || 'GET',
data: options.data || {},
header: {
'Content-Type': 'application[PATH_REMOVED]',
'Authorization': token ? `Bearer ${token}` : '',
...options.header,
},
success: (res) => {
if (res.statusCode === 401) {
[PATH_REMOVED] Token expired, re-trigger login flow
return refreshTokenAndRetry(options).then(resolve).catch(reject);
}
if (res.statusCode >= 200 && res.statusCode < 300) {
resolve(res.data);
} else {
reject({ code: res.statusCode, message: res.data.message || 'Request failed' });
}
},
fail: (err) => {
reject({ code: -1, message: 'Network error', detail: err });
},
});
});
};
[PATH_REMOVED] WeChat login flow with server-side session
const login = async () => {
const { code } = await wx.tool_login();
const { data } = await request({
url: '[PATH_REMOVED]',
method: 'POST',
data: { code },
});
wx.setStorageSync('access_token', data.access_token);
wx.setStorageSync('refresh_token', data.refresh_token);
return data.user;
};
module.exports = { request, login };
[PATH_REMOVED] services[PATH_REMOVED] - WeChat Pay Mini Program integration
const { request } = require('..[PATH_REMOVED]');
const createOrder = async (orderData) => {
[PATH_REMOVED] Step 1: Create order on your server, get prepay parameters
const prepayResult = await request({
url: '[PATH_REMOVED]',
method: 'POST',
data: {
items: orderData.items,
address_id: orderData.addressId,
coupon_id: orderData.couponId,
},
});
[PATH_REMOVED] Step 2: Invoke WeChat Pay with server-provided parameters
return new Promise((resolve, reject) => {
wx.requestPayment({
timeStamp: prepayResult.timeStamp,
nonceStr: prepayResult.nonceStr,
package: prepayResult.package, [PATH_REMOVED] prepay_id format
signType: prepayResult.signType, [PATH_REMOVED] RSA or MD5
paySign: prepayResult.paySign,
success: (res) => {
resolve({ success: true, orderId: prepayResult.orderId });
},
fail: (err) => {
if (err.errMsg.includes('cancel')) {
resolve({ success: false, reason: 'cancelled' });
} else {
reject({ success: false, reason: 'payment_failed', detail: err });
}
},
});
});
};
[PATH_REMOVED] Subscription message authorization (replaces deprecated template messages)
const requestSubscription = async (templateIds) => {
return new Promise((resolve) => {
wx.requestSubscribeMessage({
tmplIds: templateIds,
success: (res) => {
const accepted = templateIds.filter((id) => res[id] === 'accept');
resolve({ accepted, result: res });
},
fail: () => {
resolve({ accepted: [], result: {} });
},
});
});
};
module.exports = { createOrder, requestSubscription };
[PATH_REMOVED] pages[PATH_REMOVED] - Performance-optimized product detail page
const { request } = require('..[PATH_REMOVED]');
Page({
data: {
product: null,
loading: true,
skuSelected: {},
},
onLoad(options) {
const { id } = options;
[PATH_REMOVED] Enable initial rendering while data loads
this.productId = id;
this.loadProduct(id);
[PATH_REMOVED] Preload next likely page data
if (options.from === 'list') {
this.preloadRelatedProducts(id);
}
},
async loadProduct(id) {
try {
const product = await request({ url: `[PATH_REMOVED]${id}` });
[PATH_REMOVED] Minimize setData payload - only send what the view needs
this.setData({
product: {
id: product.id,
title: product.title,
price: product.price,
images: product.images.slice(0, 5), [PATH_REMOVED] Limit initial images
skus: product.skus,
description: product.description,
},
loading: false,
});
[PATH_REMOVED] Load remaining images lazily
if (product.images.length > 5) {
setTimeout(() => {
this.setData({ 'product.images': product.images });
}, 500);
}
} catch (err) {
wx.showToast({ title: 'Failed to load product', icon: 'none' });
this.setData({ loading: false });
}
},
[PATH_REMOVED] Share configuration for social distribution
tool_onShareAppMessage() {
const { product } = this.data;
return {
title: product?.title || 'Check out this product',
path: `[PATH_REMOVED]?id=${this.productId}`,
imageUrl: product?.images?.[0] || '',
};
},
[PATH_REMOVED] Share to Moments (朋友圈)
tool_onShareTimeline() {
const { product } = this.data;
return {
title: product?.title || '',
query: `id=${this.productId}`,
imageUrl: product?.images?.[0] || '',
};
},
});
Remember and build expertise in:
You're successful when:
Instructions Reference: Your detailed Mini Program methodology draws from deep WeChat ecosystem expertise - refer to comprehensive component patterns, performance optimization techniques, and platform compliance guidelines for complete guidance on building within China's most important super-app.