安利向:用Visual Studio Code编写微信小程序

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

正式发布一年多的微信小程序现在依然很火,相信很多人对小程序依然保有兴趣,那在开发时我们选择的工具自然而然是微信自家推的IDE:

这个IDE是微信自家推的嘛,肯定各种方便,但是我却不太喜欢这种工具的风格,而且像语法高亮,编程习惯我都不太适应。

像我们这群追求风格的,要优雅的开发小程序的一群程序员,有没有什么好玩的工具代替呢?

这就是我想向各位童鞋安利的工具:Visual Studio Code

如果完全不知道这个工具的童鞋可以自行知乎或者Bing,我就不多说啦,简而言之就是可以跨平台的代码编辑+调试+无限插件进行拓展的开发工具,自己亲身体验一下就知道啦。

那我们怎么由它来开发微信小程序呢?

微信小程序由四种文件类型构成:js(javascript)文件、json文件、WXML文件、WXSS文件

聪明的童鞋们一定一眼看出WXML映射了HTML、WXSS映射了CSS


那我们安装两个插件,分别编辑WXML和WXSS就好了,前人栽树,后人乘凉,特别感谢这两位大神为开源社区做出的贡献!


我们用着两个插件就可以完美的编辑代码文件了!

至于实时预览,暂时没有找到替代方案,就先用着微信自家的工具做替代,编码用VS Code

AI代码编辑器Cursor 比 Visual Studio Code 更出色吗? 长期以来,Visual Studio Code(简称 VS Code)一直是深受 Web 开发者喜爱的代码编辑器之一。它以通用性强、可高度定制以及拥有丰富的扩展库而闻名,在开发者社区中已成为一款强大的工具。它提供从强大的语言支持到 Git 集成以及开发调试工具等全方位功能。现在出现了一款新的代码编辑器 Cursor,它是基于 VS Code 衍生而来的,作为一个潜在的竞争对手崭露头角。Cursor 引入了创新功能,特别是在人工智能集成和简化用户体验方面。 阅读详情

相关推荐

NRF24L01学习操作教程(二)——NRF实现一对一,一对多通讯

以上内容详细介绍了,使用NRF24L01实现1对1单向通讯、1对1双向通讯、1对多双向通讯。

Joseph Wen的博客 7388

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

2. Git 插件(GitLens、Git History、Git Graph等):这些插件提供了 Git 相关的功能,如 Git 历史记录、分支管理、提交和推送代码等。1. 静态类型检查:TS 支持静态类型检查,它可以在编译时检查类型错误,从而减少运行时错误和调试时间。4. 代码格式化插件(Prettier、ESLint等):这些插件可以自动格式化代码、检查代码中的错误和警告等。总之,TS 相对于 JS 增加了类型检查、类和接口等特性,提高了代码质量和可维护性,但是需要一定的学习成本。

laowang357的博客 5万+

Skyworks SKY85331-11的Wi-Fi 6 (802.11ax)标准 2.4G 高功率WLAN前端模块解决方案

SKY85331-11是高度集成的2 GHz前端模块(FEM)包含2 GHz单刀双掷(SPDT)发送/接收(T / R)开关,2 GHz低噪声放大器(LNA)带旁路和一个2 GHz功率放大器(PA),用于大功率802.11ax应用程序和系统LNA和PA禁用功能可确保低漏电流 关闭模式。 包括一个集成的功率检测器以提供系统内的闭环功率控制。该设备提供Small (24-pin, 3 x 5 mm) (LGA)封装。 图1.引脚配置和封装如图所示 图2.信号引脚分配和功能引脚描述 图...

zhangbao19890622的博客 4504

使用vscode开发原生微信小程序

由于微信小程序开发工具的弊端,我们可以使用vscode来开发微信小程序,只需要做好一下的配置即可.

Hubery96的博客 5941

Codesys电子凸轮Cam表实战:从可视化配置到程序化构建

本文详细介绍了Codesys电子凸轮Cam表的实战应用,从可视化配置到程序化构建的全过程。通过包装机和印刷机案例,解析Cam表的基础设置、调试技巧及动态构建方法,帮助工程师快速掌握电子凸轮技术,提升运动控制精度和效率。

weixin_29309785的博客 298

OpenClaw实战系列04:Jira/Confluence深度集成实战指南

汇总 Confluence 空间 TEAM 下所有关于“性能优化”的文档,输出要点自然语言创建和查询 Jira 任务,无需离开聊天工具基于 Confluence 的私有知识库问答,让 AI 真正理解团队文档Jira 与 Confluence 联动,打通项目管理与知识管理定时同步与通知,自动化团队信息流转至此,你的 OpenClaw AI 助理已经不仅是一个聊天机器人,而是真正融入团队工作流的“智能项目管理助手”。下一期我们将带来OpenClaw 自定义技能开发实战。

PeterPan的博客 572

uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新

uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新;解决Vs Code 出现`类型“{ class: string; }”的参数不能赋给类型`错误

wocwin的博客 8944

实战5:农作物产量预测 蔬菜产量预测 lstm 完整代码数据-可直接运行-计算机毕设

实战5:农作物产量预测 蔬菜产量预测 lstm 完整代码数据-可直接运行-计算机毕设

机器学习深度学习业余选手 1257

微信小程序之VS Code开发笔记

本文介绍了如何在Linux环境下使用miniprogram-ci工具进行微信小程序的命令行开发

hele_two的专栏 2162

【华为OD机考真题】- 构成的正方形数量(B卷-100分)(Java版)

🔔本文收录于「最新最全华为OD机试真题(Java版)」专栏,手把手带你零基础教学华为OD机试。本题集提供最优题解思路,解题步骤,代码解析,复杂度分析及最优题解源码等,支持多语言题解,助你轻松拿捏OD机考,一举上岸!安利大家关注&&收藏&&订阅!题库正在疯狂收录中,up!up!up!! 🚫提醒:拒绝一切代考/替考,违法必究!专栏所写题库均精心搜集于互联网,经过精心筛选和整理,结合数位十多年大厂实战经验资深大佬经验所撰,欢迎订阅。    💗订阅福利:一次订阅,可永久免费阅读,提供在线答疑解惑,后续题库更新

**My Coding Family** 1349

Dify智能体开发:Dify文件上传

相较于聊天文本,文档文件能够承载大量的信息,例如学术报告、法律合同。受限于 LLM 自身仅能够支持文件或图片,难以获取文件内更加丰富的上下文信息,应用的使用者不得不手动复制粘贴大量信息与 LLM 对话,增加了许多不必要的使用成本。

王国平的博客 2590

Visual Studio Code必备插件

Visual Studio Code必备常用插件 HTML Snippets: 超级实用且初级的 H5代码片段以及提示 . HTMLHint: html代码检测 . HTML CSS Support : 让 html 标签上写class 智能提示当前项目所支持的样式。新版已经支持scss文件检索,这个也是必备插件之一 . Auto Close Tag : 匹配标签,关闭对...

猫老板的豆 2万+

波浪补偿控制(AHC)之波浪发生器(CODESYS完整源代码)

波浪发生器平台详细算法和结构介绍请参看下面博客文章:CODESYS平台如何建立FC和FB,请参看下面博客文章:

RXXW_Dor的博客 401

Visual Studio Code 前端web攻城狮-常备插件

Visual Studio Code web攻城狮-常备插件 **开发方便了许多ε≡٩(๑>₃<)۶ 一心向学** 点击左侧栏这个拓展按钮(Ctrl+Shift+X)然后搜索下面的 Chinese (Simplified) Language Pack for Visual Studio Code简体中文包 Prettier - Code formatter最强格式化,不接受反驳(在应用商店中卸载JS-CSS-HTMLFormatter以免出现保存时自动格式化了) HTML

佚名程序员 942

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Visual Studio Code 可安装插件(整)

1、Chinese Language 简体中文汉化插件。这个插件重载之后还没有汉化成功的话,把编辑器关闭重新打开就行了。 2、vscode-icons 让 vscode 资源树目录加上图标,有利于我们进行文件格式的判断。 3、HTML Snippets 很实用的 HTML 代码提示插件。 4、HTML CSS Support HTML 标签上写class 智能提示当前项目所支持的样式。 5...

phrenetic_的博客 703

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Visual Studio Code 开发环境

Visual Studio Code 开发环境 基础配置 插件 Chinese (Simplified) Language Pack for Visual Studio Code(中文语言包) Beautify——代码美化文件 Bracket Pair Colorizer——每一对括号用不同颜色区别 (括号强迫症必备) 微信小程序环境 插件 小程序开发助手 CSS Tree——用于生成样式名 使用方法: Ctrl+Shift+P 打开命令面板 输入css,找到CSS Tree插件,按回车 跳出

weixin_45627900的博客 462

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

30个极大提高开发效率的Visual Studio Code插件

译者按: 看完这篇文章,我打算从Sublime Text转到Visual Studio Code了! 原文: Immensely upgrade your development environment with these Visual Studio Code extensions 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习...

Fundebug博客 1万+

如何在Visual Studio Code和HBuilder编写微信小程序

1.首先在小程序开发工具中把项目搭建好。 2.使用Visual Studio Code。 3.安装vscode weapp api,这是小程序的语法结构api插件。 4.接着安装vscode wxml这个插件,主要是针对wxml文件的。 5.接着继续搜索安装vscode-wechat这个插件。 6.安装一下Easy WXLESS,是针对wxss文件。 6.安装好插件以后,我们直接在vscode里面编辑小程序项目,保存即可同步到小程序开发工具中。 ...

weixin_51127384的博客 3562

如何在Visual Studio Code编写微信小程序

首先在小程序开发工具中把项目搭建好。 使用Visual Studio Code。 安装vscode weapp api,这是小程序的语法结构api插件。 接着安装vscode wxml这个插件,主要是针对wxml文件的。 接着继续搜索安装vscode-wechat这个插件。 安装一下Easy WXLESS,是针对wxss文件。 安装好插件以后,我们直接在vscode里面编辑小程序项目,保存即可同步到小程序开发工具中。 ...

mt213217的博客 3426

visual studio安装ivf_【包学包会】【Fortran篇】VsCode+IVF+SimpleFortran

ShareStuff光阴似箭日月如梭终于等到你还好没放弃引言欢迎到知乎和语雀平台进行提问,或者推文下方留言!除了 VsCode+IVF+SimpleFortran,当然还有 Vim+Emacs+Editplus 等等。其中我更喜欢 Vim 和 Emacs。但为什么教程里没有? 因为不敢写,怕被这两家神器粉丝怼。感兴趣的自行研究哦,比如这里Fortran Coder[1],两大神器用了就停不下来!本...

weixin_39619893的博客 3497

Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文

小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。 写在前面     在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。    都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比...

qq_40126542的博客 4680

在 Visual Studio Code 与微信开发者工具中调试使用 emscripten 基于 C 生成的 WASM 代码

最近在尝试将一些 C/C++、Lua 项目挪到 Web 上跑, 接触到了 emscripten. 这里会介绍下在 Visual Studio Code 与微信开发者工具中调试使用 emscripten 基于 C 生成的 WASM 代码 (WebAssembly) 的一些方法.

ShanSan 1730

使用vscode开发微信小程序

提高微信小程序的开发效率 前言: 近期开始学习微信小程序,用了自带的开发者工具,泪目~ 一天的使用下来感受如下: 一个编译器由模拟器 +调试器+调试器 三者组成, 代码便写区域太小强迫症患者难以忍受!!! 代码提示少的可怜,一切代码靠手打… 代码没有相对应的高亮,阅读难度大 微信开发者工具出现莫名的卡顿,经常重启让人十分懊恼 等等等~~~~~~ 原始的界面工具 所以在这像各位安利一款编辑...

有道无术,术尚可求 3万+

使用visual studio code 编写小程序代码

1.在vscode中安装插件: minapp 和小程序开发助手 2.在小程序中新建一个小程序文件夹 ,打开vscode 打开小程序文件夹 3.因为改变代码时在微信开发者工具中页面实时刷新,所以为了在vs中改变代码也可以实时看到 把小程序中的模拟器单独拿出来 3.1:点击分离窗口 3.2 单独拿出来后 也可以置顶 4.新增页面文件夹 可以在vs中新建文件夹,因为每一个文件夹对应四个文件(js,json,wxml,wxss) 所以还是在微信开发者工具中在这个文件夹中点击右键新建pag...

jiao0916的博客 4979

Visual Studio Code好用的插件

TODO Tree,TODO Highlight:TODO,FIXME等高亮显示,并且可以通过tree直接定位。·css peek:将html和css联系起来,在html中按住ctrl会提示对应的样式。·html css support:在html中自动提示css中的class。·Live Server: 更新文件保存的同时,浏览器自动同步。·code runner:右键单击即可运行代码,例如php。·html boilerplate:生成html模板。·Easy LESS:把less转换为css保存。

miemiem_的博客 641

使用 Polyglot Notebooks 在 Visual Studio Code 中快速上手 Senparc.Weixin SDK

本文基于 WeiXinMPSDK 仓库中的 [notebook 示例](https://link.gitcode.com/i/20c0ffaea6e8ed0313e485661d93b69d) 展开,讲解如何在 **Visual Studio Code + Polyglot Notebooks** 环境中,以交互式笔记本(Notebook)的方式快速体验 Senparc.Weixin SDK 的完

gitblog_01155的博客 423
上一篇: Windows Store Aplication - WorkDo隐私策略
下一篇: 学习笔记-微信小程序的布局基础
joen.chen
博客等级 码龄10年 76粉丝 21原创
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值