微信开发者工具扩展自定义插件

最新推荐文章于 2023-12-14 08:24:52 发布
最新推荐文章于 2023-12-14 08:24:52 发布
阅读量6.9k 收藏 12
点赞数 3
分类专栏： 经验分享 文章标签： 小程序 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w710537643/article/details/113395293
版权

需求：在微信开发者工具内扩展一个 编译less语法的插件
实现基础：微信开发者工具应该用的是vscode的开源内核。
查看微信官网：
在这里插入图片描述
想要安装一个vscode的插件：
在这里插入图片描述

1.找到插件

首先按照微信官网给的地址(用户目录\.vscode\extensions)
在我的电脑目录 C:\Users\wxk\.vscode\extensions 下找到插件 ：
在这里插入图片描述

2.把插件装到微信开发者工具

在 编辑-> 打开编辑扩展工具 ，把插件复制到文件夹下。
在这里插入图片描述

在这里插入图片描述

3.对插件ID进行 添加

插件的ID在插件文件夹下package.json内
在这里插入图片描述

在这里插入图片描述

在微信开发者工具编辑->管理编辑器扩展 添加到里面即可
在这里插入图片描述

4.插件设置(我这个插件需要配置文件，其他插进根据需要自行配置)

在这里插入图片描述

这是插件在vscode 的配置，和配置文件地址。
所以推测微信的也大致一样。C:\Users\wxk\AppData\Local\微信开发者工具\User Data\f13f1c30f325514de496c9db6e27b110\Default\Editor\User 在这里找到了一个setting.json

在这里插入图片描述
将插件配置加入进去保存
在这里插入图片描述

5.开启插件

微信 工具->插件 开启插件

在这里插入图片描述

在这里插入图片描述

最后检查下

在这里插入图片描述

less文件已经编译为wxss了。

备注：

如果还不能使用，可以尝试下重启微信开发者工具

在这里插入图片描述

我这里没有使用ID (626735cf-2e54-4642-8bfc-02227eed9c52) 使用的 插件名字
“mrcrowl.easy-less” 也可以

