vscode-uniapp-微信小程序

386 阅读2分钟

vscode-uniapp-微信小程序

相关链接:

怎么用vscode运行unipp的项目到微信开发者工具

uni-app官网-创建uniapp项目

微信小程序注册流程及APPID获取

在vscode中开发uniapp时pages.json和manifest.json注释报错解决方案

如何打开并且配置vscode的setting.json文件

以下流程若出现不明白的地方,可以进入对应链接进一步研究

目的:

在vscode中修改uniapp项目,在微信小程序开发者工具中实时更新。

实现流程:

通过vscode创建uniapp项目,将uniapp项目打包成微信小程序后,在微信小程序开发者工具中打开。

具体过程:

1.确保安装nodejs,且版本在18.以上;确保安装vue

2.命令创建uniapp,vue版本自选,之后选择默认模板

vue create -p dcloudio/uni-preset-vue you-project-name

3.设置pages.json和manifest.json可以存在注释

4.安装微信小程序开发者工具,下载vscode插件(微信小程序开发工具)

5.vscode终端运行命令,打包uniapp为微信小程序,打包完成后在dist/dev文件夹中可以看到mp-weixin文件夹

npm run dev:mp-weixin    //支持热重载,即实时更新
npm run build:mp-weixin  //已开发完成的项目,无法热重载

6.获取自己的微信小程序id,mp-weixin文件夹的路径

7.在微信小程序开发者工具中创建小程序项目,填入id,路径,创建项目即可

常见问题:

运行项目后,在微信小程序开发者工具中显示:未找到 app.json 中的定义的 pages "pages/category/index" 对应的 WXML 文件

原因:

该软件自带的bug

解决: 可以尝试进入app.json文件,剪切掉page中的文件路径,再次运行,运行后将page中原本的文件路径复制进去,再次运行或退出重进即可

相关链接: 未找到 app.json 中的定义的 pages "pages/category/index" 对应的 WXML 文件的解决方案