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

相关推荐
zluz_12 小时前
微信小程序,组件中使用全局样式
微信小程序·小程序
明月(Alioo)14 小时前
用AI帮忙,开发刷题小程序:微信小程序中实现Markdown图片解析与渲染功能详解
微信小程序·小程序·aigc
aiguangyuan17 小时前
微信小程序中的双线程模型及数据传输优化
微信小程序·前端开发
Ching·17 小时前
RK3568入门之VScode远程连接开发板,直接开发板上面编程和实验
linux·ide·vscode·编辑器·rk3568
青草地溪水旁17 小时前
Visual Studio Code中launch.json深度解析:C++调试的艺术
c++·vscode·json
笨笨狗吞噬者20 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
小小前端_我自坚强20 小时前
UniApp 微信小程序开发使用心得
面试·微信小程序·代码规范
逆境清醒21 小时前
VS Code配置Python开发环境系列(1)___VScode的安装 ,VScode常用快捷键
vscode·python·visual studio code
右子1 天前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
江城开朗的豌豆1 天前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序