Requirement: After vscode develops uniapp, it runs in WeChat developer tools, and WeChat developers also change it synchronously when changing
Create the plug-ins required for WeChat applets, just install them in the plug-in management of vscode
1. WeChat Mini Program Development Tool
2.vscode weapp api
3.vscode wxml
4.vscode wechat
1. Create an applet command
Here uniapp-vue is the project name, which cannot be capitalized
vue create -p dcloudio/uni-preset-vue uniapp-vue2. Select the uni-app template
There are several templates to choose from. Here I directly choose the default template. You can select it directly with the cursor up and down. After selecting it, press Enter. After the press enter is completed, start to create the default template as follows
After the creation is complete, it can be run according to the blue font prompt. Here we need to change something, don't run it yet
3.package.json change
Find this, after that change the sever command
"scripts": {
"serve": "npm run dev:mp-weixin",Run npm run serve again after the changes are complete
4. Possible error resolution
The following error can be reported when running for the first time, because the autoprefixer version is too high
Just run the following command to re-download, and run npm run serve again after the download is complete
npm i postcss-loader [email protected] 4. run
After running the command and compiling, it appears as follows, according to the blue font prompt, find mp-weixin in the dist file
5. Open the WeChat developer tools
Open the WeChat developer tools and click the plus sign +
Find mp-weixin under the project, select the folder, if there is no appid, select the test number
Run as follows, pay attention! ! After running successfully, don’t close the project in vscode, just write the code in vscode, save the code after writing, and the WeChat developer tool will automatically change
6. end
The article ends here and I hope it will be helpful to you~