Secondary Development Micro Trading System Source Code Setup Guide: Precious Metals Micro Trading Platform and UniApp Frontend Implementation

Last month I took on a client who wanted a precious metals micro trading platform with a UniApp frontend wrapper, while keeping the ThinkPHP backend unchanged. I spent three days getting the whole system running and encountered quite a few pitfalls along the way. UniApp’s cross-platform capabilities are indeed impressive, but compared to pure Vue projects, there are some API compatibility issues to watch out for. I’m documenting the entire process here in hopes of helping others who need it.

1. System Architecture and Technology Selection

This micro trading system adopts a frontend-backend separated architecture with the following technology stack:

1. Frontend Framework: UniApp, where one codebase can compile to H5, WeChat Mini Program, App, and other platforms. In actual testing, the H5 version is the most stable, while the App version requires handling some native permission issues.
2. Backend Framework: ThinkPHP 6.x, a classic PHP MVC framework with a low learning curve and mature documentation community.
3. Database: MySQL 5.7+, storing user data, order transactions, product configurations, and other core data.
4. Real-time Quotes: WebSocket pushing real-time precious metals prices, with the frontend receiving data through UniApp’s websocket API.
5. Admin Panel: An independent backend panel for product configuration, user management, and fund flow tracking.

The system supports a rich variety of product types. In addition to mainstream precious metals like gold and silver, it can also configure crude oil, forex, and other categories. The backend product management module supports dynamic addition and removal, with the frontend automatically syncing the display.

2. Environment Preparation Checklist

Before officially starting the setup, check the environment first to avoid problems later:

• Server: CentOS 7+ or Ubuntu 20.04+, recommend 4-core 8GB at minimum.
• PHP Environment: PHP 7.4+, need to enable pdo_mysql, gd, fileinfo extensions.
• Web Server: Nginx 1.18+, configure URL rewrite and HTTPS.
• Node.js: 14+, for compiling UniApp frontend projects.
• HBuilderX: UniApp official IDE, more convenient for development and debugging.
• MySQL: 5.7+, choose utf8mb4_unicode_ci when creating the database.
• Redis: Optional, used for session caching and quote data caching.

Special reminder: ThinkPHP’s runtime directory must have write permissions, otherwise log and cache files cannot be generated and the system will throw errors directly. I got stuck for half an hour due to permission issues during my first setup.

3. Common Issues and Troubleshooting Records

3.1 UniApp Compiled Style Disarray

When UniApp compiles to H5, some CSS units (rpx) display abnormally on PC browsers. It’s recommended to use px uniformly in the project or handle it with conditional compilation. My approach is to add global styles in App.vue with platform-specific adaptations.

3.2 WebSocket Quote Disconnection and Reconnection

Precious metals quotes have high real-time requirements, but WebSocket connections drop during network fluctuations. UniApp’s websocket API doesn’t have built-in automatic reconnection, so you need to implement heartbeat detection and reconnection yourself. I added a ping every 5 seconds, and if no pong is received within 15 seconds, it automatically reconnects, which works well.

3.3 ThinkPHP Cross-Origin Configuration

Frontend-backend separation inevitably encounters cross-origin issues. ThinkPHP 6 can configure allowed origin domains in config/cors.php, but remember to add the production environment domain, not just localhost. If the interface returns CORS errors after going live, this configuration is likely the culprit.

3.4 Backend Product Changes Not Syncing to Frontend

After modifying product information in the backend, the frontend still shows old data after refreshing. This is because the frontend has local caching. You need to add a version number parameter on the product detail page, automatically increment the version number when the backend modifies products, and force refresh the cache when the frontend detects a version change.

4. Feature Extensions and Customization Directions

According to client needs, this system can be further developed in several directions:

1. Multi-language support: UniApp’s i18n plugin is relatively easy to integrate, just extract copy to JSON files to achieve Chinese-English switching.
2. K-line Charts: Integrate echarts or TradingView’s K-line chart components to enhance the trading experience.
3. Payment Channels: Integrate third-party payment or digital currency payment to meet different users’ recharge needs.
4. Risk Control Rules: Add position limits, maximum single order amounts, and other risk control parameters to reduce operational risk.

Risk Warning: Precious metals micro trading involves high risks. Building such systems requires obtaining relevant financial licenses and operating within a compliant framework. Unauthorized financial trading services are illegal, so please be sure to comply with local laws and regulations.

5. FAQ Frequently Asked Questions

Q1: Can UniApp compiled Apps be listed on app stores?

A: Yes, but you need developer accounts for each platform. Apple App Store review is quite strict, and financial apps need to provide relevant qualification certificates. I recommend launching the H5 version first, accumulating users, and then considering the App.

Q2: How many concurrent users can the system support?

A: On a 4-core 8GB server, the ThinkPHP + MySQL configuration can support approximately 2000 online users. If the user base is larger, I recommend adding Redis caching, MySQL read-write separation, or using message queues for peak shaving.

Q3: Where does the quote data come from?

A: The system itself doesn’t come with quote sources; you need to integrate third-party data interfaces. Common ones include Sina Finance, Juhe Data, and other APIs, charged by call volume. You can also directly connect to exchange data push services.

Q4: Can the backend set trading fees?

A: Yes. The backend has an independent fee configuration module that supports setting different fee ratios by product, user level, and trading direction. Changes take effect in real-time without needing to restart the service.

Important Notice: This system is for technical demonstration and learning purposes only. Any commercial use involving financial transactions must obtain relevant licenses and comply with local laws and regulations. Investment involves risks; proceed with caution.