The editing area can perform basic operations such as code writing and file addition, deletion, and renaming for current project.

# File Format

Since iOS only supports the UTF8 encoding format, the latest version of the Developer Tools will perform a code format check of the code file when uploading the code.

# File Support

The tool currently provides editing of 5 file formats: wxml, wxss, js, json, wxs, and preview of image files.

# File Operations

There are two ways to create a new page

  1. Right-click on the Directory tree and select New Page. This will automatically generate the wxml, wxss, js, and json needed for the page.

  2. In the pages field of app.json, add the path of the page that needs to be created, and the file needed for the page will be generated automatically.

# Autosave

After editing the code, the tool will automatically help the user to save the current code editing status. Closing the tool directly or switching to another item will not lose the status of the edited file. However, it should be noted that only when the user saves the file actively, modified content can be written to the hard disk.

If "Save automatically when modifying files" is enabled in the Settings (Settings - Edit Settings - Modified Files Are Automatically Saved), the files will be saved to the hard disk automatically when the tools are modifying the files, without the need of manual saving.

If "Automatically Save All Files at Compile Time" is enabled in the Settings (Settings - Compilation Settings - Automatically Save All Files at Compile Time), all files will be saved automatically when clicking and compiling the files.

# Live Preview

If "Automatic Compilation of Mini Program When Files are Saved" (Settings - Editing Settings - Automatic Compilation of Mini Program When Saved) is enabled in the Settings, when the js, json files are modified, you can preview the editing status in real time through the simulator:

Note: If you have enabled the "Save Automatically When Modifying Files" setting at the same time, there will be a certain delay in the compilation actions to avoid frequent compilations. Clicking the compile button manually will compile immediately.

# Automatic Completion

As most editors, tools provide comparatively complete automatic completion

  • js file editing will help developers complete all the APIs and related annotation explanations, and provide code template support
  • wxml file editing will help developers directly write related tags and the attributes in the tags
  • json file editing will help developers to complete the relevant configuration and give real-time prompt

Js Completion

Code template support

Json Completion

3

# Project Configuration File

You can use the project.config.json file in the Root directory of the project to configure the project.

Field Name Type Description
miniprogramRoot Path String Specify the directory of the mini program source (relative path required)
qcloudRoot Path String Specify the directory of tencent cloud project (relative path required)
setting Object Project Settings

The following settings can be specified in setting

Field Name Type Description
es6 Boolean Whether to enable es5 to es6
Postcss Boolean Whether the style is automatically completed when the code is uploaded
minified Boolean Is it automatically compressed when uploading code
urlCheck Boolean Check for secure domain name and TLS version

Example:

{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false
  }
}

# Git Status Display

If there is a Git repository in the mini program project directory (the directory where project.config.json is located), the editor can display current Git status.

# Directory Tree

As shown in the figure, when there is a change in some files, the right side of the file in the directory tree will show the corresponding icon to indicate this status. When there is a file with a change in a directory that is in a folded state, a dot icon is also displayed on the right side of the directory to indicate this.

The meaning of the file icon status is as follows:

Icon Meaning
U File is untracked(Untracked)
A New file (Added, Staged)
M File has been modified (Modified)
+M File has been modified (Modified, Staged)
C Conflict in file (Conflict)
D File is deleted (Deleted)

The meaning of the folder directory icon status is as follows:

Icon Meaning
Red dot There is at least one deleted file in the directory
Small orange dot There is at least one conflicting file in the directory
Blue dot There is at least one untracked file in the directory
Small green dot There is at least one modified file in the directory

If a file has been modified, you can right-click the file and select "Compare with Previous Version", you can see the comparison between the current workspace file and HEAD version

# File Editing

When there is a Git repository, the status bar shows the current branch information for this Git repository. For example, the following figure shows that the current Git repository is on the v2 branch.

At the same time, when editing the contents of the file, the comparison with the previous version will be displayed in real time on the left side of the edited code.

The style is described as follows:

The meaning of the folder directory icon status is as follows:

Style Meaning
Blue Line There is a change in the code here
Green Line The code here is added
Red triangle arrow Code is deleted here

# Windows Style Enter Settings

To ignore Windows-style Enter, go to "Settings" - "Edit" and check "Ignore Windows Style Enter When Git is Comparing File Contents".

After checked, all Windows-style Enter are treated as Unix-style Enter when editing files for content comparison.