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 ContextToast.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: {//调用插件中的原生APIhandleToast(){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>