Route Completion Error with Incorrect Webview ID

When running a UniApp project, you may encounter an error: routeDone with a webviewId X that is not the current page. This typically occurs in the context of WeChat Mini Programs.

Resolution: Add the following configuration to the pages.json file in your UniApp project (analogous to app.json in native WeChat Mini Programs):

"lazyCodeLoading": "requiredComponents"

This configuration instructs the framwork to preload only essential components during application startup. Non-essential components are loaded dynamically when needed, improving initial performance.

Missing .bak.js Files During Real Device Debugging

An error similar to Error: /XXX.bak.js does not exists may appear during real-device debugging in the WeChat Developer Tools.

Resolution: Delete the unpackage directory from your project root and rebuild the project.

Manageable Project Directories in UniApp

Several directories in a UniApp project can be safely removed under certain condisions:

• unpackage/: Contains compiled builds for local testing. Can be deleted, but ensure you have backups of source code and production builds.
• node_modules/: Houses Node.js dependencies. Can be deleted if the project builds successfully, as dependencies can be reinstalled via npm install or yarn install.
• dist/: Stores the final compiled output. Can be deleted after successful deployment if local copies are no longer required.
• .idea/ & .vscode/: Contain IDE-specific settings for IntelliJ IDEA and Visual Studio Code, respectively. Safe to delete if you use a different editor or have backed up necessary configurations.

Always back up your project before deleting directories. Consult official documentation if uncertain about a folder's purpose.

Undefined __wxConfig Error

The error __wxConfig is not defined in WeChat Mini Program development.

Resolution: Close the WeChat Developer Tools, update it to the latest version, and restart your project. It is recommended to keep automatic updates enabled.

WeChat Developer Tools Service Port Closed

When running a UniApp project targeting WeChat Mini Programs, an error may state that the developer tool's service port is closed, prevanting CLI communication.

Resolution: Manually open the WeChat Developer Tools, navigate to Settings -> Security Settings, and enable the service port. Alternatively, when prompted in the CLI, input y to confirm enabling the port.

Optimizing Mini Program Code Size

Refer to the external article: A Guide to Mini Program Optimization and Reducing Code Size

'getItem' of undefined Error on Real Devices

UniApp does not support cookie or sessionStorage APIs natively across all platforms.

Resolution: Use the unified storage APIs provided by UniApp:

// For synchronous storage
uni.setStorageSync('storage_key', data);
// For asynchronous storage
uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

Node.js Version Compatibility Warning on Windows

HBuilderX may display: Node.js is only supported on Windows 8.1, Windows Server 2012 R2, or higher.

Resolution: Add a system environment variable named NODE_SKIP_PLATFORM_CHECK and set its value to 1. Note that this bypasses a platform check and Node.js might not function correctly on unsupported Windows versions.

Browserslist Database Update Prompt

A prompt to run npx update-browserslist-db@latest may appear.

Resolution: Execute the suggested command in your terminal to update the browserslist database.

Error in app.json: preloadRule Configuration

An error referencing ["preloadRule"] in app.json indicates a misconfiguration in the pages.json file of your UniApp project.

Resolution: Locate the preloadRule configuration within your pages.json file. Ensure the referenced page paths and package names are correct and that the configuration block is properly structured according to the UniApp documentation.

Adapting for iPhone X Notch and Bottom Bar

To prevent UI elements from being obscured by the bottom safe area on iOS devices, apply safe area insets.

Resolution: Add the following CSS to your bottom navigation bar element:

.bottom-nav {
    /* Your existing styles */
    padding-bottom: constant(safe-area-inset-bottom); /* For iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* For iOS >= 11.2 */
    box-sizing: content-box;
}

:key Directive Does Not Support Expressions on Non-H5 Platforms

Using expressions within the :key directive for v-for loops is not supported on mini program platforms (only H5 supports it).

Resolution: Avoid expressions in :key. Use a simple index or a unique identifier from your data item. For separate lists, wrap them in distinct parent elements.

<!-- Incorrect -->
<view v-for="(item, idx) in firstList" :key="'report1p' + idx"></view>

<!-- Correct -->
<block v-for="(item, idx) in firstList" :key="idx">
    <view>{{ item }}</view>
</block>
<block v-for="(item, idx) in secondList" :key="idx">
    <view>{{ item }}</view>
</block>

ECharts Charts Not Displaying on H5 Platform

ECharts components may render correctly in mini programs but fail on the H5 platform, often due to missing container dimensions.

Resolution: Explicitly set a width and height for the DOM element that serves as the ECharts container. Ensure the element is mounted before initializing the chart instance.

Incongruent Status: Enter Error

This error can occur during lifecycle transitions in mini programs.

Potential Mitigation: Attempt to clear any active UI feedback components (like toast messages) within a $nextTick callback, although this may not always resolve the underlying issue. Debugging specific page lifecycle hooks is recommended.

this.$nextTick(() => {
    uni.hideToast();
});