首先创建插件,取名xm-hm ,选择uts api插件
然后去插件目录开始编写
修改package.json 文件
增加api扩展配置
找到uni_modules增加api扩展,示例如下:
"uni_modules": {
"uni-ext-api": {
"uni": {
"outApp":"outApp",
}
}
}
然后修改interface.uts 文件
增加如下代码
/**
* interface.uts
* uts插件接口定义文件,按规范定义接口文件可以在HBuilderX中更好的做到语法提示
*/
/**
* myApi 异步函数的参数,在type里定义函数需要的参数以及api成功、失败的相关回调函数。
*/
export type MyApiOptions = {
paramA : boolean
success ?: (res : MyApiResult) => void
fail ?: (res : MyApiFail) => void
complete ?: (res : any) => void
}
/**
* 函数返回结果
* 可以是void, 基本数据类型,自定义type, 或者其他类型。
* [可选实现]
*/
export type MyApiResult = {
fieldA : number,
fieldB : boolean,
fieldC : string
}
/**
* 错误码
* 根据uni错误码规范要求,建议错误码以90开头,以下是错误码示例:
* - 9010001 错误信息1
* - 9010002 错误信息2
*/
export type MyApiErrorCode = 9010001 | 9010002;
/**
* myApi 的错误回调参数
*/
export interface MyApiFail extends IUniError {
errCode : MyApiErrorCode
};
/* 异步函数定义 */
export type MyApi = (options : MyApiOptions) => void
/* 同步函数定义 */
export type MyApiSync = (paramA : boolean) => MyApiResult
interface Uni {
/**
* 退出app
*
* @example
* ```typescript
* uni.outApp()
* ```
* @remark
* - 该接口需要同步调用
* @uniPlatform {
* "harmony": {
* "osVer": "3.0",
* "uniVer": "4.23",
* "unixVer": "x"
* }
* }
* }
* @uniVueVersion 3 //支持的vue版本
*
*/
outApp(): void,
}
接着创建鸿蒙插件和功能文件,如下图所示(app-harmony目录和index.uts如果不存在则需要手动创建)
打开index.uts文件写入如下代码
import common from '@ohos.app.ability.common';
//退出app
export function outApp(){
const context = getContext() as common.UIAbilityContext;
context.terminateSelf();
console.log('out_app')
}
至此,退出app的uts鸿蒙端插件已经写好了,接下来直接上调用示例 ,将示例代码放入如下文件即可
调用示例代码:
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<button class="button" @click="out_app">退出app</button>
</view>
</view>
</template>
<script lang="uts">
import { out_app } from "@/uni_modules/xm-hm"
export default {
data() {
return {
title: 'Hello',
}
},
onLoad() {
},
methods: {
out_app(){
outApp();
}
}
}
</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>
接下来运行测试一下吧,点击退出即可关闭app啦!