Lessons and Solutions from Three Months of uniapp Multi‑Platform Development

In this technical summary the author reflects on three months of developing a uniapp multi‑platform project (Android, iOS, H5, WeChat H5, App) and the difficulties encountered, along with the solutions applied.

Issues

Android camera crash

Calling the uniapp API for taking photos sometimes caused the app to crash on certain devices because the system reclaimed resources when the app moved to the background. The solution is to keep the app alive during photo capture or implement a custom camera plugin using libraries such as CameraView, PhotoEditor, and uCrop.

Example of a custom native camera plugin (GIF omitted for brevity).

In‑app notification

The project required notifications that appear while the app is in the foreground, similar to WeChat. Android uses the system notification interface, while iOS uses a custom view. The author implemented a custom notification using Android's Toast class with custom UI, touch handling, and optional animation.

iOS side‑swipe back

When a user swipes back on iOS, navigation guards cannot block the action, leading to page stutter. The author created a utility that detects side‑swipe gestures by monitoring touchstart and touchmove coordinates and provides an isSideSlip flag.

/*
 * @Author: yuanyxh
 * @Date: 2023-12-27 12:04:11
 */
import Vue from "vue";
const ZERO = 0;
const MINIMUM_LEFT_DISTANCE = 100;
const MINIMUM_MOVE_DISTANCE = 50;
const MINIMUM_TIME_INTERVAL = 100;
// ... (full source code omitted for brevity)
export default sideSlip;

Mi Browser swipe conflict

Mi Browser adds a system‑level left/right swipe gesture for page navigation, which conflicts with custom sliders in the project. The author notes that preventing default or stopping propagation does not work because the gesture is handled at the browser kernel level, and no solution is currently known.

Background timer

Webview timers are paused when the app goes to the background. Solutions include combining timers with system time, using performance.now() for more reliable timing, or employing Web Workers for tasks that must continue while the app is backgrounded.

Keyboard height detection

On H5 the soft‑keyboard height is obtained via Window.visualViewport resize events; on App the uni.onKeyboardHeightChange API is used. The author provides a unified wrapper that abstracts these platform differences.

import Vue from "vue";
const DELAY_TIME = 300;
let callbackList = [];
let unimplementedChangeList = [];
function emit(target, payload) { /* ... */ }
// ... (full source code omitted for brevity)
export default { onKeyboardHeightChange, offKeyboardHeightChange, onUnimplementedChange, offUnimplementedChange };

Thoughts and Views

Global modal

Using global components for modals solves duplication and state‑management issues, but uniapp does not support true global components on App. The author suggests creating a dedicated webview via H5+ API to act as a reusable modal container.

Project assessment

The project suffers from inconsistent coding styles, lack of unified conventions, and scattered implementations for input fields, modals, and recording features, making maintenance difficult.

Refactoring

Attempts to replace scroll-view with third‑party components revealed incompatibilities and the risk of missing logic. The author emphasizes the "one test at a time" principle and advises refactoring only when the benefits outweigh the costs.