Overseas Food Delivery Platform Setup Guide: UniApp Frontend, Custom Products and Multi-language Deployment

Disclaimer: This article is for technical education and demonstration only. It is not investment or business advice. Any payment processing must comply with local laws, regulations, and the policies of the payment processor you choose.

I recently helped a client targeting the Southeast Asian market set up an overseas food delivery platform. The frontend is built with UniApp and the backend uses fully open source PHP. The biggest highlight of this system is that products can be customized and configured from the admin panel, and the order flow is highly flexible. The entire process from environment configuration to going live took about three days, and I ran into a few small pitfalls along the way. I am organizing and sharing this for anyone who needs it.

One, System Feature Overview

The core functional modules of this overseas food delivery platform are as follows:

  1. Custom Product Configuration: The backend can flexibly add products, set prices, inventory, and descriptions, and supports multi-specification combinations. New products can be listed without changing the code.
  2. Order Management System: Complete order lifecycle management, from placing an order, payment, delivery to completion. Each node has a status marker for easy operational tracking.
  3. Payment Integration Examples (Demo/Test Only): The project includes sample payment integration flows for learning and testing. In a production environment you must connect your own approved payment gateway and comply with its terms and local regulations.
  4. Multi-language Support: Currently built-in English, Simplified Chinese, and Traditional Chinese. Other languages can be expanded as needed.
  5. UniApp Frontend: One set of code simultaneously generates H5, Android, and iOS versions. The maintenance cost is low, and updates only need to be made once.
  6. Payment Interface Reserved: The system architecture reserves a payment interface module, but the payment channel needs to be integrated by yourself. It supports mainstream overseas payment gateways.

Two, Preparation Before Deployment

Before deploying this system, check the following checklist:

  • Server: Linux environment, recommended CentOS 7.6+ or Ubuntu 20.04+, minimum configuration 2-core 4G.
  • Runtime Environment: Nginx 1.18+, PHP 7.4+, MySQL 5.7+. It is recommended to use the Baota panel for one-click installation.
  • Development Tools: HBuilderX (for compiling UniApp frontend), Node.js 14+ (for frontend dependencies).
  • Domain and SSL: HTTPS configuration is recommended. Overseas domains do not require registration, but SSL certificates must be configured.
  • Payment Channels: Prepare overseas payment interfaces in advance, such as Stripe, PayPal, or other local payment methods.
  • Source Code Integrity: Confirm that the source package includes the backend API, frontend UniApp project, and database .sql files.

Three, Common Issues and Pitfall Records

3.1 Frontend Routing Fails in H5 Mode

UniApp’s vue-router in H5 mode needs to configure history mode. The default hash mode will cause some pages to return 404 after refreshing. Modify the router configuration in manifest.json, change the mode to history, and configure the try_files rule in Nginx.

3.2 Product Images Show Blank After Upload

This issue is usually caused by the PHP GD library not being installed or insufficient upload directory permissions. Check the PHP extensions in the Baota panel to confirm that gd, fileinfo, and exif are all installed. Then check whether the uploads directory permissions are 755.

3.3 Multi-language Switching Does Not Take Effect

Language pack files are placed in the static/i18n directory. If the page does not refresh when switching languages, it may be a caching issue. In UniApp’s App.vue, listen for the language switch event and force the current page data to refresh.

Four, Customization and Expansion Suggestions

If the standard version functions are not enough, consider the following expansion directions:

  • Add a rider-side app, support real-time positioning and order accepting, to make it a complete food delivery closed loop.
  • Integrate a map API to achieve delivery route planning and estimated delivery time calculation.
  • Add a coupon system supporting full reduction, discount codes, and new user gift packages.
  • Add a membership level system that automatically upgrades based on consumption amount to enjoy different discounts.
  • Add a data analysis backend to track core indicators such as order volume, average order value, and repurchase rate.

Tip: Overseas operations must pay attention to data compliance, especially user privacy and payment data. It is recommended to place the server in the target market locally or choose a compliant cloud service provider to avoid subsequent legal risks.

Five, FAQ

Q1: What payment methods does this system support?
A: The system itself does not bind to a payment channel. It reserves a payment interface and can integrate with any payment gateway that supports HTTP callbacks. Stripe, PayPal, and local bank transfers can all be integrated.

Q2: Can it be made into a pure app?
A: Yes. The UniApp project supports packaging into Android APK and iOS IPA, and can also generate WeChat mini-programs and H5 pages. One set of code covers multiple platforms.

Q3: Does custom product configuration require programming skills?
A: No. All product configurations are visual operations in the backend. Uploading images, filling in prices, and setting inventory are all click-and-select operations with no coding required.

Q4: Does the system support multi-language switching?
A: Yes. Currently built-in English, Simplified Chinese, and Traditional Chinese. The backend can freely enable or disable them. If you need to add a new language, you only need to translate the language pack file.

Q5: Is the source code fully open source?
A: Yes. The backend PHP is fully open source, and the frontend UniApp project is also complete source code. There are no encrypted files, and it can be freely customized.

Disclaimer: This article is organized based on source code demonstration content and is for technical learning and exchange only. Payment integration examples are for demonstration and testing purposes. Before accepting real payments, you must obtain all necessary licenses, connect a legally approved payment gateway, and follow the gateway’s policies and the laws of every jurisdiction where you operate.