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

相关推荐
冷面杰拉德35 分钟前
vscode连接docker
ide·vscode·docker
咸虾米1 小时前
微信小程序服务端api签名,安全鉴权模式介绍,通过封装方法实现请求内容加密与签名
vue.js·微信小程序·uni-app
wstcl4 小时前
安卓app、微信小程序等访问多个api时等待提示调用与关闭问题
android·微信小程序·webapi
咸虾米6 小时前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
vue.js·微信小程序
AAA修煤气灶刘哥7 小时前
微信小程序+Spring Boot:三步教你搞定微信小程序登录+Token加密+全局拦截器
spring boot·后端·微信小程序
xlntj9 小时前
VsCode远程连接服务器后安装Github Copilot无法使用
服务器·vscode·github
无你想你1 天前
利用vscode时进行调试,即使设置justMyCode为False仍然失败,如何解决?
ide·vscode·编辑器·justmycode
小小怪下士_---_1 天前
uniapp开发微信小程序自定义导航栏
前端·vue.js·微信小程序·小程序·uni-app
摸着石头过河的石头1 天前
小程序调试全攻略:微信/支付宝避坑指南,小白也能一次通关
前端·微信小程序
Zeluar1 天前
关闭VSCode Markdown插件在Jupyter Notebook中的自动预览
ide·vscode·jupyter