vscode开发小程序项目并在微信开发者工具运行

这篇具有很好参考价值的文章主要介绍了vscode开发小程序项目并在微信开发者工具运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:vscode开发uniapp之后在微信开发者工具运行,更改的时候微信开发者也同步更改

创建微信小程序所需插件,在vscode的插件管理里面安装就可以了

1.微信小程序开发工具

2.vscode weapp api

3.vscode wxml

4.vscode wechat

vscode开发小程序项目并在微信开发者工具运行

vscode开发小程序项目并在微信开发者工具运行

1.创建小程序命令

这里的uniapp-vue是项目名称,不能大写

vue create -p dcloudio/uni-preset-vue uniapp-vue

2.选择uni-app模版

有几种模版选择,我这边直接选择了默认模版了,直接光标上下就可以选择,选择好后回车就行,回车完成后如下开始创建默认模版

vscode开发小程序项目并在微信开发者工具运行

创建完成后根据蓝色字体提示就可以运行了,这边我们需要更改个东西,先别运行

vscode开发小程序项目并在微信开发者工具运行

3.package.json更改

找到这个,之后更改sever命令 

vscode开发小程序项目并在微信开发者工具运行

  "scripts": {
    "serve": "npm run dev:mp-weixin",

更改完成后再次运行npm run serve

4.可能报错解决

第一次运行可以回出现如下报错,是因为这个autoprefixer版本过高导致的

vscode开发小程序项目并在微信开发者工具运行

运行如下命令重新下载就好了,下载完成后再次运行npm run serve

npm i postcss-loader autoprefixer@8.0.0 

 4.运行

运行命令编译完成后出现如下,根据蓝色字体提示在dist文件找到mp-weixin

vscode开发小程序项目并在微信开发者工具运行

5.打开微信开发者工具

打开微信开发者工具点击加号+

vscode开发小程序项目并在微信开发者工具运行

找到项目下的mp-weixin,选择文件夹,如果没有appid选择测试号就行

 vscode开发小程序项目并在微信开发者工具运行

运行如下,注意!!运行成功后在vscode别关闭项目,代码就在vscode里面写就行,写完保存代码,微信开发者工具也会自动更改

 vscode开发小程序项目并在微信开发者工具运行

 6.结束

文章到此结束希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-483246.html

到了这里,关于vscode开发小程序项目并在微信开发者工具运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 ---在Vscode上编辑,微信开发者工具上预览,快速上手

    成功 导入一个已经在开发中项目 设置高亮 拷贝到 settings.json 重启 vscode 打开 wxml 文件 观察 有没有高亮 安装小程序开发插件 全局配置 app.json pages 字段 只能在微信开发者工具中 编辑 pages字段,按下保存 才生效!!! pages 快速创建页面的时候 在里面创建即可 作用 : 快速创

    2024年02月01日
    浏览(83)
  • 微信开发者小程序项目拉取与推送

    首先有微信开发者工具 有微信代码管理的账号 如果是云开发确认管理员已添加过云开发权限 目录 一、项目拉取 二、项目推送 1.点击版本管理,没有 git仓库创建一个 2.去项目中复制url    3.去个人设置中设置好自己的git的账号密码  4.去设置中的网络和认证填写git账号和密码

    2024年02月12日
    浏览(41)
  • 微信开发者工具的下载及小程序项目创建

    1.注册并微信扫码登录微信公众平台(微信公众平台) 完成如下所示相关信息(保证所填写信息真实有效,以免后续使用出现不必要的问题) 2.点击“普通小程序开发者工具”,跳转至下图所示页面  3.开发工具的准备 点击“微信开发者工具”,跳转至下图所示页面。选择系

    2024年02月10日
    浏览(74)
  • HBuilder X运行微信小程序项目至微信开发者工具失败

    在HBuilder X中运行微信小程序项目时,此步于以下过程,无法进一步打开界面   解决方案: 导入项目即可,但是需要注意导入项目的路径信息。 需要是当前项目unpackage==dist==dev==mp-weixin下面的文件,微信开发者工具才能识别。    

    2024年02月11日
    浏览(70)
  • HBuilder将uniapp项目运行到微信开发者工具进行小程序调试

    HBuilder将uniapp项目运行到微信开发者工具进行小程序调试 有时候我们的项目开发是使用uniapp,而最终是要发布到微信小程序的。 在开发uniapp项目过程中,我们可以使用HBuilderX运行到微信小程序模拟器(微信开发者工具),一边写代码一边调试、预览效果。 电脑安装以下软件

    2024年02月16日
    浏览(73)
  • 搜狗拼音占用了VSCode及微信小程序开发者工具快捷键Ctrl + Shit + K 搜狗拼音截图快捷键

    修改搜狗拼音的快捷键 右键--更多设置--属性设置--按键--系统功能快捷键--系统功能快捷键设置--取消Ctrl + Shit + K的勾选--勾选截屏并设置为Ctrl + Shit + A  微信开发者工具设置快捷键 右键--Command Palette--删除行 微信开发者工具快捷键         删除行:Ctrl + Shit + K 或 Shit + D

    2024年02月11日
    浏览(68)
  • 微信开发者工具下载及小程序项目的创建与调试(完整图文教程)

    每每有工具下载相关博客必有一句话:工欲善其事,必先利其器。 承接上文,本文将介绍微信开发者工具下载及小程序项目结构与工具的详细讲解,使得更容易能够在这个平台上创造出优秀的小程序产品。 前往开发者工具下载页面,根据自己的操作系统下载对应的安装包进行

    2024年04月11日
    浏览(96)
  • 微信开发者工具-导入小程序项目会自动切换到小游戏打开出错的解决方案

    微信开发者工具导入小程序项目会自动切换到小游戏打开出错, 提示appid错误,如下图 错误 Error: INVALID_TOKEN... 表示网络已断开, 检查开发工具是否连接到网络, 或注销重新登录开发工具试试 如果提示缺少 game.json ,表示当前打开的不是小游戏项目,要选小程序项目后再导入

    2024年02月11日
    浏览(96)
  • 微信小程序开发者工具运行 uni-app 项目时报错 Uncaught (in promise) undefined

    开发者工具控制台报错 Uncaught (in promise) undefined,如图: 该错误主要是因为调试基础库过高或过低导致的。 在 微信开发者工具 — 详情 — 本地设置 — 调试基础库 中,将调试基础库版本调低或调高即可 调试基础库:此处选择的基础库为微信中的基础库版本,且仅用于开发者

    2024年02月12日
    浏览(72)
  • 微信开发者工具项目简单介绍和使用

              1.app.json         2.project.config.json         3.sitemap.json         4.页面中的json            1.快速新建小程序页面,在app.json的pages下编写页面的路径,保存后微信开发者工具会自动在对应的路径生成该页面         2.修改小程序项目的首页,在

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包