1.安装"微信小程序开发工具"扩展
![](https://file.jishuzhan.net/article/1737382899788812290/05281df33fdcf84ced5ed7e40c4590c7.webp)
2.安装"vscode weapp api"扩展
![](https://file.jishuzhan.net/article/1737382899788812290/007fe8d111ee9572d27b18a145963042.webp)
3.安装"vscode wxml"扩展
![](https://file.jishuzhan.net/article/1737382899788812290/c60915301a87e1aeae18a98051e244a0.webp)
4.安装"vscode-wechat"扩展
![](https://file.jishuzhan.net/article/1737382899788812290/99e8e83dede3d4de2a95756203ffe8fe.webp)
5.在终端执行命令:
vue create -p dcloudio/uni-preset-vue uniapp-test
uniapp-test就是我这里的项目名称了
6.如果遇到了这个错误:
ERROR Failed fetching remote preset dcloudio/uni-preset-vue:
ERROR RequestError: connect ETIMEDOUT 20.205.243.166:443
RequestError: connect ETIMEDOUT 20.205.243.166:443
at ClientRequest.<anonymous> (E:\nodejs\node_global\node_modu at Object.onceWrapper (node:events:628:26)
at ClientRequest.emit (node:events:513:28)
at TLSSocket.socketErrorListener (node:_http_client:494:9)
at TLSSocket.emit (node:events:513:28)
at emitErrorNT (node:internal/streams/destroy:157:8)
at emitErrorCloseNT (node:internal/streams/destroy:122:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
请将镜像网切换成淘宝镜像网:
执行:
npm config set registry https://registry.npm.taobao.org/
然后再执行5中的命令
7.然后选择默认模板
![](https://file.jishuzhan.net/article/1737382899788812290/af37c1a5d277ed402dc25c6e35707894.webp)
等待安装:
出现这样就是代表创建成功了:
![](https://file.jishuzhan.net/article/1737382899788812290/aa93581695e3d23a191854c5c9a6c95c.webp)
先cd uniapp-test这个文件夹:
![](https://file.jishuzhan.net/article/1737382899788812290/9775fc32917ed0739b488f434306aa2b.webp)
8.package.json更改
![](https://file.jishuzhan.net/article/1737382899788812290/1789e9520c1a6d5b934f78e6f904fdeb.webp)
在这里修改:
![](https://file.jishuzhan.net/article/1737382899788812290/461b9f1fe0b9be0e544d02da9de9df35.webp)
改成:"serve": "npm run dev:mp-weixin"(目的:运行在微信开发者工具中)
如果不修改"serve": "npm run dev:h5",那就可以直接运行(执行指令:npm run serve)在h5网页端
出现successfully代表在网页端运行成功了
![](https://file.jishuzhan.net/article/1737382899788812290/d46366f534ab69730010fca62e74ca6e.webp)
9.更改之后执行npm run serve
出现这个代表运行成功:
![](https://file.jishuzhan.net/article/1737382899788812290/ab81e9d7fbcdcdcd58a49d788942f11b.webp)
10.打开微信开发者工具应用(vscode中的那个项目要在运行状态):
若没有这个应用,请先安装这个应用
然后点这个大加号:
![](https://file.jishuzhan.net/article/1737382899788812290/22b02b260423267b225417dbfd973743.webp)
然后打开这个目录,我的项目名称是uniapp-test,找到dist路径下的dev:E:\VScode\codeDate\miniproTest\uniapp-test\dist\dev
然后选择mp-weixin文件夹:
![](https://file.jishuzhan.net/article/1737382899788812290/8cf891adf592b6768a7dbfe4aaf0cf12.webp)
![](https://file.jishuzhan.net/article/1737382899788812290/a31708e237d2a20bef684631ca152003.webp)
填写完appid后,点击不使用云服务,再点击确定
然后就运行成功了:
![](https://file.jishuzhan.net/article/1737382899788812290/be82265a3dab3c034ecec0cefafca58e.webp)
11.恭喜你已经运行成功了!希望我的文章对你有所帮助,欢迎在评论区留言
另外有兴趣的小伙伴要在 VS Code 中编写微信小程序代码并同步到 Git,需要安装以下插件:
-
微信小程序插件(WeChat Mini Program):此插件提供了微信小程序的语法高亮、代码提示、调试、上传等功能。
-
Git 插件(GitLens、Git History、Git Graph等):这些插件提供了 Git 相关的功能,如 Git 历史记录、分支管理、提交和推送代码等。
-
文件同步插件(Live Share、Live Share Audio等):这些插件允许多个开发者同时编辑同一份代码文件,方便协同开发。
-
代码格式化插件(Prettier、ESLint等):这些插件可以自动格式化代码、检查代码中的错误和警告等。
-
智能提示插件(IntelliSense、Auto Import等):这些插件可以提供更加智能的代码提示和自动导入功能,提高开发效率。
除了以上插件之外,您还可以根据个人需求安装其他插件,例如 Markdown 编辑器、REST 客户端、数据库管理工具等。
总之,通过安装这些插件,您可以在 VS Code 中高效地编写微信小程序代码,并将其同步到 Git 中进行版本管理。