HBuilderX 插件开发指南（一）：从插件开发到发布的完整流程

news2025/3/10 22:15:06

前端目前主流使用的IDE工具有VS Code、Sublime Text3、HBuilder X等等

本期我们主要了解HBuilder X，作为前端通用型开发工具，拥有可视化的操作方式，内置相关环境，开箱即用，无需配置nodejs等优点外，对uni-app更是做了特别强化。

随着对HBuilder X的使用，我们已不满足插件市场提供的功能，我们可以针对自己的需求，开发一个插件

插件扩展能做什么？(注解摘取 官方文档)

HBuilderX的插件是基于nodejs的，所有nodejs api都可以使用，如文件操作、调用其他node命令。

除此之外，HBuilderX扩展了大量的js API（与vscode兼容），可以定制很多HBuilderX的功能和界面，比如

  • 添加新的菜单
  • 添加新的命令及快捷键
  • 扩展新的代码块
  • 添加新的view视图，比如在界面左侧项目管理器旁边新增加一个“TODO”视图
  • 对文档进行各种编辑，增删改文字内容、操作光标和选区
  • 对文档进行校验
  • 在控制台打印日志、操作状态栏消息、弹出各种提示框和选择框

准备工作

了解了插件的必要性 和 可行性 ，那么就需要做一下准备工作，为开发插件提供便利。

首先我们需要去开发平台先注册一个DCloud 账号，注意 开发平台 和 开放平台的区别，文章中会一一提到

DCloud 开发平台注册、登录

在这里插入图片描述
没用账号，点击注册
在这里插入图片描述

安装HBuilder X

  • HBuilderX 官方IDE下载地址
    在这里插入图片描述
注册、登录 HBuilder X

安装HBuilder X后，点击IDE左下角进行登录，账号使用DCloud账号和密码

在这里插入图片描述

新建项目

创建一个项目，进行插件项目开发

操作顺序：菜单栏 ---- 文件 ---- 新建 ---- 项目

注意重点！！！！：

这里有一个重点，就是项目名称，大家可能会习惯性的起一些语义化或者比较好记忆、好区分的项目前缀等等。

这里需要注意，你的项目名称可以随便起，但是必须保证项目名称 与 插件项目创建后的package.json 文件中的 ID 保持一致，否则有授权相关需求，会导致本地开发授权失败

在这里插入图片描述

编辑项目

这里我们简单添加一个窗口右下角消息通知框的提示命令。

// package.json
// 注意id 和 项目名称要一致，否则有授权相关需求，会导致本地开发授权失败
// 记得修改name 、publisher、keywords
{
	"id": "ide-demo",
	"name": "ide-demo",
	"description": "ide-demo",
	"displayName": "针对HBuilderX 开发的demo",
	"version": "1.0.0",
	"publisher": "your name",
	"keywords":[
	  "ide"
	],
	"engines": {
		"HBuilderX": "^2.7.0"
	},
	"categories": [
		"Other"
	],
	"main": "./extension",
	"activationEvents": [
		"onCommand:extension.helloWorld"
	],
	"contributes": {
		"commands": [{
			"command": "extension.helloWorld",
			"title": "demo新命令"
		}],
		"menus": {
			"editor/context": [{
					"command": "extension.helloWorld",
					"group": "z_commands",
					"when": "editorTextFocus"
				},
				{
					"group": "z_commands"
				}
			]
		}
	},
	"extensionDependencies": [
		"plugin-manager"
	],
	"dependencies": {}
}

编辑消息提示框内容

// extension.js
var hx = require('hbuilderx')
//该方法将在插件激活的时候调用
function activate(context) {
    let disposable = hx.commands.registerCommand('extension.helloWorld', () => {
        hx.window.showInformationMessage(`
你好，这是我的第一个插件扩展。
这个插件属于 ide-demo
我们的命令生效了`)
    })
    //订阅销毁钩子，插件禁用的时候，自动注销该command。
    context.subscriptions.push(disposable)
}
//该方法将在插件禁用的时候调用（目前是在插件卸载的时候触发）
function deactivate() {

}
module.exports = {
    activate,
    deactivate
}

