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

相关推荐
weixin_426689207 小时前
vscode C语言编译环境搭建(单个文件)
c语言·ide·vscode
BestOrNothing_201512 小时前
Ubuntu 22.04 下调整 VS Code 界面及字体教程
linux·vscode·ubuntu22.04·界面调整
计算机安禾12 小时前
【C语言程序设计】第39篇:预处理器与宏定义
c语言·开发语言·c++·vscode·算法·visual studio code·visual studio
2501_9339072115 小时前
南京本凡科技,怎么选择专业小程序开发才能提升品牌竞争力?
科技·微信小程序·小程序
心无旁骛~16 小时前
【Claude Code开发】AI记账助手(miaozhang)微信小程序开发与部署完整指南
人工智能·微信小程序·notepad++
2501_9339072118 小时前
本凡科技提供的宁波小程序开发服务全面解决方案
科技·微信小程序·小程序
阿珊和她的猫18 小时前
微信小程序静默授权异步问题的处理方案
微信小程序·状态模式·notepad++
左师佑图18 小时前
微信小程序集成 Day.js 插件的完整解决方案
微信小程序·小程序
2501_9339072118 小时前
本凡科技提供宁波小程序服务与定制解决方案
科技·微信小程序·小程序
2501_933907211 天前
宁波小程序开发服务与技术团队专业支持
科技·微信小程序·小程序