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

相关推荐
(づど)2 小时前
解决VSCode中安装Go环境Gopls失败的问题
vscode·golang
QQRRRRW14 小时前
Tailwind+VScode (Vite + React + TypeScript) 原理与实践
vscode·react.js·typescript
_OP_CHEN14 小时前
前端开发实战深度解析:(一)认识前端和 HTML 与开发环境的搭建
前端·vscode·html·web开发·前端开发
项目題供诗15 小时前
微信小程序黑马优购(项目)(一)
微信小程序·小程序
项目題供诗15 小时前
微信小程序黑马优购(项目)(三)
微信小程序·小程序
H_ZMY17 小时前
微信小程序 mp-html:专为小程序设计的富文本渲染组件
微信小程序·小程序·html
charlie11451419120 小时前
利用WSL + VSCode + ESP-IDF6开发ESP32系列单片机指南
ide·vscode·单片机·esp32·wsl·指南·工程
0欧姆1 天前
VScode 创建 QNX 模板工程
ide·vscode·编辑器
阿波茨的鹅2 天前
VSCode C++ 项目配置教程
c++·ide·vscode
千寻技术帮2 天前
50043_基于微信小程序的小区物业管理系统
mysql·微信小程序·源码·文档·ppt