WeChat Developer Tools Preview

The preview in the WeDa editor primarily showcases web-application previews. To preview Mini Program applications, you can utilize the WeChat Developer Tools Preview feature.

The WeChat Developer Tools Preview feature refers to the capability of building a Mini Program application, locally launching the WeChat Developer Tools, and previewing the Mini Program in real time. After editing an application in the WeDa Editor, clicking the WeChat Developer Tools Preview will synchronize the application features to the local WeChat Developer Tools.

Usage

Installing Prerequisites

There are some prerequisites for the WeChat Developer Tools Preview:

1. Install WeChat Developer Tools

You need to install WeChat Developer Tools locally. It is recommended to download the latest version from the official website.

2. Install @cloudbase/cli

You need to install @cloudbase/cli locally. It is recommended to install version 2.1.9 or above. The installation command is as follows:

npm i @cloudbase/cli -g

For details, refer to.

3. Log in to @cloudbase/cli

After installing @cloudbase/cli, you need to log in. Execute the following command to log in:

tcb login
# Alternatively, this command can also be used, serving the same purpose as the command above:
cloudbase login

Steps to Launch WeChat Developer Tools Preview

1. Install environment

Refer to the previous chapter "Pre-environment Installation" for environment preparation. Steps 1-3 are mandatory; otherwise, the launch will fail.

2. Bind Mini Program

Click the 'Publish' button, select the mini program, and wait for the publish to succeed.

3. Start @cloudbase/cli watch mode

The command is as follows:

tcb lowcode watch

As shown below, it has started successfully:

You may encounter a prompt to log in. If you need to log in, enter the following command:

tcb login

Follow the prompts to log in.

4. Check if the security port of WeChat Developer Tools is open

Open WeChat Developer Tools and check whether the service port under Settings-Security Port-Service Port is enabled:

5. Click the 'WeChat Developer Tools Preview'

Modify the application, click Save, then click WeChat Developer Tools Preview to launch the WeChat Developer Tools.

Waiting for launch:

Open WeChat IDE:

6. Click the 'WeChat Developer Tools Preview' again after modification

After modifying the application in WeDa Editor, click Save, then click 'WeChat Developer Tools Preview' to synchronize. The steps are the same as in step 3.

If other issues occur during the process, refer to the following FAQ:

Frequently Asked Questions

1. WeChat Developer Tools port is not enabled

By default, WeChat Developer Tools -> Security -> Service Port is enabled. If the following error occurs, it indicates that the port may be disabled:

Open the IDE, but if the port is disabled, this error may also occur:

You need to enable it:

2. node_modules installation failed or npm build failed

If a white screen appears or console errors occur:

❗❗ It might be due to the failure of installing node_modules or building npm in the project

Solution: Open the directory where the yellow text is located and execute the following commands:

# Clear npm cache
npm cache clean --force

# Install dependencies
npm i

Install node_modules. If the installation is successful, you will see the node_modules directory under the folder:

❗❗After installing node_modules, you must rebuild npm, click to compile and refresh. Follow the steps below to proceed

After clicking Compile, if the application becomes visible, it indicates success. If clicking Compile has no effect, try restarting the WeChat Developer Tools:

3. Failed to open WeChat Developer Tools

If you fail to open WeChat Developer Tools, first check whether the port is open. Refer to step 2.

Alternatively, you can manually open the command line yellow text using WeChat Developer Tools:

Then click the WeChat Developer Tools Preview again to build.

4.@cloudbase/cli version is too low

If the @cloudbase/cli version is too low, it may cause other unforeseeable problems. Please upgrade the cli version first. Execute the following command:

# Delete Version
npm uninstall @cloudbase/cli -g

# Clear Cache
npm cache clean --force

# Reinstall
npm i @cloudbase/cli -g

5. Not logged in to @cloudbase/cli

If executing tcb lowcode watch fails and the following error occurs, it indicates that you are not logged in.

Run the following command to log in:

tcb login

After executing the above command, the authorization page will open. Click Authorize to proceed: