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:443
    at 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 中进行版本管理。
 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

云渲染插件怎么设置?云渲染插件设置教程

云渲染技术以其高效、便捷的特性正改变着3D设计和视频制作行业。为了进一步简化渲染过程&#xff0c;云渲染插件应运而生。云渲染插件可以让用户在熟悉的3D软件环境中直接完成渲染任务&#xff0c;大幅提高工作的连贯性与效率。那么如何在3D软件中安装和设定这些神奇的云渲染插…

【为数据之道学习笔记】5-7五类数据主题联接的应用场景

在数字化转型的背景下&#xff0c;华为的数据消费已经不再局限于传统的报表分析&#xff0c;还要支持用户的自助分析、实时分析&#xff0c;通过数据的关联&#xff0c;支持业务的关联影响分析以及对目标对象做特征识别&#xff0c;进行特定业务范围圈定、差异化管理与决策等。…

传奇的GEE、翎风、V8引擎之间的区别,哪个引擎更好用?

我们在选择传奇版本时可以看到有很多GEE引擎的版本&#xff0c;同时也有少数的翎风和V8引擎版本&#xff0c;当我们选择的版本是翎风或是v8引擎&#xff0c;之前没有架设过怎么办呢&#xff1f;不要着急&#xff0c;往下看&#xff01; 这还得从GEE引擎说起&#xff0c;GEE引擎…

「数据结构」二叉树1

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;C启航 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;树&#x1f349;二叉树&#x1f34c;特殊二叉树&#x1f34c;二叉树的性质&#x1f34c;存储结构 &#x1f349;…

【具身智能评估9】Open X-Embodiment: Robotic Learning Datasets and RT-X Models

论文标题&#xff1a;Open X-Embodiment: Robotic Learning Datasets and RT-X Models 论文作者&#xff1a;– 论文原文&#xff1a;https://arxiv.org/abs/2310.08864 论文出处&#xff1a;– 论文被引&#xff1a;–&#xff08;12/18/2023&#xff09; 论文代码&#xff1a…

Antd Select 添加中框

默认antd 的 Select中间并没有竖框&#xff0c;但是ui design设计了&#xff0c;所以记录一下如何添加 默认&#xff1a; CSS&#xff1a; .custom-select-suffix-icon {display: flex;align-items: center; }.custom-select-suffix-icon::before {content: ;height: 31px; …

使用cdn加速导致Vue.js devtools 工具不能使用

打包分析 npm run preview -- --report发现 element-ui mock.js&#xff08;模拟数据&#xff09; cos-js-sdk-v5.js&#xff08;腾讯云上传&#xff09;过大使用cdn加速 2. cdn 加速 webpack排除打包 vue.config.js configureWebpack: {name: name,resolve: {alias: {: reso…

Mybatis-Plus之内置接口(一起了解Mybatis-Plus的内置接口)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringBoot开发之Mybatis-Plus系列》。&#x1…

Python使用HTTP库发送GET请求的示例——轻松探索网络世界

大家好&#xff0c;今天我要给大家介绍一个非常实用的Python库——HTTP库&#xff0c;它可以帮助我们轻松地发送HTTP请求。今天&#xff0c;我们就来学习一下如何使用HTTP库发送GET请求。 首先&#xff0c;我们需要安装HTTP库。如果你还没有安装&#xff0c;可以通过pip命令进…

补题与总结:AtCoder Beginner Contest 333 D、E

文章目录 写在最前面的复盘D - Erase LeavesE - Takahashi Quest 写在最前面的复盘 前三题属于是凑数题&#xff0c;下次争取快点a掉&#xff0c;这次wa了一次 C题写了个三指针&#xff0c;从小到大枚举出满足题意的数&#xff0c;其实可以直接暴力枚举满足题意的数&#xff0c…

Vue框架入门(项目搭建)

VUE文档 https://cn.vuejs.org/guide/introduction.html SFC名词介绍 SFC即 *.vue 文件&#xff0c;英文 Single-File Component&#xff0c;简称 SFC 每一个 *.vue 文件都由三种顶层语言块构成&#xff1a;<template>、<script> 和 <style> template​ 每个…

【git学习笔记 01】打标签学习

文章目录 一、声明二、对标签的基本认知什么是标签&#xff1f;为什么要打标签&#xff1f;如何生成类似github中readme的图标 三、标签相关命令四、示例操作 一、声明 本帖持续更新中如有纰漏&#xff0c;望批评指正&#xff01;参考视频链接&#xff0c;非常感谢原作者&…

houdini 神经网络

实现个神经网络的3D可视化&#xff0c;美爆了&#xff01;-腾讯云开发者社区-腾讯云 https://vimeo.com/stefsietz GitHub - julrog/nn_vis: A project for processing neural networks and rendering to gain insights on the architecture and parameters of a model throu…

天锐绿盾透明加密防泄密系统的功能有哪些

PC端访问地址&#xff1a;www.drhchina.com 天锐绿盾透明加密防泄密系统的功能主要包括以下几点&#xff1a; 透明加解密&#xff1a;该系统采用文件过滤驱动实现透明加解密&#xff0c;这意味着用户在使用过程中完全感觉不到加密和解密的过程&#xff0c;不会影响用户的操作习…

xcode无线真机调试详细图文步骤

步骤一、 步骤二&#xff1a; 步骤三&#xff1a; 配置完到这里&#xff0c;点击真机右键&#xff0c;菜单栏并未出现connect via ip address 选项&#xff0c;也没出现无线连接的小地球图标&#xff0c;别慌&#xff0c;接着进行下一步操作即可。 步骤四&#xff1a; 1.打开…

单片机计数功能

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、计数器是什么&#xff1f;1.1 应用 二、计数器原理框图及对输入信号的要求2.1 原理框图2.2对输入信号的要求 三、使用步骤3.1 配置为计数模式3.2 装初值3.3…

进制转换(二进制、八进制、十进制、十六进制)

目录 进制转换进制有哪些&#xff1f;二进制八进制&#xff1a;十进制&#xff1a;十六进制&#xff1a; 进制转换 随便记录下&#xff0c;仅供参考。 进制有哪些&#xff1f; 进制一般就只包括&#xff1a;二进制、八进制、十进制 和 十六进制 二进制&#xff1a;逢 二 进…

力扣题:数字与字符串间转换-12.19

力扣题-12.19 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;443. 压缩字符串 解题思想&#xff1a;通过双指针进行遍历即可 class Solution(object):def compress(self, chars):""":type chars: List[str]:rtype: int"&quo…

Springboot+Mybatis入门案例

一、项目结构 1.导入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apach…

Meta与Ray-Ban合作推出了一款全新智能眼镜外观时尚,而且搭载了能够“看到“你所看到的一切的人工智能技术

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…