The O2O service model of mini-programs

Overview of O2O Service Model in Mini Programs

The O2O (Online to Offline) service model connects offline services through online platforms, and mini programs, with their lightweight nature and strong social attributes, have become an ideal carrier for O2O. The features of WeChat mini programs—no need to download, use-and-go—combined with native capabilities like LBS, payment, and QR code scanning, have reshaped the user journey in traditional service industries. From food delivery to home maintenance, retail to education, mini programs are becoming the core link between consumers and physical services.

Core Capabilities of Mini Program O2O

1. Location-Based Services (LBS)

Obtain user coordinates via the wx.getLocation interface and integrate with Tencent Maps for intelligent recommendations:

wx.getLocation({  
  type: 'gcj02',  
  success: (res) => {  
    this.setData({  
      latitude: res.latitude,  
      longitude: res.longitude  
    })  
    this.loadNearbyShops() // Load nearby merchants  
  }  
})  

2. Offline QR Code Entry

Mini program codes serve as key entry points for offline scenarios:

// QR code scanning and processing  
wx.scanCode({  
  success: (res) => {  
    if(res.path.includes('shop/detail')) {  
      wx.navigateTo({ url: res.path })  
    }  
  }  
})  

3. Payment Loop

Native integration of WeChat Pay enables a closed-loop transaction:

wx.requestPayment({  
  timeStamp: '1629450000',  
  nonceStr: '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',  
  package: 'prepay_id=wx201410272009395522657a690389285100',  
  signType: 'MD5',  
  paySign: 'C380BEC2BFD727A4B6845133519F3AD6',  
  success: (res) => { /* Payment success handling */ }  
})  

Implementation Solutions for Typical O2O Scenarios

Food Delivery Scenario

1. Online Ordering System:

// Example shopping cart data structure  
const cart = {  
  shopId: '123',  
  items: [  
    { id: '001', name: 'Kung Pao Chicken', price: 38, count: 2 },  
    { id: '002', name: 'Mapo Tofu', price: 28, count: 1 }  
  ],  
  total: 104  
}  

2. Reservation and Queueing Function:

// Get queue number  
wx.cloud.callFunction({  
  name: 'queueSystem',  
  data: {  
    action: 'getQueueNumber',  
    shopId: '123',  
    peopleCount: 4  
  }  
})  

Retail Industry Solutions

1. Real-Time Store Inventory Query:

// Query inventory of nearby stores  
const query = db.collection('store_stock')  
  .where({  
    productId: 'p123',  
    storeId: db.command.in(['s1','s2','s3']),  
    stock: db.command.gt(0)  
  })  
  .orderBy('distance', 'asc')  
  .limit(3)  

2. In-Store Pickup Process:

<!-- Time picker component for pickup -->  
<picker mode="time" start="09:00" end="21:00" bindchange="timeChange">  
  <view>Select pickup time: {{pickupTime}}</view>  
</picker>  

Key Points of Technical Architecture Design

1. Hybrid Deployment Strategy

graph TD  
    A[Mini Program Frontend] --> B[Cloud Development Database]  
    A --> C[Self-built Node.js Service]  
    C --> D[ERP System]  
    C --> E[Third-party APIs]  
    B --> F[Data Synchronization]  

2. State Management Solution

// Using store to manage global state  
const store = {  
  state: {  
    currentShop: null,  
    userLocation: null  
  },  
  setLocation(loc) {  
    this.state.userLocation = loc  
    wx.setStorageSync('lastLocation', loc)  
  }  
}  

Key Metrics for Data Operations

1. Conversion Funnel Analysis

// Example tracking  
const funnelSteps = [  
  'page_view',  
  'add_to_cart',  
  'checkout_init',  
  'payment_success'  
]  

funnelSteps.forEach(step => {  
  wx.reportAnalytics(step, { timestamp: Date.now() })  
})  

2. User Behavior Heatmap

// Track page dwell time  
let stayTimer  
Page({  
  onShow() {  
    stayTimer = setInterval(() => {  
      wx.reportAnalytics('page_stay', {  
        page: 'shop_detail',  
        duration: 10 // seconds  
      })  
    }, 10000)  
  },  
  onHide() {  
    clearInterval(stayTimer)  
  }  
})  

Innovative Industry Case Studies

1. Beauty Service Booking System

// Staff scheduling algorithm  
function generateTimeSlots(staff) {  
  const slots = []  
  const interval = 30 // minutes  
  const start = new Date(staff.startTime)  
  const end = new Date(staff.endTime)  

  while(start < end) {  
    slots.push({  
      time: start.toLocaleTimeString(),  
      available: staff.bookings  
        .every(b => b.time !== start.getTime())  
    })  
    start.setMinutes(start.getMinutes() + interval)  
  }  
  return slots  
}  

2. Community Group Buying Logic

// Group order state machine  
const groupOrderStates = {  
  PENDING: { timeout: 24*3600, next: 'FAILED' },  
  PROCESSING: { timeout: null, next: 'COMPLETED' },  
  FAILED: { final: true },  
  COMPLETED: { final: true }  
}  

function checkOrderState(order) {  
  const stateConfig = groupOrderStates[order.state]  
  if(!stateConfig.final && order.createTime + stateConfig.timeout < Date.now()) {  
    updateOrderState(order.id, stateConfig.next)  
  }  
}  

Performance Optimization Practices

1. Subpackage Loading Strategy

// app.json configuration  
{  
  "subpackages": [  
    {  
      "root": "o2oModule",  
      "pages": [  
        "shop/list",  
        "shop/detail",  
        "order/checkout"  
      ]  
    }  
  ]  
}  

2. Cache Management Mechanism

// Smart caching strategy  
const CACHE_POLICY = {  
  'shop/list': { ttl: 300, key: 'loc=($latitude,$longitude)' },  
  'shop/detail': { ttl: 86400, key: 'id=($id)' }  
}  

function requestWithCache(url, params) {  
  const policy = CACHE_POLICY[url]  
  const cacheKey = policy.key.replace(/\((\w+)\)/g, (_,k) => params[k])  
  const cached = wx.getStorageSync(cacheKey)  
  if(cached && Date.now() - cached.timestamp < policy.ttl*1000) {  
    return Promise.resolve(cached.data)  
  }  
  return wx.request({ url, data: params }).then(res => {  
    wx.setStorageSync(cacheKey, { data: res.data, timestamp: Date.now() })  
    return res.data  
  })  
}