小和尚敲木头
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序-编辑器插件
前端向朔
01-11 1万+
微信的提供IDE实在是不怎么好用（我说的是敲代码这块，当一个编译器浏览器倒是挺好的），具体怎么不好用就不吐槽了，各位看官有用过就知道，那我们该怎么来拯救自己呢，这里我给大家整理了一下。以Sublime Text3为例，其他编辑器插件在文末给出。两个步骤，一是修改文件类型，二是安装插件。步骤一右下角可设置 制表符缩进宽度，修改文件类型（这个很关键，一般后缀sublime会自动分析文件类型，但对于微信小
微信小程序Demo-插件 for TypeScript wxml config json-附完整源代码.rar
最新发布
03-20
微信小程序Demo-插件 for TypeScript 是一个集成了 TypeScript、WXML、WXSS 和 JSON 配置的完整微信小程序项目。该项目旨在帮助开发者快速上手和构建具有模块化、可扩展性的微信小程序。它包含了一个简单但功能完善的插件系统，允许开发者轻松地添加新功能和自定义组件。 本项目采用 TypeScript 作为主要编程语言，提供了强类型检查和更好的代码提示，有助于提高开发效率和代码质量。同时，它还支持 WXML 和 WXSS，使得开发者可以使用类似于 HTML 和 CSS 的语法来编写界面和样式。此外，项目中的 JSON 配置文件使得开发者可以轻松地配置小程序的各种属性和页面信息。 该项目的另一个重要特点是其插件系统。通过插件，开发者可以轻松地扩展小程序的功能，而无需修改主程序代码。插件系统支持热插拔，使得开发者可以在不重启小程序的情况下实时查看和调试插件效果。此外，插件系统还提供了一套完整的生命周期管理方法，包括插件的注册、初始化、销毁等，确保插件的稳定性和可维护性。 为了方便二次开发和定制，该项目提供了丰富的文档和示例代码。开发者可以根据自己的需求，参考文档和示例代码，快速构建出符合自己需求的小程序应用。同时，该项目还采用了模块化的设计思想，将各个功能模块分离出来，使得开发者可以更方便地进行代码重用和扩展。 总之，微信小程序Demo-插件 for TypeScript 是一个功能完善、易于扩展的微信小程序项目。它结合了 TypeScript、WXML、WXSS 和 JSON 配置的优点，为开发者提供了一个高效、灵活的开发环境。通过该项目，开发者可以快速构建出具有模块化、可扩展性的微信小程序应用，满足各种应用场景的需求。
SpringBoot智能停车微信小程序源码带数据库+文档
09-05
一、小程序主要功能包括： （1）微信用户一键注册登录 （2）微信扫码停车 （3）停车计时计费（带有使用者头像及昵称） （4）微信支付演示（暂无：这需要企业身份申请开通） （5）车位预约 （6）停车记录查询：停车开始时间，停车时长，费用，地理位置等信息（后台数据实时刷新） （7）新添加小程序分享功能 （8）申请开闸(无法识别车牌或者无车牌时)，自助开门，无需扫码 （9）优惠券活动，停车缴费时智能减免 （10）灵活的停车套餐，(时卡，日卡，周卡，月卡，季度卡，年卡。。。，随便你怎么自定义) 二、配置所需工具: （1）微信小程序开发者账号 （2）微信web开发者工具 （3）HBuilder编辑器 （4）服务端是java写的，编辑工具idea 三、【功能介绍】： ①本停车场系统兼容市面上主流的多家相机，理论上兼容所有硬件，可灵活扩展，②相机识别后数据自动上传到云端并记录，校验相机唯一id和硬件序列号，防止非法数据录入，③用户手机查询停车记录详情可自主缴费(支持微信，支付宝，银行接口支付，支持每个停车场指定不同的商户进行收款)，支付后出场在免费时间内会
Redmine通知「Redmine Notification」-crx插件
03-09
Redmine通知工具 ＃Redmine通知用于chrome扩展的Redmine通知工具。 ##功能*直接通过插件查看问题和讨论。 *实时更新并自动提示问题。 *支持多个Redmine，集中管理问题。 *支持自定义问题角色（开发人员和测试人员）。 *发行状态和发行编号。 *支持离线观看问题。 2009-2020 www.scutech.com邮件至：[email protected] 支持语言:English
chrome/Firefox插件微信读书笔记助手wereader：导出标注、书评、想法、目录等等
12-19
适用人群：用PC在微信读书网页版看书，使用markdown做笔记的用户 具体功能： 1. 一键导出标注、热门标注、书评、想法、目录； 2. 导出格式自定义； 3. 一键复制图片、注释、代码块； 4. 护眼色主题； 5. 书架分类、书架搜索； 6. 标注搜索、标注目录； 7. 借助正则匹配对标注进行处理； 8. 选中后自动标注、自动复制或自动查询； 9. 解除右键限制； 10. 一键删除标注； 11. 统计周、月阅读时间； 12. 浏览公众号； 13. 读书页图片、代码块放大。 操作方法： 1. 下载资源包，解压到文件夹 2. 进入Chrome，在地址栏输入chrome://extensions/后回车，进入扩展管理页面。 3. 进入页面后，先打开开发者模式，再点击加载已解压的扩展程序，找到前面解压得到的文件夹wereader，单击该文件夹，这时候文件夹被选中，点击选择文件夹即可。 4. 管理扩展程序，将其固定在工具栏 5. 打开微信读书，点击工具栏的微信读书笔记助手图标。即可导出笔记等。
微信小程序基础组件扩展
01-27
:warning_selector: 太久没空更新，不确定是否可用 xing-weapp-component xing-weapp-component是小程序基础组件的扩展，不定期更新 xing组件简介 组件名 目录 扩展组件 扩展内容 xing-scroll-view /xing-components/x-scroll-view 增加scroll-view自身的下拉刷新功能等 xing-image /xing-components/x-image 增加图片的占位图、破图等 xing-scroll-view下拉刷新效果： 使用方法 下载代码，若已经安装微信开发者工具（1.02.1803130及以上版本）可 复制文件夹 xing-components 到你自己的项目中 在需要使用相关组件的页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径： { "usingCompone
如何在微信开发工具装插件教程
热门推荐
exodus3的博客
04-03 2万+
官方链接 官方给的文档中，微信开发者工具编辑器兼容了部分 VS Code 扩展插件，可以使用VS Code软件里面的插件。 具体操作教程如下： 一.打开用户目录下，在/.vscode/extensions 下找到其已解包的扩展文件夹 二.点击 [编辑] - [打开编辑器扩展目录]，并将解包的插件文件夹放入此目录。 三.打开文件夹内的 package.json，在最后面，复制ID 四. 打...
【微信小程序】微信开发者工具安装less插件
糖葫芦哎的博客
04-07 2416
不知道大家有没有像我一样习惯在vscode里面用惯了less，当需要用微信开发者工具开发小程序时，如果没有这个会有些不习惯，下面就简单介绍一下：
【无标题】
qq_57676486的博客
09-17 147
原文链接：https://blog.csdn.net/qq_43588387/article/details/125663732。原文链接：https://blog.csdn.net/qq_18798149/article/details/128977729。版权声明：本文为CSDN博主「咸虾米_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。版权声明：本文为CSDN博主「、晓扬」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
微信小程序: 微信小程序-开发者工具添加less插件
酷伊奥
07-16 4458
在入门微信小程序的时候，在其他编译软件中有使用less插件的小伙伴都会发现，在微信小程序-开发者工具中是没有下载插件这个入口的，所以我们可以借助vscode来辅助微信小程序-开发者工具安装less插件。 一、首先我们需要在vscode中先安装easy-less这个插件，代码老手就不用多说了，懂得都懂。 1、打开vscode后点击左侧栏四个格子那个图标 2、在输入框中输入less后，找到Easy LESS这个插件，点击安装按钮 3、安装成功 二、接下来我们要在vscode文件夹目录下..
douchat微信开发框架-PHP
06-20
douchat（豆信）是一个专注于微信公众号开发的开源框架，具备“简洁、高效、优雅、易扩展”等特点。自主研发的插件扩展机制与视图构建工具能够帮助开发者快速实现微信端功能的开发。对微信接口进行了高度封装，能够轻松的处理微信端用户发送的文本、图片、语音、视频、位置、链接等类型消息，亦可对关注、取消关注、扫码、点击菜单、上报地理位置等事件进行灵活处理。 产品特色： 1、引入了Github上最为流行的Wechat-php-sdk类库，对微信接口实现高度封装。 2、自主研发的插件扩展机制，保证功能的高度可扩展性。 3、自主研发的视图构建工具，能够帮助开发者在控制器中通过简单的配置快速生成视图，灵活性强大到甚至不需要写任何一行HTML代码。 4、高度封装的微信交互API，可轻松处理微信端用户发送的文本、图片、语音、视频、位置、链接等类型消息，亦可对关注、取消关注、扫码、点击菜单、上报地理位置等事件进行灵活处理。 5、封装了微信支付、客服群发、模板消息、带参数二维码等微信高级功能的实现方法，开发者在插件开发的过程中可以简单的用一个函数实现上述功能。 6、整合jssdk，封装了图片上传、自定义分享、支付弹窗、LBS定位、ajax请求等js方法，在模板页面可以快速集成。 7、整合了weUI、FrozenUI、bootstrap等前端框架，在UI实现方面可快速集成。 8、详细的开发手册，旨在帮助开发爱好者快速上手豆信开发。 9、活跃的交流社区，让每一个开发爱好者都能分享自己的看法与见解。 10、集成BUG反馈系统，产品保持高频次更新与迭代。
使用-微信开发者工具-实现自定义组件（个人学习）
weixin_47295135的博客
11-21 2136
提示：小程序自定义组件 文章目录前言一、自定义组件1.什么是自定义组件2.自定义组件组成3.使用步骤.新建自定义组件* 在根目录新建commponents组件库*在组件库中新建header文件夹，在文件夹中右键，选中“新建commponent”自动生成组件内容* 组件页面编写*组件wxss文件，因为无法直接使用全局样式，需要导入*在根目录的pages的index文件夹内(在父组件json文件)index.json里进行引入*在父组件wxml文件中以组件名作为标签使用组件*代码效果二、父子组件通信父传子1.在
微信小程序——自定义组件
qq_41440031的博客
02-20 183
一个自定义组件类似于页面 由json js xwss xwml 四个文件组成 ，可以在微信开发者工具中自定义组件的文件结构 步骤1 定义组件 建一个文件夹conponents 里面新建components 一个文件夹Tabs来存放自定义组件 这时候就新定义了一种组件名字是Tabs 步骤二 声明组件 在你要使用该组件的页面中...
微信小程序使用npm构建工具
小傲哥哥的博客
03-29 421
1、npm初始化 在小程序的根目录文件夹里打开命令行，执行npm init -y，此时会产生一个package.json文件 2、安装npm包 这里以vant-weapp(小程序UI组件库)为例： npm i @vant/weapp -S --production 3、npm包构建 1：点击微信开发者工具右上角详情——>本地设置，选中使用npm模块 2：点击微信开发者工具菜单栏的工具，选择构建npm 4、使用npm 以 Button 组件为例，只需要在app.json或index.json中
微信开发者工具安装教程
qq_33881408的博客
12-14 417
微信开发者工具安装教程。
微信小程序最新版的扩展怎么添加
qq_62182135的博客
02-26 633
小编这里给出一个解答：看到那个蓝色字体了吗？然后找到你的那个拓展文件夹的所在位置，找到它就可以选择文件夹就能自主加入插件了。在继小程序更新之后，很多功能可能有更新现在拿外部编辑器拓展来说。变成了这样，那很多小伙伴都很疑惑，那怎么办？你只需要点击搜索栏那里的那右上角的三个点。设置里面的拓展设置已经不是原来的样貌了。点你已经解压的拓展包去添加就好了。
小程序开发--开发者工具的插件推荐
余的日常学习
03-22 3204
小程序开发--开发者工具的插件推荐
微信小程序开发者工具 无法加载以下来源的扩展程序 问题解决
QWsin的博客
07-13 2344
https://developers.weixin.qq.com/community/develop/article/doc/000ac411c407f03d0d4a6350251c13 简单来说就是，安装后直接打开，然后顺手将其固定到任务拦，程序关闭后，再次打开程序就会出现这个问题，我的解决办法就是不固定，点桌面的快捷方式。。因为懒得捣鼓了。 ...
简单介绍一下微信开发者工具
05-16
微信开发者工具是一款用于微信小程序开发的软件，包括代码编辑器、调试器、编译器等功能。它可以帮助开发者快速开发、调试和发布微信小程序。 开发者可以通过微信开发者工具创建项目、编辑代码、调试运行、模拟用户操作、查看日志等，还可以进行代码压缩、上传代码、发布审核等操作。开发者工具支持实时预览，可以在开发过程中不断预览效果，提高开发效率。 此外，微信开发者工具还提供了一些插件和扩展，如小程序自定义组件库、小程序云开发等，可以帮助开发者更快地开发出具有丰富功能的微信小程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值