运行项目

打开项目，然后点击启动按钮，我们会发现另打开了一个HBuilder X窗口，这个窗口中默认已加载了该插件的功能
在这里插入图片描述

新打开的窗口默认是没有项目的，这是可以选择新建或打开，用来调试插件运行效果

这里的项目就是普通的uni项目就可以，只是用来调试

在这里插入图片描述

演示效果

打开dome项目，然后在编辑区右键单击（我们使用的是editor/context，属于编辑器右键菜单），具体的插件开发规则，会在二期文章中具体介绍，这里就不具体描述了

右键单击后，我们发现菜单中有一个新命令 ： demo新命令
在这里插入图片描述

点击 demo新命令，我们可以发现窗口右下角，出现一个消息提示框
在这里插入图片描述

发布插件

发布插件有两种操作方式

第一种

从插件市场中，发布插件~，但是不太推荐，发布方式比较麻烦
在这里插入图片描述

第二种

在项目中package.json文件上右键单击，注意这里的项目指的是插件项目（ide-demo），不是demo项目，不要搞混

我们发现菜单栏中，有一个 发布到插件市场的选项，点击它

在这里插入图片描述

完善插件信息

在这里插入图片描述

发布成功后，我们可以就可以去插件市场安装了

搜索我们的插件，如果立马搜索不到，可能是因为延迟的问题

在这里插入图片描述
我们也可以直接进入插件详情页面 https://ext.dcloud.net.cn/plugin?name=ide-demo，链接参数 name 写插件name 即可

在这里插入图片描述

点击安装插件

在这里插入图片描述

点击打开HBuilderX后，默认执行了安装操作。 当安装成功后，我们发现右键菜单中，有了demo新命令选项

顶部菜单栏 ---- 工具 ---- 插件安装 ---- 已安装插件中，也有了ide-demo插件
在这里插入图片描述
到了这一步，我们的插件就算上发布成功了。

但是插件中，如果有授权功能，类似获取用户信息、手机号、邮箱等等，这时候还需要在DCloud用户开放平台注册插件

DCloud 开放平台注册、登录

已有账号 (DCloud账号和密码)，直接登录 （必须是企业认证，否则会有提示）

在这里插入图片描述

没用账号，点击注册
在这里插入图片描述

注意该账号必须是企业认证，否则会有提示

在这里插入图片描述

新增插件

在这里插入图片描述
插件注册成功后，我们的列表中，会有如下数据

插件idclient_idclient_secret插件名称插件描述插件图片icon
ide-demojo94444vE8oQDNw9y44444g1qo6VNT5FUDu4cQvbide-demao关于HBuilder X 插件的demo

DCloud授权

DCloud授权登录接入文档

// 具体授权流程，请看 HBuilderX 插件开发指南（二）
let prom = hx.authorize.login({
      //插件授权 ID   https://open.dcloud.net.cn/
      client_id: 'nIDmsBQxkI',
      scopes: ['basic', 'email', 'phone'],
      description: '获取用户信息和手机号！'
  })
prom.then(async param => {
	console.log(param['code'],'------code')
})

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Open CASCADE学习|用点分割边

Open CASCADE学习|用点分割边

在Open CASCADE Technology（OCCT）中，几何模型是由拓扑（Topology）和几何（Geometry）两部分组成的。拓扑部分描述了形状的拓扑结构，比如边、面、体等，而几何部分则定义了这些…
阅读更多...
快速排序（2）——快速排序的优化

快速排序（2）——快速排序的优化

因为Hoare的快速排序写起来容易出错，并且有很多地方不太合适，于是，就有了一下几种优化。 基准值的优化 如果我们一直选取一组数据的第一个数据为基准值，如果遇到重复少的值的化，没什么问题。但是如果重复的值比较多的…
阅读更多...
对称密钥的分配、公钥的分配

对称密钥的分配、公钥的分配

目录 密钥分配 1 对称密钥的分配 KDC 对会话密钥 KAB 的分配 对称密钥分配协议：Kerberos 2 公钥的分配 认证中心 CA (Certification Authority) 数字证书 (digital certificate) 已签名的 B 的数字证书的产生过程 X.509 数字证书 认证系统 证书链 证书…
阅读更多...
2024.2.18 C++QT 作业

2024.2.18 C++QT 作业

思维导图 练习题 1>定义一个基类 Animal&#xff0c;其中有一个虛函数perform&#xff08;)&#xff0c;用于在子类中实现不同的表演行为。 #include <iostream>using namespace std;class Animal { public:virtual void perform() {cout << "这是一个动…
阅读更多...
红队攻防之office文件钓鱼制作ppt钓鱼

红队攻防之office文件钓鱼制作ppt钓鱼

为众人抱薪者&#xff0c;不可使其冻毙于风雪&#xff1b;为自由开路者&#xff0c;不可使其困顿于荆棘。 PPT手势触发 这种攻击则利用的是鼠标轨迹来进行操作&#xff0c;比如鼠标点击、鼠标移动等。 首先&#xff0c;创建一个普通的PPTX文件&#xff0c;随便填入一些内容&…
阅读更多...
《白话C++》第10章 STL和boost，Page74 10.4.4 std::unique_ptr

《白话C++》第10章 STL和boost，Page74 10.4.4 std::unique_ptr

std::unique_ptr可以同时处理普通指针和指向数组的指针&#xff1a; unique_ptr像是auto_ptr的功能改良版 第一个改进就是可以管理指向单一对象的指针&#xff0c;也可以管理指向连续对象&#xff08;数组&#xff09;的指针。 第二个&#xff0c;unique_ptr改进的是&#xf…
阅读更多...
huggingface入门玩耍LLM Starter

huggingface入门玩耍LLM Starter

huggingface入门玩耍LLM Starter huggingface-cli 下载model 下载 本人macos系统&#xff0c;以下可参考 huggingface-cli 下载 brew install huggingface-climodel 下载 以 chatglm-6b 为例 huggingface-cli download --token hf_*** --resume-download THUDM/chatglm-6b-i…
阅读更多...
C/C++ BM7 链表中环的入口结点

C/C++ BM7 链表中环的入口结点

文章目录 前言题目解决方案一1.1 思路阐述1.2 源码 解决方案二2.1 思路阐述2.2 源码 总结 前言 BM6里面使用了双指针法和哈希的方式来查找环&#xff0c;BM7相对于BM6只多了一个查找第一个重复地址的过程。个人认为是用哈希是最简单&#xff0c;C11标准的set或者map。 题目 给…
阅读更多...
洛谷 P1150 Peter 的烟

洛谷 P1150 Peter 的烟

参考代码and代码解读 #include<iostream> using namespace std; int main() { int n,k,nonu; //n烟的数量&#xff0c;k需要多少根烟头换一支烟&#xff0c;nonu记录烟头的个数 cin>>n>>k; int sumn; //一开始就能吸n支烟 nonusum; …
阅读更多...
C++友元-＞全局函数做友元、类做友元、成员函数做友元

C++友元-＞全局函数做友元、类做友元、成员函数做友元

全局函数做友元代码&#xff1a; #include<iostream> using namespace std; #include<string> //建筑物类 class Building { //告诉编译器 goodGay全局函数 是 Building类的好朋友&#xff0c;可以访问类中的私有内容 friend void goodGay(Building * bu…
阅读更多...
linux kernel 内存踩踏之KASAN_HW_TAGS(MTE)（三）

linux kernel 内存踩踏之KASAN_HW_TAGS(MTE)（三）

一、背景 linux kernel 内存踩踏之KASAN&#xff08;一&#xff09;_kasan版本跟hasan版本区别-CSDN博客 linux kernel 内存踩踏之KASAN_SW_TAGS&#xff08;二&#xff09;-CSDN博客 最后来介绍一下KASAN_HW_TAGS&#xff0c;ARM64上就是MTE&#xff0c;这个特性在ARMv8.5支…
阅读更多...
python in Vscode

python in Vscode

背景 对于后端的语言选择&#xff1a; python&#xff0c;java&#xff0c;JavaScript备选。 选择Python 原因&#xff1a;可能是非IT专业的人中&#xff0c;会Python的人比较多。 目的 之前使用的IDE是VSCODE&#xff0c;在WSL的环境下使用。现在需要在在WSL的VSCODE下使…
阅读更多...
分享几个丝滑oled代码

分享几个丝滑oled代码

最近一段业余时间在捣鼓esp32&#xff0c;发现对于一个搞diy的来说&#xff0c;它的生态&#xff0c;不管是开发环境、氛围还是可玩度都是独一挡的&#xff0c;国内外基于此的扩展真是太多了&#xff0c;找了几个通过按键/旋钮进行0.96寸OLED控制的案例&#xff0c;超级丝滑&am…
阅读更多...
【论文解读】Latency-Aware Collaborative Perception

【论文解读】Latency-Aware Collaborative Perception

Latency-Aware Collaborative Perception 摘要引言方法SystemSyncNet 实验 摘要 协作感知最近显示出提高单智能体感知感知能力的巨大潜力。现有的协同感知方法通常考虑理想的通信环境。然而&#xff0c;在实践中&#xff0c;通信系统不可避免地存在延迟问题&#xff0c;导致安…
阅读更多...
2月16日openai又出了什么大招呢？

2月16日openai又出了什么大招呢？

2024年2月16日通过google trends可以发现“sora”被大量的搜索与关注。那么什么是“sora”呢&#xff1f; Sora是OpenAI发布的一款文本到视频的AI模型&#xff0c;它能够根据文本指令生成逼真和富有想象力的场景。Sora 可以创建长达 60 秒的视频&#xff0c;其中包含高度详细的…
阅读更多...
后端扫盲系列 - vue入门指南

后端扫盲系列 - vue入门指南

vue特点 组件化&#xff1a;用户界面分解为可重用的组件&#xff0c;这些组件可以使开发的页面更加模块化和可维护双向数据绑定&#xff1a;vue提供了一种轻松绑定数据和DOM元素之间的机制&#xff0c;意味着数据发送变化时&#xff0c;视图会自动更新&#xff0c;反之亦然虚拟…
阅读更多...
糟糕，接口被刷了，怎么办？

糟糕，接口被刷了，怎么办？

前言 在面试时&#xff0c;经常会被问一个问题&#xff1a;如何防止别人恶意刷接口&#xff1f; 这是一个非常有意思的问题&#xff0c;防范措施挺多的。今天这篇文章专门跟大家一起聊聊&#xff0c;希望对你会有所帮助。 1 防火墙 防火墙是网络安全中最基本的安全设备之一&…
阅读更多...
每周AI新闻（2024年第7周）OpenAI发布视频生成模型Sora | 谷歌推出Gemini 1.5 | 英伟达公开超级计算机

每周AI新闻（2024年第7周）OpenAI发布视频生成模型Sora | 谷歌推出Gemini 1.5 | 英伟达公开超级计算机

这里是陌小北&#xff0c;一个正在研究硅基生命的碳基生命。正在努力成为写代码的里面背诗最多的&#xff0c;背诗的里面最会写段子的&#xff0c;写段子的里面代码写得最好的…厨子。 每周日解读每周AI大事件。 这一周&#xff0c;国外各厂真是不让我们消停儿过年呐&#xf…
阅读更多...
抑郁症测试丨焦虑症测试小程序源码

抑郁症测试丨焦虑症测试小程序源码

这是一个考验智力,心里上面的一个测试游戏 支持多种测试方法比如有: 智商测试丨情商测试 性格测试丨爱情测试 抑郁症测试丨焦虑症测试 心理压力测试丨生活满意度测试 通过不同的测试,来检查你的智力,情商等等 通过发行自己的不住来弥补自己的不足所以这就是为什么小编会…
阅读更多...
Linux系统——防火墙Firewalld

Linux系统——防火墙Firewalld

目录 一、firewalld介绍 1.归入zone顺序 2.firewalld zone分类 3.预定义服务 二、图形化操作 1.打开firewalld图形化界面 2.以http服务为例&#xff0c;打开httpd服务 3.修改端口号 三、命令行配置 1.基础配置 2.查看现有firewalld设置 3.设置查看默认区 4.添加源…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023