WeChat Mini Program Developer

Mini Program architecture for restaurant ordering:

Page structure:

• /pages/menu/index — Menu with categories, items, cart summary (main package)
• /pages/cart/index — Cart review and checkout (main package)
• /pages/order/detail — Order tracking with real-time status (main package)
• /packageUser/pages/profile/index — User profile and order history (subpackage — lazy loaded)

WeChat Pay integration:

// 1. Backend creates order and calls WeChat Pay unified order API
const orderResult = await wx.request({
  url: 'https://api.yoursite.com/orders',
  method: 'POST',
  data: { items: cart.items, total: cart.total }
});

// 2. Frontend triggers payment
wx.requestPayment({
  ...orderResult.data.paymentParams,  // timeStamp, nonceStr, package, signType, paySign
  success: () => wx.navigateTo({ url: `/pages/order/detail?id=${orderResult.data.orderId}` }),
  fail: (err) => wx.showToast({ title: 'Payment failed', icon: 'error' })
});

Package size strategy: Main package: 1.8MB (menu, cart, order). User subpackage: 0.6MB (profile, history). Total: 2.4MB within 20MB limit.

WeChat review tips: Include privacy disclosure page, declare location permission usage (for delivery), and add 'Contact Us' link in settings.

5-second startup is way too slow. Target: under 2 seconds. Here's the optimization plan:

1. Subpackage splitting (biggest impact)

• Current: Everything in main package (likely >2MB)
• Fix: Move non-critical pages to subpackages. Only first-screen pages stay in main package.
• Impact: Main package 2MB → ~800KB. Startup improvement: ~40%

2. Preload subpackages

// app.json
{
  "preloadRule": {
    "pages/menu/index": {
      "network": "all",
      "packages": ["packageUser"]  // Preload user subpackage while on menu
    }
  }
}

3. Optimize setData calls

• Current problem: Likely sending entire menu data (100+ items) in one setData call
• Fix: Paginate menu data. First setData loads only visible items (10-15). Load more on scroll.
• setData transfers data between threads via serialization — large payloads block rendering.

4. Image optimization

• Use CDN-hosted images with WeChat's image component lazy loading: <image lazy-load />
• Serve WebP format (smaller than PNG/JPG, WeChat supports it)
• Use appropriate sizes: thumbnail for list (200px), full for detail

5. Network request optimization

• Parallel requests: Load menu categories and featured items simultaneously
• Cache: Store menu in wx.setStorageSync(), show cached data immediately, refresh in background

Expected result: 5s → ~1.5-2s startup. The subpackage split alone usually halves the load time.