uni-app 实现 app进入后台显示模糊效果（IOS、Android）

app进入后台毛玻璃高斯模糊效果（ios）：https://ext.dcloud.net.cn/plugin?id=2373 app进入后台透明效果、应用内禁止截屏（andorid）：https://ext.dcloud.net.cn/plugin?id=2379

ionicwang 2楼•8 天前

牛皮啊，老哥能不呢把源码插件分享一下给我。。。

sinazl 3楼•8 天前

回复 1***@qq.com: 付费插件，等审核通过

sinazl 4楼•8 天前

在 uni-app 中实现应用进入后台时显示模糊效果，可以通过监听应用的生命周期事件，并结合原生插件或CSS样式来实现。以下是一个基本的思路和代码示例，分别针对iOS和Android平台，但需要注意的是，uni-app 本身并不直接支持模糊效果的API，所以通常需要结合原生代码进行开发。

基本思路

监听应用进入后台事件：在 uni-app 中，可以使用 onHide 生命周期函数来监听应用进入后台的事件。
应用进入后台时设置模糊效果：由于 uni-app 无法直接操作原生视图层，因此需要通过原生插件或条件编译的方式，在原生代码中实现模糊效果。

代码示例

1. 在 `pages/index/index.vue` 中监听应用进入后台事件

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  onHide() {
    // 应用进入后台时触发
    // 这里不能直接设置模糊效果，需要调用原生插件或条件编译代码
    #ifdef APP-PLUS
      plus.runtime.executeJs(`
        // 这里可以调用原生JS接口，假设有一个设置模糊效果的接口
        setBlurEffect();
      `);
    #endif
  },
  // 其他生命周期函数和方法
}
</script>

<style>
/* 页面样式 */
</style>

2. 在原生插件中实现模糊效果（以iOS为例）

在iOS原生插件中，你可以使用 UIBlurEffect 来实现模糊效果。以下是一个简单的Objective-C示例代码：

#import <UIKit/UIKit.h>

@interface MyBlurEffect : NSObject

+ (void)setBlurEffect;

@end

@implementation MyBlurEffect

+ (void)setBlurEffect {
    UIView *blurView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    effectView.frame = blurView.bounds;
    [blurView addSubview:effectView];
    
    // 将blurView添加到window上或其他需要显示模糊效果的视图上
    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    [window addSubview:blurView];
}

@end

3. Android原生实现（示例Java代码）

在Android中，你可以使用 RenderScript 或 RenderEffect（API 31+）来实现模糊效果。这里是一个简单的RenderScript示例：

// 省略导入包和类定义部分

public class MyBlurEffect {
    public static void setBlurEffect(View view) {
        RenderScript rs = RenderScript.create(view.getContext());
        Allocation input = Allocation.createFromBitmap(rs, bitmap);
        Allocation output = Allocation.createTyped(rs, input.getType());
        ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        script.setRadius(10); // 模糊半径
        script.setInput(input);
        script.forEach(output);
        output.copyTo(bitmap);
        view.setBackground(new BitmapDrawable(view.getContext().getResources(), bitmap));
        rs.destroy();
    }
}