WeChat Gadget Tool Code Editing

The edit area can do basic work such as code writing and file addition, deletion, and renaming of the current project.

---

The file format

Because only UTF8 encoding formats are supported under iOS, the latest version of the developer tool does a code format check on the code file when the code is uploaded.

---

File support

The tool currently provides a preview of five types of file editing: wxml, wxs, js, json, wxs, and picture files.

---

File operation

There are two ways to create a new page

1. Right-click on the tree and select New Page, which will automatically generate the wxml, wxs, js, and json required for the page
2. In the pages field of app.json, adding a path to a new page will automatically generate the files required for that page

---

Save automatically

After editing the code, the tool will automatically help the user save the current code editing state, close the tool directly or switch to another project, and will not lose the edited file state, but it is important to note that only if the user actively saves the file, the modification will be actually written to the hard disk.

If "Save automatically when you modify a file" is turned on in settings (set-edit settings-modify file is saved automatically), the tool automatically saves the file to your hard drive when you modify it, without the effect of saving it manually.

The settings turn on "Auto-save all files at compile time" (set-compile settings-auto-save all files at compile time), and automatically save the effect of all files when you click compile.

Real-time preview

---

If the "Automatic Compile Team" is turned on "(location in: Setting - Edit - File Save, you can preview the simulator when the JS, JSON, WXML or WXSS file modifiesEdit:

---

Automatic completion

Like most editors, we provide comprehensive automatic completion

• JS file editing helps development complement all APIs and related annotations, and provide code template support
• WXML file editing will help developers directly write attributes in the related labels and tags.
• JSON file editing will help developers complement the relevant configuration and give real-time tips

JS completion

Code template support

json complement

wxml complement

---

TypeScript support

If the project requires typeScript language development, the developer tool provides a QuickStart project in the TypeScript language when creating the project selection quick start template, and you can choose to create the project and develop it later.

To build and use a TypeScript project, you may need to install npm. With Custom Preprocessing, you can implement running tsc before compilation to compile it into a js file.

To configure the TypeScript compilation options, refer to the configuration of tsconfig.json.

Note: Small programs only support running JS files, so all TS files are not packaged and uploaded by default.

---

Git status presentation

If there is a Git repository in the small program engineering directory (the directory where project.config.json is located), the editor can show the current Git state.

The tree

As shown in the figure, when some files change, the icons on the right side of the file in the tree indicate this state. When there is a variable file in a directory that is in a closed state, a dot icon is displayed to the right of the directory to indicate this.

The meaning of the file icon status is as follows:

Icon	Meaning
U	File not tracked (Untracked)
A	New files (Added, Staged)
M	The file has been modified (Modified)
+M	File modified (Modified, Staged)
C	Conflict of files
D	Files deleted (Deleted)

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

Icon	Meaning
Little red dot	There is at least one deleted file in the directory
Little orange dot	A file with at least one conflicting state in the directory
Little blue dot	There is at least one untraceable file in the directory
Little green dot	There is at least one modified file in the directory

If a file is modified, you can right-click on the file and select Compare to previous version to see how the current workspace file compares to the HEAD version.

File editing

When a Git repository exists, the status bar displays the current branch information for the Git repository. For example, the following illustration shows that the Git repository is currently in the v2 branch.

At the same time, when you edit the contents of a file, a comparison of the contents of the previous version is displayed in real time on the left side of the edited code.

The style description is as follows:

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

Style	Meaning
Blue line	There are changes in the code here
Green line	The code here is new
Red triangle arrow	Here's the code that's been removed

Windows-style carriage return settings

To ignore Windows-style carriage returns, go to Settings - Edit, and check "Windows-style carriage returns are ignored when Git compares file content."

When checked, all Windows-style carriage returns are treated as Unix-style carriage returns when you edit the file for content comparison.

---

The project profile

The project can be configured using the project.config.json file at the root of the project.

The field name	Type	Description
miniprogramRoot	Path String	Specify the directory of the source code of the small program (requires a relative path)
qcloudRoot	Path String	Specify the directory of Tencent's cloud projects (relative path required)
pluginRoot	Path String	Specify the directory of plug-in projects (relative path required)
compileType	String	The type of compilation
setting	Object	Project settings
libVersion	String	The underlying library version
appid	String	The appid for the project, read only when the project is created
projectname	String	The name of the project, read only when the project is created
packOptions	Object	Package configuration options
debugOptions	Object	Debug configuration options
scripts	Object	Custom pre-processing

CompileType valid value

Name	Description
miniprogram	Currently a normal small program project
plugin	Currently a small plug-in project

The following settings can be specified in setting

The field name	Type	Description
es6	Boolean	Whether to enable es6 to es5
postcss	Boolean	Whether the style is automatically complemented when the code is uploaded
minified	Boolean	Whether the code is automatically compressed when it is uploaded
urlCheck	Boolean	Check the secure domain name and TLS version
uglifyFileName	Boolean	Whether code protection is performed

Specify custom preprocessed commands in scripts

Name	Description
beforeCompile	Pre-processing commands before compilation
beforePreview	Pre-process commands before previewing
beforeUpload	Pre-processing commands before uploading

packOptions

PackOptions is used to configure the options for the project during packaging. Packaging is a necessary step for a project to preview and upload.

You can now specify the packOptions.ignore field to configure that ignores files or folders that meet the specified rules when packaging to skip the packaging process and that will not appear in previews or uploaded results.

PackOptions.ignore is an array of objects with the following types of object elements:

The field name	Type	Description
value	string	Path 1 or value
type	string	Type

Among them, type can take the values folder, file, suffix, prefix, regexp2, glob2, respectively, corresponding to folders, files, suffixes, prefixes, regular expressions, Glob rules. All rule values automatically ignore case.

Note 1: The value of the value field represents the file or folder path, with the miniprogram Root as the root.

Note 2: Regexp, glob only 1.02.1809260 and above are supported by the tool.

The example configuration is as follows.

{
  "packOptions": {
    "ignore": [{
      "type": "file",
      "value": "test/test.js"
    }, {
      "type": "folder",
      "value": "test"
    }, {
      "type": "suffix",
      "value": ".webp"
    }, {
      "type": "prefix",
      "value": "test-"
    }, {
      "type": "glob",
      "value": "test/**/*.js"
    }, {
      "type": "regexp",
      "value": "\\.jsx$"
    }]
  }
}

Note: Changes to this part of the setting may require the project to be reopened for it to take effect.

debugOptions

DebugOptions is used to configure the options when debugging project code.

You can now specify the debugOptions.hidedInDevtools field to configure files that hide source code in the debugger Source panel during debugging.

The configuration rules for hidedInDevtools are consistent with packOptions.ignore.

When a js file complies with this rule, the body of the source code for this file in the debugger Sources panel is hidden and displayed as:

// xxx.js has been hided by project.config.json

Note: After you configure this rule, you may need to close and reopen the project to see the effect.

Examples of project configurations:

{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false
  },
  "packOptions": {
    "ignore": []
  },
  "debugOptions": {}
}

---

Shortcuts

See the tool menu bar