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

uniapp使用uts插件调用原生API

article 2025/2/7 9:54:47

uniapp使用uts插件调用原生API

背景
思路
代码实现
尾巴

背景

在APP平台，某些功能由于uniapp限制，或者性能问题需要使用原生API来实现。uniapp很早就提供了原生语言插件功能，后台随着uniapp-x的推出，又提供了uts插件的方式来调用原生平台API。相比原生语言插件，uts插件可以直接使用更为熟悉的ts语法，不用在原生IEDA（android studio或xcode）中进行繁琐的配置。之前写过一篇uniapp原生插件开发（Android），今天我们用uts来实现一个类似调用原生安卓Toast功能的插件。

思路

1、使用HbuilderX新建一个uniapp项目，名字随意取就行。
2、在项目根目录下新建uni_modules目录，这个目录是用来存放我们uts插件的。
3、新建一个插件文件夹，我这里插件名称是my-toast，然后按照下面图片层级依次建好相关目录和文件。
在这里插入图片描述
注：uts插件除了插件名可以自定义，其他都需要按照上图中的命名，不要随意更改。两个.md文件非必须，可以不用。

代码实现

首先是package.json是插件相关的配置文件，可以参考下我的

{
  "id": "my-toast",
  "displayName": "my-toast",
  "version": "1.0.0",
  "description": "my-toast",
  "keywords": [
    "my-toast"
],
  "repository": "",
  "engines": {
    "HBuilderX": "^3.6.8"
  },
  "dcloudext": {
    "type": "uts",
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "",
      "data": "",
      "permissions": ""
    },
    "npmurl": ""
  },
  "uni_modules": {
    "dependencies": [],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "u",
        "aliyun": "u",
        "alipay": "u"
      },
      "client": {
        "Vue": {
          "vue2": "u",
          "vue3": "u"
        },
        "App": {
          "app-android": "u",
          "app-ios": "u"
        },
        "H5-mobile": {
          "Safari": "u",
          "Android Browser": "u",
          "微信浏览器(Android)": "u",
          "QQ浏览器(Android)": "u"
        },
        "H5-pc": {
          "Chrome": "u",
          "IE": "u",
          "Edge": "u",
          "Firefox": "u",
          "Safari": "u"
        },
        "小程序": {
          "微信": "u",
          "阿里": "u",
          "百度": "u",
          "字节跳动": "u",
          "QQ": "u",
          "钉钉": "u",
          "快手": "u",
          "飞书": "u",
          "京东": "u"
        },
        "快应用": {
          "华为": "u",
          "联盟": "u"
        }
      }
    }
  }
}

然后是config.json，这里只配置了android的minSdkVersion。

{
  "minSdkVersion": "21"
}

接下来是index.uts，是插件默认入口。

//这里要导入原生的包
import Context from 'android.content.Context';
import Toast from 'android.widget.Toast';
export function showToast(msg: String) : void {
	const context = UTSAndroid.getAppContext() as Context
	Toast.makeText(context, msg, Toast.LENGTH_SHORT).show()
}

AndroidManifest.xml暂时没用到。
最后新建一个vue页面，然后导入插件的showToast，然后点击调用。

<template>
	<view class="content">
		<image class="logo" 
			src="/static/logo.png"
			@click="handleToast"></image>
	</view>
</template>

<script>
	//导入插件中的函数
	import { 
		showToast
	} from "@/uni_modules/my-toast"
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
			//调用插件中的原生API
			handleToast(){
				showToast('test uts plugin 1234')
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>