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

前端目前主流使用的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')
})

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

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

相关文章

notepad++打开文本文件乱码的解决办法

notepad++打开文本文件乱码的解决办法

目录 第一步 在编码菜单栏下选择GB2312中文。如果已经选了忽略这一步 第二步 点击编码，红框圈出来的一个个试。我切换到UTF-8编码就正常了。 乱码如图。下面分享我的解决办法 第一步 在编码菜单栏下选择GB2312中文。如果已经选了忽略这一步 第二步 点击编码&#…
阅读更多...
Vue项目启动过程全记录（node.js运行环境搭建）

Vue项目启动过程全记录（node.js运行环境搭建）

一、安装node.js并配置环境变量 1、安装node.js 从Node.js官网下载安装包并安装。然后在安装后的目录（如果是下载的压缩文件，则是解压缩的目录）下新建node_global和node_cache这两个文件夹。 node_global：npm全局安装位置 node_…
阅读更多...
Unity中，C#的事件与委托区别和经典实例

Unity中，C#的事件与委托区别和经典实例

文章目录 实例1：委托（Delegate）的基本用法实例2：事件（Event）的声明与订阅实例3：Unity引擎中的委托实例 - UI Button.onClick实例4：事件（Event）的安全性实例5&…
阅读更多...
上位机图像处理和嵌入式模块部署（cmake的使用）

上位机图像处理和嵌入式模块部署（cmake的使用）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing 163.com】 过去我们编写windows程序的时候，习惯上都是直接使用visual studio创建工程开发。而开发linux程序的时候，则是编写好c、cpp代…
阅读更多...
C++ 离散化 算法 （详解）+ 例题

C++ 离散化 算法 （详解）+ 例题

1、性质 把无限空间中有限的个体映射到有限的空间中去，以此提高算法的空间效率。通俗的说，离散化是在不改变数据相对大小的条件下，对数据进行相应的压缩。 适用范围：数的跨度很大，用的数很稀疏 例如：值域…
阅读更多...
无形的伤害

无形的伤害

有时候 我们往往很注意和陌生人或朋友之间的交往，关注情绪，语气，声调等等，生怕冲撞唐突了对方。 但往往会忽略身边人的感受，尤其是亲人和亲密的朋友，把他们对我们的关心当做理所当然的，和他们交…
阅读更多...
Sora技术和影响分析

Sora技术和影响分析

与现有生成工具比的优势 现有的文生图工具有Midjourney、Stable Diffusion、文心一格等，支持不同风格的内容生成，支持lora模型训练，此领域发展相对比较成熟。 而在文生视频领域，其难度相对更高，要求画面连续、清晰度…
阅读更多...
OpenMVG（特征匹配、照片组重建点云、GPS位置信息、GMS）

OpenMVG（特征匹配、照片组重建点云、GPS位置信息、GMS）

目录 1 图像的特征匹配 2 图像中提取GPS位置信息 2.1 写入GPS信息到图像中 2.2 读取带有GPS的图像 3 SIFT/AKAZE/AKAZE_MLDB特征提取对比 4 GMS Filter 5 将球形全景图转换为6个透视视图 6 照片组重建点云 1 图像的特征匹配 #include "openMVG/features/feature.…
阅读更多...
BUGKU-WEB source

BUGKU-WEB source

题目描述 题目截图如下： 进入场景看看： 解题思路 看源码，看F12网络请求没有东西只能老老实实按照提示用Linux去扫描目录 相关工具 kali虚拟机安装gobuster 或者dirsearch 解题步骤 先查看源码： flag{Zmxhz19ub3RfaGvyzS…
阅读更多...
Ubuntu22.04LTS编译Frida历史版本，环境配制及细节调整

Ubuntu22.04LTS编译Frida历史版本，环境配制及细节调整

经常使用Frida的朋友们可能会遇到Frida的各种问题需要自定义的，而这时候Frida的本地编译就显得很重要了。 最近一位朋友发现使用Frida14/15/16版的server只能连拉一定数量的设备，超过了frida-device-manager便不能连接设备。 实现没有办法，…
阅读更多...
vue创建项目报：Error: command failed: yarn

vue创建项目报：Error: command failed: yarn

我的文件在：C:\Users\Administrator 下 原来里面 useTaobaoRegistry 是否使用淘宝源 是 false ，我改为true就好了 也可以 packageManager 默认安装工具 改为 npm 或 cnpm 原文连接：vue创建项目报：Error: command failed: yarn-阿…
阅读更多...
Stable Diffusion教程——常用插件安装与测试（一）

Stable Diffusion教程——常用插件安装与测试（一）

前言 随着Stable Diffusion不断演进，越来越多的开发者开始涉足插件开发。尽管网络上存在大量教程，但它们通常零散分布，逐个学习和查找非常耗时，使人感觉每天都在劳累思考。这里总结了Stable Diffusion常用的插件安装与测试方法。…
阅读更多...
搭建智能调度系统：同城代驾小程序的开发教学

搭建智能调度系统：同城代驾小程序的开发教学

当下，同城代驾服务越来越受到人们的青睐。为了满足市场需求，许多企业开始开发智能调度系统，以提高服务效率和用户体验。本文将介绍如何搭建一个智能调度系统，并以同城代驾小程序的开发为例进行详细教学。 第一步：需求…
阅读更多...
科技守护大唐遗宝，预防保护传承千年

科技守护大唐遗宝，预防保护传承千年

​ 一、“大唐遗宝——何家村窖藏出土文物展” 陕西历史博物馆的“唐朝遗宝——何家村窖藏出土文物展”算得上是博物馆展览的典范。展览不仅在于展现了数量之多、等级之高、种类之全，更在于对唐朝历史文化的深入揭露。 走入大唐财产展厅，好像穿越千年前…
阅读更多...
The Captainz NFT 概览与数据分析

The Captainz NFT 概览与数据分析

作者：stellafootprint.network 编译：cicifootprint.network 数据源：The Captainz NFT Collection Dashboard The Captainz 是 Memeland 的旗舰系列，由 9,999 个实用性极强的 PFP 组成。持有者在 Memeland 宇宙中展开了一场神…
阅读更多...
【Python】测量WAV文件播放时长

【Python】测量WAV文件播放时长

问题 windows播放WAV音频文件，一般使用API函数，如PlaySound。实际使用发现，从调用PlaySound到实际开始播放存在200ms以上的延时，在游戏编程中音效实时性是个需要解决的问题。 本文主要讨论，windows播放WAV文件的衍生…
阅读更多...
2024 VNCTF----misc---sqlshark sql盲注+流量分析

2024 VNCTF----misc---sqlshark sql盲注+流量分析

流量分析 wireshark 可以看到很多 any/**/Or/**/(iF(((((Ord(sUbstr((sElect(grOup_cOncat(password))frOm(users)) frOm 1 fOr 1))))in(80))),1,0))# P any/**/Or/**/(iF(((((Ord(sUbstr((sElect(grOup_cOncat(password))frOm(users)) frOm 1 fOr 1))))in(104))),1,0))#…
阅读更多...
基于springboot智慧外贸平台源码和论文

基于springboot智慧外贸平台源码和论文

网络的广泛应用给生活带来了十分的便利。所以把智慧外贸管理与现在网络相结合，利用java技术建设智慧外贸平台，实现智慧外贸的信息化。则对于进一步提高智慧外贸管理发展，丰富智慧外贸管理经验能起到不少的促进作用。 智慧外贸平台能够通过互…
阅读更多...
Vue3

Vue3

目录 一、 Vue3简介 1. 性能的提升 2. 源码的升级 3. 拥抱TypeScript 4. 新的特性 二、 创建Vue3工程 1. 基于 vue-cli 创建 2. 基于 vite 创建(推荐) 3. 一个简单的效果 三、Vue3核心语法 1. OptionsAPI 与 CompositionAPI （1）Options API …
阅读更多...
前端vue金额用逗号分隔

前端vue金额用逗号分隔

实现效果 代码 template部分 <el-input v-model"state.val"></el-input><div>{{ priceFor(state.val) }}</div> js部分 const state reactive({ val: });const priceFor (val)> {if(!val){return }else if(val.length<4){return…
阅读更多...
最新文章

Copyright @ 2022~2023