uni-app实现能悬浮到其它应用上面的悬浮窗功能，可自定义安装组件元素

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app实现能悬浮到其它应用上面的悬浮窗功能，可自定义安装组件元素

Harmonyos Next教程
2 回复

悬浮窗（在其他应用上层显示） Ba-FloatWindow


在uni-app中实现悬浮到其他应用上面的悬浮窗功能，通常需要利用原生插件或系统API来实现，因为uni-app本身是基于Vue.js的多端框架，主要目标是跨平台开发，对于底层原生功能的支持需要通过扩展实现。以下是一个简要的思路和代码示例，展示如何在Android平台上实现悬浮窗功能，并自定义安装组件元素。

步骤概述

  1. 创建uni-app项目：首先，确保你已经创建了一个uni-app项目。

  2. 编写Android原生插件：为了实现悬浮窗功能，需要编写一个Android原生插件。

  3. 集成原生插件到uni-app：将编写好的原生插件集成到你的uni-app项目中。

Android原生插件代码示例

1. 创建FloatWindowService.java

import android.app.Service;
import android.content.Intent;
import android.graphics.PixelFormat;
import android.os.IBinder;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;

public class FloatWindowService extends Service {

    private WindowManager windowManager;
    private View floatView;

    @Override
    public IBinder onBind(Intent intent) {
        return null;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
        floatView = LayoutInflater.from(this).inflate(R.layout.float_window, null);

        WindowManager.LayoutParams params = new WindowManager.LayoutParams(
                WindowManager.LayoutParams.WRAP_CONTENT,
                WindowManager.LayoutParams.WRAP_CONTENT,
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                    WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
                } else {
                    WindowManager.LayoutParams.TYPE_PHONE
                },
                WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
                PixelFormat.TRANSLUCENT);
        params.gravity = Gravity.TOP | Gravity.LEFT;
        params.x = 0;
        params.y = 0;

        windowManager.addView(floatView, params);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (floatView != null) windowManager.removeView(floatView);
    }
}

2. 创建float_window.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#FFFFFF"
    android:padding="10dp">

    <!-- 自定义组件元素 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />

</LinearLayout>

注意事项

  • 权限申请：在AndroidManifest.xml中申请必要的权限，如SYSTEM_ALERT_WINDOW。
  • 适配不同版本：注意适配不同Android版本对悬浮窗类型的限制。
  • 插件集成：按照uni-app官方文档将插件集成到你的项目中，并通过JS调用相关功能。

由于篇幅限制，这里只展示了核心代码和思路，具体实现需要根据实际情况进行调整和完善。

回到顶部