<uniapp><插件><UTS>在uniapp中,创建自己的插件并发布到uni插件市场

前言

本专栏是基于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位补零:

javascript 复制代码
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进制字符:

vue 复制代码
<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>

看一下使用效果:

以上,是使用uniapp开发自己的插件的一次记录。

如果你有很好的通用程序,可以制作成插件,分享给其他用户,也可以设置为付费,获取收益。

相关推荐
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's8 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim9 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim9 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心9 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络9 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket