当前位置:首页 > uni-app

uniapp 接收广播

2026-03-05 00:29:45uni-app

接收广播的实现方法

在UniApp中接收广播主要依赖于原生平台的能力,可以通过以下方式实现:

Android平台实现

在Android原生平台中,需要注册广播接收器并处理接收到的广播:

  1. 创建原生插件或修改原生代码 在Android原生工程中创建BroadcastReceiver子类:

    public class MyBroadcastReceiver extends BroadcastReceiver {
     @Override
     public void onReceive(Context context, Intent intent) {
         String action = intent.getAction();
         if ("YOUR_ACTION".equals(action)) {
             // 处理接收到的广播
             String data = intent.getStringExtra("data");
             // 通过UniApp SDK传递到前端
             UniSDKEngine.sendUniModuleEvent("BroadcastEvent", data);
         }
     }
    }
  2. 在AndroidManifest.xml中注册接收器

    <receiver android:name=".MyBroadcastReceiver">
     <intent-filter>
         <action android:name="YOUR_ACTION" />
     </intent-filter>
    </receiver>

iOS平台实现

在iOS平台使用本地通知中心接收广播:

  1. 创建原生模块
    
    #import <Foundation/Foundation.h>

@interface MyNotificationObserver : NSObject @end

@implementation MyNotificationObserver

  • (instancetype)init { self = [super init]; if (self) { [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didReceiveNotification:) name:@"YOUR_NOTIFICATION" object:nil]; } return self; }

  • (void)didReceiveNotification:(NSNotification )notification { NSDictionary userInfo = notification.userInfo; // 通过DCUniMP SDK传递到前端 [DCUniMPSDKEngine sendEventToUniMP:@"BroadcastEvent" data:userInfo]; }

@end


#### UniApp前端接收

在前端页面中监听原生事件:

```javascript
// 页面中监听事件
uni.onNativeEventReceive((res) => {
    if (res.event === 'BroadcastEvent') {
        console.log('收到广播:', res.data);
        // 处理接收到的数据
    }
});

// 或者使用全局事件监听
uni.$on('BroadcastEvent', (data) => {
    console.log('全局收到广播:', data);
});

动态注册广播(仅Android)

对于需要动态注册的广播,可在页面生命周期中处理:

uniapp 接收广播

// 页面显示时注册
onShow() {
    if (plus.os.name === 'Android') {
        const main = plus.android.runtimeMainActivity();
        const IntentFilter = plus.android.importClass('android.content.IntentFilter');
        const filter = new IntentFilter('YOUR_ACTION');

        this.broadcastReceiver = plus.android.implements('android.content.BroadcastReceiver', {
            onReceive: (context, intent) => {
                const data = plus.android.invoke(intent, 'getStringExtra', 'data');
                uni.$emit('BroadcastEvent', data);
            }
        });

        main.registerReceiver(this.broadcastReceiver, filter);
    }
}

// 页面隐藏时注销
onHide() {
    if (this.broadcastReceiver && plus.os.name === 'Android') {
        const main = plus.android.runtimeMainActivity();
        main.unregisterReceiver(this.broadcastReceiver);
    }
}

注意事项

  • Android广播分为静态注册和动态注册,静态注册在应用未启动时也能接收,动态注册只在应用运行时有效
  • iOS没有真正的广播机制,主要通过NSNotificationCenter实现类似功能
  • 跨平台实现时需考虑各平台的特性差异
  • 频繁的广播通信可能影响性能,建议合理设计通信频率和数据量

以上方法可根据具体业务需求进行调整,实现UniApp中接收广播的功能。

标签: uniapp
分享给朋友:

相关文章

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-color:…

uniapp悬浮

uniapp悬浮

实现悬浮效果的方法 在UniApp中实现悬浮效果可以通过CSS的position: fixed或position: sticky属性结合动态样式控制来实现。以下是具体实现方式: 使用CSS固…

uniapp 3.0

uniapp 3.0

uniapp 3.0 核心特性 uniapp 3.0 是 DCloud 推出的跨端开发框架升级版本,支持一套代码编译到 iOS、Android、Web 及各类小程序平台。以下为关键特性与使用要点:…

uniapp真垃圾

uniapp真垃圾

关于对UniApp的评价,存在不同的声音。以下从技术特性、适用场景及常见争议点展开分析,供开发者参考: 技术特性与优势 UniApp基于Vue.js框架,支持多端编译(微信小程序、H5、App等),…

uniapp布局规范

uniapp布局规范

uniapp布局规范 uniapp的布局规范基于Flexbox模型,支持跨平台开发,需兼顾不同设备的适配性。以下是核心布局要点: Flex布局基础 使用Flexbox实现弹性布局,默认display…

怎么运行uniapp

怎么运行uniapp

运行 UniApp 的步骤 安装开发环境 确保已安装 Node.js(建议 LTS 版本),通过命令行验证安装: node -v npm -v 全局安装 Vue CLI 工具: npm inst…