vscode如何开发微信小程序?(保姆级教学)

1.安装“微信小程序开发工具”扩展

2.安装“vscode weapp api”扩展

3.安装“vscode wxml”扩展

4.安装“vscode-wechat”扩展

5.在终端执行命令:

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

uniapp-test就是我这里的项目名称了

6.如果遇到了这个错误:

ERROR  Failed fetching remote preset dcloudio/uni-preset-vue:ERROR  RequestError: connect ETIMEDOUT 20.205.243.166:443
RequestError: connect ETIMEDOUT 20.205.243.166:443at ClientRequest.<anonymous> (E:\nodejs\node_global\node_modu    at Object.onceWrapper (node:events:628:26)at ClientRequest.emit (node:events:513:28)at TLSSocket.socketErrorListener (node:_http_client:494:9)   at TLSSocket.emit (node:events:513:28)at emitErrorNT (node:internal/streams/destroy:157:8)at emitErrorCloseNT (node:internal/streams/destroy:122:3)    at processTicksAndRejections (node:internal/process/task_queues:83:21)

请将镜像网切换成淘宝镜像网:

执行:

npm config set registry https://registry.npm.taobao.org/

然后再执行5中的命令

7.然后选择默认模板

等待安装:

出现这样就是代表创建成功了:

先cd uniapp-test这个文件夹:

8.package.json更改

在这里修改:

改成:"serve": "npm run dev:mp-weixin"(目的:运行在微信开发者工具中)

如果不修改"serve": "npm run dev:h5",那就可以直接运行(执行指令:npm run serve)在h5网页端

出现successfully代表在网页端运行成功了

9.更改之后执行npm run serve

出现这个代表运行成功:

10.打开微信开发者工具应用(vscode中的那个项目要在运行状态):

若没有这个应用,请先安装这个应用

然后点这个大加号:

然后打开这个目录,我的项目名称是uniapp-test,找到dist路径下的dev:E:\VScode\codeDate\miniproTest\uniapp-test\dist\dev

然后选择mp-weixin文件夹:

填写完appid后,点击不使用云服务,再点击确定

然后就运行成功了:

11.恭喜你已经运行成功了!希望我的文章对你有所帮助,欢迎在评论区留言

另外有兴趣的小伙伴要在 VS Code 中编写微信小程序代码并同步到 Git,需要安装以下插件:

1.  微信小程序插件(WeChat Mini Program):此插件提供了微信小程序的语法高亮、代码提示、调试、上传等功能。

2.  Git 插件(GitLens、Git History、Git Graph等):这些插件提供了 Git 相关的功能,如 Git 历史记录、分支管理、提交和推送代码等。

3.  文件同步插件(Live Share、Live Share Audio等):这些插件允许多个开发者同时编辑同一份代码文件,方便协同开发。

4.  代码格式化插件(Prettier、ESLint等):这些插件可以自动格式化代码、检查代码中的错误和警告等。

5.  智能提示插件(IntelliSense、Auto Import等):这些插件可以提供更加智能的代码提示和自动导入功能,提高开发效率。

除了以上插件之外,您还可以根据个人需求安装其他插件,例如 Markdown 编辑器、REST 客户端、数据库管理工具等。

总之,通过安装这些插件,您可以在 VS Code 中高效地编写微信小程序代码,并将其同步到 Git 中进行版本管理。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/220368.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

构建平战结合的融合通信指挥调度系统平台

华脉智联PTTLINK融合通信指挥调度系统将语音、视频、GIS进行高度融合&#xff0c;构建“平战结合”的指挥调度模式&#xff0c;既满足平时的日常办公、会议会商、应急培训、应急演练等需求&#xff0c;也能够应对战时的应急指挥、应急救援、应急决策等需求&#xff0c;达到统一…

前端性能监控和错误监控

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

积极办理等保测评,保证企业网络安全!

随着网络的越发普及以及发达&#xff0c;网络安全问题日益突出&#xff0c;保障网络安全越发重要。为了保障网络系统的安全稳定运行&#xff0c;办理等保测评成为了企业和组织必须面对的重要任务。简单来说就是&#xff0c;积极办理等保测评&#xff0c;保证企业网络安全&#…

1005. K 次取反后最大化的数组和 增强for循环(foreach循环)遍历数组

1005. K 次取反后最大化的数组和 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;_1005K次取反后最大化的数组和_1005K次取反后最大化的数组和_简洁写法 错误经验吸取增强for循环&#xff08;foreach循环&#xff09;遍历数组 原题链接&am…

Kafka--从Zookeeper数据理解Kafka集群工作机制

从Zookeeper数据理解Kafka集群工作机制 这一部分主要是理解Kafka的服务端重要原理。但是Kafka为了保证高吞吐&#xff0c;高性能&#xff0c;高可扩展的三高架构&#xff0c;很多具体设计都是相当复杂的。如果直接跳进去学习研究&#xff0c;很快就会晕头转向。所以&#xff0c…

亚信科技AntDB数据库——深入了解AntDB-M元数据锁的实现(二)

5.5 防止低优先级锁饥饿 AntDB-M按照优先级将锁又分了两类&#xff0c;用于解决低优先级锁饥饿问题。 ●独占型(hog): X, SNRW, SNW; 具有较强的不兼容性&#xff0c;优先级高&#xff0c;容易霸占锁&#xff0c;造成其他低优先级锁一直处于等待状态。 ●暗弱型(piglet): SW; …

【leetcode876】链表的中间结点Java代码讲解

12.19 链表的中间结点 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间结点&a…

P2P网络下分布式文件共享场景的测试

P2P网络介绍 P2P是Peer-to-Peer的缩写&#xff0c;“Peer”在英语里有“对等者、伙伴、对端”的意义。因此&#xff0c;从字面意思来看&#xff0c;P2P可以理解为对等网络。国内一些媒体将P2P翻译成“点对点”或者“端对端”&#xff0c;学术界则统一称为对等网络(Peer-to-Pee…

Redis7--基础篇9(SpringBoot集成Redis)

1. jedis、lettuce、Redistemplate的关系 第一代为jedis&#xff0c;之后推出了lettuce&#xff0c;然后springboot继承了Redistemplate&#xff0c;现推荐使用Redistemplate。 总的来说&#xff0c;jedis、lettuce、Redistemplate都是java操作Redis数据库的驱动。 2. 本地Ja…

骨传导耳机和开放式耳机有什么区别?一文读懂骨传导耳机和开放式的关系!

先说结论&#xff0c;骨传导耳机和气传导耳机两者都属于是开放式耳机&#xff0c;开放式耳机指的是开放双耳佩戴的耳机&#xff01; 开放式耳机分为两种&#xff0c;分别是骨传导耳机和气传导耳机&#xff0c;虽然两者都属于开放式耳机&#xff0c;但它们的佩戴方式和传声原理…

【Unity】运行时创建曲线(贝塞尔的运用)

[Unity]运行时创建线&#xff08;贝塞尔的运用&#xff09; 1. 实现的目标 在运行状态下创建一条可以使用贝塞尔方法实时编辑的网格曲线。 2. 原理介绍 2.1 曲线的创建 unity建立网格曲线可以参考Unity程序化网格体的实现方法。主要分为顶点&#xff0c;三角面&#xff0c…

数据分析为何要学统计学(10)——如何进行比率检验

比率检验是通过样本推测某种事件的总体占比水平。要求事件仅有互斥的两种情况&#xff0c;即&#xff0c;概率分别为p与1-p。 比率检验分单样本和双样本两种情况&#xff0c;以下我们分别介绍。 1. 单样本比率检验 形如这样的问题&#xff1a;“小学生近视比例日益提高&#…

Starting the Docker Engine...一直转圈

出现的问题&#xff1a; 原因排查&#xff1a; 看了网上的很多篇文章&#xff0c;每个原因都排查了&#xff0c;没有发现问题。 遇到这样的情况应先看自己是否安装成功 打开运行&#xff0c;在空框中输入powershell并点击确定&#xff1a; docker version 显示版本证明安装…

2023年国赛高教杯数学建模D题圈养湖羊的空间利用率解题全过程文档及程序

2023年国赛高教杯数学建模 D题 圈养湖羊的空间利用率 原题再现 规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养&#xff0c;适应不同种类、不同阶段的牲畜对空间的不同要求&#xff0c;以保障牲畜安全和健康&#xff1b;与此同时&#xff0c;也要尽量减少空间闲置所…

微服务技术 RabbitMQ SpringAMQP P61-P76

B站学习视频https://www.bilibili.com/video/BV1LQ4y127n4?p61&vd_source8665d6da33d4e2277ca40f03210fe53a 文档资料: 链接&#xff1a;https://pan.baidu.com/s/1P_Ag1BYiPaF52EI19A0YRw?pwdd03r 提取码&#xff1a;d03r 一 初始MQ 1. 同步通讯 2. 异步通讯 3. MQ常…

Jenkins 添加节点报错

报错日志 Error: A JNI error has occurred, please check your installation and try again Exception in thread "main" java.lang.UnsupportedClassVersionError: hudson/remoting/Launcher has been compiled by a more recent version of the Java Runtime (cl…

如何搭建企业管理系统Odoo并远程访问管理界面【内网穿透】

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…

短视频账号矩阵系统3年技术独立源头正规开发搭建

短视频账号矩阵3年技术独立开发打造是一个非常有挑战性和前景的项目。以下是一些建议&#xff0c;帮助你成功打造一个成功的短视频账号矩阵&#xff1a; 1. 确定目标受众&#xff1a;首先需要明确你的目标受众是谁&#xff0c;了解他们的兴趣爱好、年龄、性别等&#xff0c;以便…

ModuleNotFoundError: No module named ‘openai.error‘

ModuleNotFoundError: No module named ‘openai.error’ result self.fn(*self.args, **self.kwargs) File “H:\chatGPTWeb\chatgpt-on-wechat\channel\chat_channel.py”, line 168, in _handle reply self._generate_reply(context) File “H:\chatGPTWeb\chatgpt-on-wec…

【Unity动画】综合案例完结-控制角色动作播放+声音配套

这个案例实现的动作并不复杂&#xff0c;主要包含一个 跳跃动作、攻击动作、还有一个包含三个动画状态的动画混合树。然后设置三个参数来控制切换。 状态机结构如下&#xff1a; 完整代码 using System.Collections; using System.Collections.Generic; using UnityEngine;pu…