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.mzph.cn/news/232408.shtml

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

相关文章

KBU1010-ASEMI功率整流器件KBU1010

编辑&#xff1a;ll KBU1010-ASEMI功率整流器件KBU1010 型号&#xff1a;KBU1010 品牌&#xff1a;ASEMI 封装&#xff1a;KBU-4 特性&#xff1a;插件、整流桥 最大平均正向电流&#xff1a;10A 最大重复峰值反向电压&#xff1a;1000V 恢复时间&#xff1a;&#xff…

紫光展锐T820与飞桨完成I级兼容性测试 助推端侧AI融合创新

近日&#xff0c;紫光展锐高性能5G SoC T820与百度飞桨完成I级兼容性测试&#xff08;基于Paddle Lite工具&#xff09;。测试结果显示&#xff0c;双方兼容性表现良好&#xff0c;整体运行稳定。这是紫光展锐加入百度“硬件生态共创计划”后的阶段性成果。 本次I级兼容性测试完…

Vue 条件渲染 v-if

v-if 指令&#xff1a;用于控制元素的显示或隐藏。 执行条件&#xff1a;当条件为 false 时&#xff0c;会将元素从 DOM 中删除。 应用场景&#xff1a;适用于显示隐藏切换频率较低的场景。 语法格式&#xff1a; <div v-if"数据">内容</div> 基础用…

ros2 学习03-开发工具vscode 插件配置

VSCode插件配置 为了便于后续ROS2的开发与调试&#xff0c;我们还可以安装一系列插件&#xff0c;无限扩展VSCode的功能。 中文语言包 Python插件 C插件 CMake插件 vscode-icons ROS插件 Msg Language Support Visual Studio IntelliCode URDF Markdown All in One VSCode支持的…

技术探秘:在RISC Zero中验证FHE——由隐藏到证明:FHE验证的ZK路径(1)

1. 引言 开源代码实现见&#xff1a; https://github.com/hashcloak/fhe_risc0_zkvm&#xff08;Rust&#xff09;https://github.com/weikengchen/vfhe-profiled&#xff08;Rust&#xff09;https://github.com/l2iterative/vfhe0&#xff08;Rust&#xff09; L2IV Resea…

基于AT89C52单片机的计算器设计与仿真

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/88637995?spm1001.2014.3001.5503 源码获取 B 源码仿真图课程设计51 摘 要 计算器一般是指“电子计算器”,能进行数学运算的手持机器&#xff0c;拥有集成电路芯…

整合SpringSecurity

目录 前言 数据库设计 用户表 角色表 用户角色表 权限表 角色权限表 插入数据 表的实体类 用户表实体类 角色表实体类 权限表实体类 mapper层接口 UserMapper RoleMapper AuthorityMapper 封装登录信息 统一响应结果 上下文相关类 jwt令牌工具类 依赖导入…

2023.12.17 关于 Redis 的特性和应用场景

目录 引言 Redis 特性 内存中存储数据 可编程性 可扩展性 持久化 支持集群 高可用性 Redis 优势 Redis 用作数据库 Redis 相较于 MySQL 优势 Redis 相较于 MySQL 劣势 Redis 用作缓存 典型场景 Redis 存储 session 信息 Redis 用作消息队列 初心 消息队列的…

智能优化算法应用:基于适应度相关算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于适应度相关算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于适应度相关算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.适应度相关算法4.实验参数设定5.算法…

构建高效统一的音视频联动融合通信调度平台

在信息技术日益高度发展的今天&#xff0c;越来越多的企业或者组织机构重视如何提高内外部的工作效率&#xff0c;但由于传统的通信方式如电话、邮件、短信、传真等方式无法满足企业高效、快速的沟通要求&#xff0c;因此需要一个可以将各种通信方式结合在一起的通信系统来满足…

驭见大模型 智领新征程丨泰迪智能科技荣登2023年度广东省人工智能应用项目风云榜

12月15日&#xff0c;由广东省科学技术厅、广东省工业和信息化厅、广东省人力资源和社会保障厅、广东省政务服务数据管理局、广东省科学技术协会指导&#xff0c;广东省人工智能产业协会主办的2023年粤港澳大湾区人工智能产业大会正式举办&#xff0c;大会以“驭见大模型、智领…

PTFE四氟托盘应用于化工、医药、食品行业

PTFE托盘是一种广泛应用于化工、医药、食品等行业的特种托盘&#xff0c;采用聚四氟乙烯&#xff08;PTFE&#xff09;材料制造而成。PTFE是一种具有出色耐腐蚀性、高温稳定性和优异物理特性的材料。 PTFE托盘在化工领域中被广泛应用&#xff0c;主要用于处理腐蚀性的化学物质。…

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

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

工作纪实38-排查cpu彪高

昨天晚上上线了一个服务&#xff0c;第二天发现CPU持续飙高到70&#xff5e;90%&#xff0c;触发平台的自动扩容&#xff0c;后定位出问题后降低到3% 怀疑部分代码使用的线程在持续工作没有释放&#xff08;死循环&#xff09;进入机器&#xff0c;使用top -H 找出系统中使用C…

接口自动化测试难点:数据库验证解决方案

接口自动化中的数据库验证&#xff1a;确保数据的一致性和准确性 接口自动化测试是现代软件开发中不可或缺的一环&#xff0c;而数据库验证则是确保接口返回数据与数据库中的数据一致性的重要步骤。本文将介绍接口自动化中的数据库验证的原理、步骤以及示例代码&#xff0c;帮…

机器学习 | 贝叶斯方法

不同于KNN最近邻算法的空间思维&#xff0c;线性算法的线性思维&#xff0c;决策树算法的树状思维&#xff0c;神经网络的网状思维&#xff0c;SVM的升维思维。 贝叶斯方法强调的是 先后的因果思维。 监督式模型分为判别式模型和生成式模型。 判别模型和生成模型的区别&#xf…

【LeetCode刷题-树】--257.二叉树的所有路径

257.二叉树的所有路径 方法&#xff1a;深度优先搜索 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, T…

win环境下启动kafka Port already in use: 6688; nested exception is

背景 zk启动成功后&#xff0c;接下来启动kafka&#xff0c;再启动kafka后一直说端口被占用。 端口占用解决办法: netstat -aon|findstr 9092 taskkill -f -pid 7780 杀掉后&#xff0c;再次启动kafka时&#xff0c;问题并未解决 后来修改了批处理文件kafka-run-class.bat中…

深度剖析知识图谱:方法、工具与实战案例

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 知识图谱作为一种强大的知识表示和关联技术&am…

SAP 特殊采购类80简介

前面我们已经测试特殊采购类40、70,我们今天测试一下特殊采购类80。 特殊采购类80:在替代工厂生产,在成品层维护特殊采购类,需求和收货在计划工厂完成,成品生产和组件采购在生产工厂完成。 80采购类也是我们在SAP系统中实现跨工厂需求传递的一种方式。它具有传递方式简单、…