Skip to main content

WeChat Developer Tools Preview

The preview in WeDa Editor is primarily for web applications. If you need to preview mini-program applications, you can use the preview feature of WeChat Developer Tools.

The WeChat Developer Tools preview feature refers to the functionality of building a mini-program application, locally launching WeChat Developer Tools, and previewing the mini-program in real time. After editing an application in WeDa Editor, clicking the WeChat Developer Tools preview button synchronizes the application features to the local WeChat Developer Tools.

Usage

Installing Prerequisites​

The WeChat Developer Tools preview has the following prerequisites:

1. Install WeChat Developer Tools​

WeChat Developer Tools needs to be installed locally. It is recommended to download the latest version from the official website.

2. Install @cloudbase/cli​

@cloudbase/cli needs to be installed locally. It is recommended to install version 2.1.9 or later. The installation command is as follows:

npm i @cloudbase/cli -g

For details, refer to /cli-v1/install.

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 also works and serves the same purpose as the above command:
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-4 are necessary; otherwise, the launch cannot be successfully initiated.

2. Bind Mini Program​

Click the "Publish" button, select Mini Program, and wait for successful publication.

3. Start @cloudbase/cli watch mode​

The command is as follows:

tcb lowcode watch

The following indicates a successful launch:

You may be prompted to log in. If login is required, 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 Settings - Security Port - Service Port is enabled:

5. Click "WeChat Developer Tools Preview"​

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

Wait for launch:

Open WeChat IDE:

6. After making modifications, click "WeChat Developer Tools Preview" again​

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 arise during the process, refer to the following "Frequently Asked Questions"

Frequently Asked Questions​

1. The security port of WeChat Developer Tools is not open​

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

If the IDE is open but the port is closed, this error may also occur:

Open it:

2. node_modules installation failed or npm build failed​

If a white screen appears or the console reports an error:

❗❗ This may be due to a failed node_modules installation or npm build failure in the project

Solution: Open the directory containing the yellow text and execute the following commands:

# Clear npm cache
npm cache clean --force

# Install dependency packages
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 and click to compile/refresh. Follow the steps below to proceed

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

3. Failed to open WeChat Developer Tools​

If WeChat Developer Tools fails to open, first check if the port is enabled and refer to Step 2

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

Then click the WeChat Developer Tools Preview again to start the build.

4. @cloudbase/cli version is too low​

If the @cloudbase/cli version is too low, it may cause other unpredictable issues. Please upgrade the CLI version first by executing the following command:

# Deleting Versions
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 the execution of tcb lowcode watch fails and the following error occurs, it indicates that you are not logged in.

Execute the following command to log in:

tcb login

After executing the above command, the authorization page will open; click Authorize to proceed: