当前位置：首页 > backend >正文

＜uniapp＞＜插件＞＜UTS＞在uniapp中，创建自己的插件并发布到uni插件市场

backend 2025/5/6 19:03:41

前言

本专栏是基于uniapp实现手机端各种小功能的程序，并且基于各种通讯协议如http、websocekt等，实现手机端作为客户端（或者是手持机、PDA等），与服务端进行数据通讯的实例开发。

发文平台

CSDN

环境配置

系统：windows
平台：visual studio code、HBuilderX（uniapp开发）
语言：javascript、html、vue
库：websocket、http

概述

本文主要是介绍一下如何在uniapp上，创建自己的插件并发布到uniapp市场，插件可以是免费的，也能付费。
详细的插件创建与发布流程可以参看uniapp的官方手册：
https://uniapp.dcloud.net.cn/plugin/
本文主要介绍一下，如何创建并发布一个简单的UTS插件。

1、创建插件

我们使用uniapp的开发软件HBuilderX来新建一个项目，空项目即可：
在这里插入图片描述
然后右击项目根目录，选择新建uni_modules目录，创建一个uni插件目录：

接着右击刚刚创建的uni_modules根目录，选择新建uni_modules插件：

如上，为我们的插件去一个名字（即插件ID，有规范要求，具体参看官方说明），然后分类选择UTS插件-API插件。
在这里插入图片描述
以上，插件根目录下的文档是标准生成的，我们可以不用，比如，我们可以删除utssdk下面的所有文件，然后新建一个index.uts文件，在此文件中编写我们的接口函数即可。
我们编写一个简单的数据格式转换函数，即将浮点数转为对应的16进制字符串，以4位16进制显示，不足4位补零：

export function floattohex4(num:number,islittleEndian:boolean = false):string{const buffer = new ArrayBuffer(4);const view = new DataView(buffer);view.setFloat32(0,num,islittleEndian);let hex = '';for (let i=0;i<4;i++){const byte = view.getUint8(i);hex += byte.toString(16).padStart(2,'0');}return hex;
}

2、发布插件

编写完成以后，我们就可以进行插件的发布了。右击插件目录，选择发布到插件市场：
在这里插入图片描述
此时会弹出一个对话框，在发布之前，需要我们补全插件的一些信息，比如插件介绍、说明、版本、是否付费（如果付费，设置金额），更新日志，其中选项前标*的是必填项，按照说明填写即可。

填写完成后，点击提交即可。
然后我们登录自己的uni账号，查看自己发布的插件：
在这里插入图片描述

3、使用插件

现在我们成功的发布了自己的插件，虽然功能简单，但是对于一些通用的功能，编写成插件后，以后可以随时调用，就不需要重复编写了。
我们假设现在我们有一个其他的项目，需要使用我们的RJ-floatTohex4插件，那么需要先在插件市场下载此插件：
在这里插入图片描述

在这里插入图片描述
可以选择将插件导入哪一个项目中。

然后我们在项目中使用这个插件的功能，我们在页面上创建一个输入框、一个转换按钮以及文本，当输入一个浮点数后，点击转换按钮，输出转换后的16进制字符：

<template><view class="content"><view><input class="uni-input" @input="inputfunc" placeholder="输入浮点数"><button @click="convert">转换</button><view>转换：{{showValue}}</view></view></view>
</template><script>import { floattohex4 } from '../../uni_modules/RJ-floatTohex4';export default {data() {return {inputValue:'',showValue:'',}},onLoad() {},methods: {inputfunc(){this.inputValue = event.target.value;},convert(){const dt_float =parseFloat(this.inputValue);const dt_hex = floattohex4(dt_float,false);this.showValue = dt_hex;}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}
</style>

看一下使用效果：
在这里插入图片描述