vscode开发微信小程序

下载插件

插件下载位置

1. 微信小程序开发工具

2. vscode weapp api

3. vscode wxml

4. vscode-wechat

创建项目

终端运行命令

cd 到要创建项目的目录执行命令:vue create -p dcloudio/uni-preset-vue test

test就是项目名称

选择默认模板,回车

出现下图这样就创建成功了

打开项目文件夹

选择刚才创建的项目文件,信任此项目

修改package.json文件,"serve": "npm run dev:mp-weixin",

运行项目

在终端cd 到项目文件中,运行项目

cd test

npm run serve

出现下图这样就运行成功了

微信开发者工具看效果

点击加号

填写信息

项目名称:test(自行修改)

目录:C:\Users\20446\WeChatProjects\test\dist\dev\mp-weixin(刚才创建的项目目录下的dist\dev\mp-weixin)

AppID:选择自己的appid

后端服务:不使用云服务

点击创建

出现下图这样就创建成功啦

vscode不能看运行效果,但代码的修改与开发者工具是同步的,要在微信开发者工具中查看效果

相关推荐
ZiYiMing9 小时前
miniprogram-automator 在 2026 年还能用吗?——官方 SDK 三处硬伤的排查与重建
微信小程序
迷路爸爸18011 小时前
cursor资源管理器修改为与vscode一样的纵向布局
ide·vscode·编辑器
拖孩13 小时前
一个人 + AI 做的小程序,上线 15 天赚了 10 块 5
前端·后端·微信小程序
星羽XingYu13 小时前
esp32 vscode clangd 无法索引库函数解决方案
ide·vscode·编辑器
Dontla14 小时前
VSCode Python扩展自动加载.env环境变量机制(Python插件)python.terminal.useEnvFile
ide·vscode·python
show43315 小时前
2026微信小程序创作工具生态技术趋势:从单一功能到AI整合型平台演进
人工智能·微信小程序·小程序
平头某16 小时前
DSH:Agent 的 VSCode 时刻?
ide·vscode·编辑器
Dontla17 小时前
VSCode打开关闭控制台面板快捷键ctrl+`(terminal快捷键、vscode控制台快捷键)
ide·vscode·编辑器
徽京人1 天前
VS Code 接入Esp 32步骤
vscode·单片机·嵌入式硬件
oushaojun22 天前
vscode中支持deepseek ai辅助编程
vscode·copilot·deepseek