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不能看运行效果,但代码的修改与开发者工具是同步的,要在微信开发者工具中查看效果

相关推荐
Luoxi_84 小时前
Anaconda超详细的安装教程+VScode的使用
ide·vscode·编辑器
JudithHuang4 小时前
受够了带广告的单位换算 App,我自己做了一个微信小程序
微信小程序
小羊Yveesss6 小时前
2026年如何自己搭建一个外贸网页?单页验证和完整网站的区别
微信小程序·小程序·开源
无糖冰可乐217 小时前
安装wsl2,并链接Windows上的vscode运行项目
pytorch·vscode·python·pip
流量猎手11 小时前
Vscode登陆服务器
服务器·ide·vscode
小羊Yveesss1 天前
2026年微信小程序搭建一般需要多长时间?不同方案周期和延期点
微信小程序·小程序
小羊Yveesss1 天前
2026年微信小程序搭建算什么费用?年费、设计费、开发费和维护费
微信小程序·小程序
巴渝小禹1 天前
【VSCODE】使用技巧
vscode
snow@li1 天前
VSCode:学习手册 / 全景梳理与深度分析
ide·vscode
小羊Yveesss2 天前
2026年微信小程序后端怎么搭建?后台、数据、接口和运维怎么选
运维·微信小程序·小程序