Foreword:
A small program plug-in that webstorm can install: wechat-miniprogram-plugin , to realize the syntax highlighting of the small program, and recognize the small program-specific unit such as rpx, and also realize some similar operation functions as those in the developer tool.
Precautions:
1. The project.config.json file in the root directory of the applet must have the following items to be detected as a applet project by the plug-in
"compileType": "miniprogram"
2、高亮不成功的话，看看你是否 点我 把wxml和html连接起来，wxss和css连接起来，如果是的话，需要去除，去除方法看最下面的！！！
1. Install the plug-in
English version: file -> settings -> plugins
Search: wechat mini program support and then install / install, after installation, it will look like the picture below
2. Specific use in webstorm
1) Create a new page or a new component, just like the Mini Program Developer Tool, you can create all related files and have default content
Right-click the container, the top is the component, and the bottom is the page
wxml, wxss open is empty
js opens by default
Component({
properties: {},
data: {},
methods: {
}
});json opens by default
{
"component": true,
"usingComponents": {
}
}
2) Code syntax hints
1. Inside wxml: Enter a b, you can see that there are commonly used events
Add an event abc in wxml, then place the mouse on abc, Alt+Enter and click to create the method, you can see that the method is automatically generated in js
<view>
<view class="aaa" bind:tap="abc"></view>
</view>
2. Put your mouse in the middle of the class name, then right click, create, there is in the wxss file, the rpx here is recognized, and no more errors will be reported
3) View some native label information of the applet
Above the tab, use ctrl+q
! ! ! If your highlighting is not displayed, and rpx continues to report errors after installation, and webstorm has adjusted the highlighting effect before, see my operation below:
1. Find the file type
English version: file -> settings -> editor -> file types
Chinese version: File -> Settings -> Editor -> File Type
wxml: Figure 1 is Chinese, Figure 2 is English
wxss: Figure 1 is Chinese, Figure 2 is English
