The O2O service of the Meituan Takeout mini program

O2O Service Model of Meituan Takeout Mini Program

The Meituan Takeout Mini Program is a typical O2O (Online to Offline) service model that connects users with offline restaurants through an online platform. After users place orders on the mini program, the system assigns the orders to nearby delivery riders, completing the entire process from ordering to delivery. The core of this model lies in the seamless integration of online and offline services. For example, users can automatically receive recommendations for restaurants within a 3-kilometer radius via LBS (Location-Based Services) positioning, while merchants receive real-time order notifications and print receipts, and riders update their navigation routes in sync via their delivery app.

// Simulating order status flow logic  
function handleOrderStatus(order) {  
  switch(order.status) {  
    case 'pending':  
      notifyMerchant(order);  
      break;  
    case 'preparing':  
      dispatchRider(order);  
      break;  
    case 'delivering':  
      updateUserTracking(order);  
      break;  
    case 'completed':  
      triggerReview(order);  
      break;  
  }  
}  

Technical Architecture Features of the Mini Program

It adopts a hybrid development approach combining WeChat's native framework with self-developed components. Page routing follows WeChat's 5-level depth limitation, and the product list page uses virtual scrolling for performance optimization. Key technological innovations include:

• WebSocket long connection for order status: Ensures real-time synchronization across merchants, users, and riders.
• Smart recommendation algorithm: Collaborative filtering recommendations based on user order history.
• Stress testing optimization: Handles peak order concurrency of over 5,000 transactions per second.

<!-- Example of a typical page structure -->  
<view class="container">  
  <scroll-view scroll-y>  
    <shop-header shop="{{currentShop}}"/>  
    <food-category   
      wx:for="{{categories}}"  
      foods="{{filterFoods(item.id)}}"  
    />  
  </scroll-view>  
  <floating-cart   
    total="{{cartTotal}}"  
    bind:checkout="handleCheckout"  
  />  
</view>  

Core Function Implementation Details

1. Intelligent Address Positioning System

Integrated with Tencent Map SDK to achieve:

• Reverse geocoding: Converts GPS coordinates into text addresses.
• Fuzzy search: Supports colloquial inputs like "Third Cafeteria in Chaoyang District."
• Historical address caching: Uses wx.setStorageSync for local storage.

// Example of address resolution  
wx.chooseLocation({  
  success(res) {  
    const { latitude, longitude } = res;  
    qqmapsdk.reverseGeocoder({  
      location: { latitude, longitude },  
      success: address => {  
        this.setData({ deliveryAddress: address.result.address });  
      }  
    });  
  }  
});  

2. Shopping Cart Optimization Strategies

• Local caching: Uses wx.setStorage to store unsubmitted orders.
• Merging identical items: Automatically calculates total quantities.
• Real-time calculation: Updates the total price immediately upon quantity changes.

// Shopping cart logic  
addToCart(food) {  
  const { id } = food;  
  let cart = wx.getStorageSync('cart') || {};  
  cart[id] = cart[id] ? cart[id]+1 : 1;  
  wx.setStorageSync('cart', cart);  
  this.calculateTotal();  
}  

Merchant-Side Collaboration Mechanism

A dedicated merchant management mini program was developed, featuring:

1. Order voice alerts: Uses wx.playBackgroundAudio.
2. Business status switching: Affects front-end store display logic.
3. Product inventory synchronization: Displays "Low Stock" when inventory is below 5.

// Example of merchant order acceptance  
wx.request({  
  url: '/api/acceptOrder',  
  data: { orderId },  
  success() {  
    wx.showToast({ title: 'Order accepted successfully' });  
    wx.sendSocketMessage({  
      data: JSON.stringify({   
        type: 'status_update',  
        orderId,  
        newStatus: 'preparing'  
      })  
    });  
  }  
});  

Performance Optimization Practices

Special optimizations for low-end devices:

• Lazy loading of images: Uses wx.lazyLoadComponent.
• Pagination loading: Loads 15 items per scroll to the bottom.
• Caching strategy: Homepage data validity set to 30 minutes.

// Example of pagination loading  
onReachBottom() {  
  if(this.data.loading) return;  
  this.setData({ loading: true });  
  loadNextPage().then(newData => {  
    this.setData({   
      list: [...this.data.list, ...newData],  
      loading: false  
    });  
  });  
}  

User Growth Strategies

Leveraging WeChat’s ecosystem for viral growth:

• Shared red packets: Generates parameterized share cards.
• Group ordering: Creates temporary chat groups.
• Mini program QR codes: Tracks precise channels with embedded user IDs.

// Generating share cards  
onShareAppMessage() {  
  return {  
    title: 'Get a 20-yuan takeout coupon',  
    path: `/pages/index?inviter=${this.data.userId}`,  
    imageUrl: '/assets/share-redpacket.jpg'  
  };  
}  

Exception Handling Solutions

A comprehensive monitoring system:

1. Front-end error collection: Uses wx.onError to capture exceptions.
2. API retry mechanism: Automatically retries critical APIs (e.g., payment) up to 3 times.
3. Fallback solutions: Displays default rankings if the recommendation system fails.

// Payment exception handling  
wx.requestPayment({  
  ...params,  
  fail(err) {  
    if(err.errCode === -2) {  
      showRetryDialog();  
    } else {  
      logError('payment_fail', err);  
    }  
  }  
});  

Data Security Measures

Compliant with PCI DSS payment security standards:

• Sensitive data encryption: Uses WeChat’s encryptData interface.
• Permission control: Strictly limits the usage scope of openid obtained via wx.login.
• Operation auditing: Critical actions (e.g., refunds) require SMS verification.

// Example of data encryption  
wx.login({  
  success(res) {  
    wx.request({  
      url: '/api/decrypt',  
      data: {  
        encryptedData: wx.encryptData(res.code),  
        iv: res.iv  
      }  
    });  
  }  
});  

Future Development Directions

New features under testing include:

• AR menu display: View 3D models of dishes via smartphone camera.
• Voice ordering: Integrates ASR (Automatic Speech Recognition) for dialect support.
• Smart dispatching: Dynamically adjusts delivery ranges based on riders' real-time locations.

// Experimental AR feature code  
wx.startAR({  
  mode: '3d',  
  success() {  
    loadFoodModel('burger').then(model => {  
      this.arView.addModel(model);  
    });  
  }  
});