Common Issues in WeChat Mini Program Development

Recently engaged in WeChat mini program development, encountered some pitfalls/issues during the process. Here’s a summary.

WeChat Image Preview

Sometimes you need to implement long-press on images to show a menu for sharing, etc. The SDK supports this via wx.previewImage, but currently doesn’t support custom menus.

Caching

To reduce unnecessary request overhead and improve speed, attention to caching usage is needed. For example, image resources accessed via wx.getImageInfo will still make new requests even if previously accessed, without using previous cache.

WXML Doesn’t Support JS Function Calls for Conditional Judgment

Calculations and assignments need to be done in the JS logic layer.

Current System Is Not a Secure Proxy

Developer tools show proxy reminder popup, and even after selecting OK, it still reminds on next startup.

Solution: Developer Tools - Settings - Proxy - Direct Connection

Resolution

Different devices have different resolutions. WeChat mini programs provide a new unit rpx, where all devices are 750rpx wide. Use this for width settings during development.

Development/Preview/Production Versions

• Mini programs have development/preview/production versions

• Preview version has only one instance, and submissions for review must be the preview version

  • Submitting for review will definitely affect the preview version

• Preview in developer tools is the development version. Submissions from tools can be set as preview version on the mini program website for product/testing trials. After final approval, it can be submitted for review to publish the production version.

• Multi-person collaboration requires adding others to project members with developer role permissions

  

Pitfall

If the approved pending release version is 2.0.0, and you resubmit a preview version also numbered 2.0.0, it automatically replaces the previous pending release version, and status changes to unreviewed.

Data/setData

1. Data displayed in WXML must be defined in data, and data updates must use setData. Direct this.data updates won’t update the view
2. Variables not consumed in WXML can be stored in custom objects - data around a Page doesn’t necessarily need to be stored in data

NPM Support

Sometimes we need third-party packages, but projects don’t enable NPM support by default - manual operation required.

Enable NPM Module

Generate package.json

1. cd miniprogram directory

2. Run npm init -y

3. Run npm install [packageName]

4. Developer Tools - Tools - Build npm

   • Creates miniprogram_npm under miniprogram

5. Use CommonJS require to load packages in the project, like the code below

   const {substr, length} = require('stringz');
   

If npm build errors occur, manually edit npm-related config in project.config.json.

"setting": {
   "packNpmManually": true,
   "packNpmRelationList": [
            {
                "packageJsonPath": "./miniprogram/package.json",
                "miniprogramNpmDistDir": "./miniprogram/"
            }
        ]
}

Permissions

Mini programs sometimes need permission settings to complete certain features.

Permissions have two parts: 1) WeChat app permissions in the system, 2) mini program permissions within WeChat.

Image Permissions

For image permissions, successful image storage requires both settings:

• iOS requires Settings - WeChat - Photos access authorization
• In mini program - top right corner icon - Settings enable Photo Album

Default Launch Page

The first item in the pages array in miniprogram/app.json is the default launch page. If dynamic, use wx.redirectTo for navigation in the program

TabBar Settings

Custom tabbar settings have 2 parts

1. app.json tabBar settings, including icon configuration

   "tabBar": {
       "list": [
         {
           "text": "Dashboard",
           "pagePath": "pages/dashboard/index",
           "iconPath": "/images/dashboard.png",
           "selectedIconPath": "/images/dashboard-selected.png"
         },
         {
           "text": "Settings",
           "pagePath": "pages/setting/index",
           "iconPath": "/images/setting.png",
           "selectedIconPath": "/images/setting-selected.png"
         }
       ]
     }
   

2. Set data-tabbar variable in specific pages

    data: {
       key: getApiTokenKey(),
       tabs: [{
         text: "Dashboard",
         pagePath: '/pages/dashboard/index',
       },
         {
           text: "Settings",
           pagePath: '/pages/setting/index',
         }],
       currentIdx: 0
     }
   

Error: System Error, Error Code: 2

Error: System error, error code: 2, [20220103 17:25:08][wx9b4f36e257f24b17]

Close to view documentation

Error cause: Developer tools has pre-fetch enabled, but Mini Program - Development Management - Data Pre-fetch is not enabled. If not enabled, uncheck the corresponding option in developer tools.

Real Device Debugging getApp Returns undefined

Select Real Device Debugging 2.0

vConsole Button Appears in Production Version

Access the development version, turn off vConsole in the mini program, then reopen the production version. This is a WeChat developer tools bug.

Final Thoughts

Continuous learning, continuous updating.