uni-app 兼容鸿蒙next、安卓、ios weiview双向通信

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

uni-app 兼容鸿蒙next、安卓、ios weiview双向通信 我们愿意为您提供的技术支持和服务支付费用。

公司电商项目是使用的apicloud（壳子）+html5 实现的
现在因为需要将项目整体迁移至uni-app 并且需要兼容鸿蒙next系统
迁移后存在以下问题：

1、uni-app 通过webview打开应用外部界面，外部界面需要调用uni-app壳子的相关api。如：定位、扫码、权限申请、图片上传、数据缓存/获取 等功能。
问题：html5界面可以发送消息到壳子上，壳子接收后需要将定位信息同步返回至html5界面。

案例：
a. 在订单评价的时候，用户需要上传图片，我需要调用uni-app的uni.chooseImage，用户选择图片并给webview页面进行返回。
b. 扫码: 页面调用uni-app的uni.scanCode 然后将结果给webview页面进行返回
c. 定位：获取用户当前位置信息，同理给webview页面进行返回
d. 监听器：当前界面发送请求，告诉其它webview打开的界面进行刷新。如：退出登录、切换账户，理论上应该 其它webview界面数据应该重新刷新。这个比较复杂

  1. 使用webview消息接收
  2. vue组件间的通信【这里我们自己可以实现】
  3. 使用webview消息发送
    等等

2、接收和返回消息 已同步的方式进行。
参考插件：uni-js-bridge。
插件地址：https://gitee.com/guome/uni-js-bridge【但是这个不支持鸿蒙】

案例：
客户端（壳子）

this.$refs.webViewBridge.registerHandler('nativeShow', (data, callbackFunction) => {  
    uni.showToast({  
        title: 'nativeShow' + JSON.stringify(data),  
        icon: 'none'  
    })  

    // 调用此函数，触发H5回调，里面的参数是给H5用的  
    // 注意，如果不调用callbackFunction那么H5就无法触发回调函数  
    callbackFunction({  
        toH5Data: '这里的参数是提供给H5的回调函数的' // key是可以随便取的  
    })  
})

H5端

UniJsBridge.callHandler(  
    "nativeShow",  // 注意这里的名字必须和上面的对应上  
    { nativeShowData: "nativeShow" },  // 这个参数是传递给uni-app的  
    res => {  
        // res:就是上面的callbackFunction的参数  
        // 注意：如果uni-app不调用callbackFunction,那么这个回调函数是不会执行  
        //这里可以执行我的业务逻辑  
        alert(JSON.stringify(res));  
    }  
);

更多关于uni-app 兼容鸿蒙next、安卓、ios weiview双向通信的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于uni-app 兼容鸿蒙next、安卓、ios weiview双向通信的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中实现与鸿蒙next、安卓、iOS WebView的双向通信，可以通过uni-app提供的API以及原生平台特定的代码来实现。以下是一个简要的代码示例，展示了如何在uni-app前端页面和原生后端（鸿蒙next、安卓、iOS）之间进行双向通信。

前端（uni-app）代码

在uni-app的前端页面，可以使用plus.bridge.exec方法发送消息到原生端，并使用plus.bridge.recv方法接收原生端发送的消息。

// 发送消息到原生端
function sendMessageToNative(message) {
    plus.bridge.exec('NativeBridge', 'receiveMessage', [message], function(res) {
        console.log('Message sent to native:', res);
    });
}

// 接收原生端发送的消息
plus.bridge.recv('sendMessageFromNative', function(msg) {
    console.log('Message received from native:', msg);
});

// 示例：发送消息
sendMessageToNative('Hello from uni-app!');

后端（原生代码）

鸿蒙next

在鸿蒙next中，你需要实现一个自定义的NativeBridge模块来处理从uni-app发送过来的消息，并通过postMessage方法发送消息回uni-app。

// 伪代码，具体实现需根据鸿蒙开发文档
public class NativeBridge {
    public void receiveMessage(String message) {
        // 处理消息
        System.out.println("Received message from uni-app: " + message);
        
        // 发送消息回uni-app
        // 注意：鸿蒙next的具体API需查阅官方文档
        postMessage("Hello from HarmonyOS!");
    }
}

安卓

在安卓中，你可以通过实现一个JavaScript接口来处理消息。

// WebViewActivity.java
webView.addJavascriptInterface(new WebAppInterface(this), "NativeBridge");

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void receiveMessage(String message) {
        // 处理消息
        Log.d("WebAppInterface", "Received message from uni-app: " + message);
        
        // 发送消息回uni-app
        webView.evaluateJavascript("javascript:handleMessageFromNative('" + "Hello from Android!" + "')", null);
    }
}

iOS

在iOS中，你需要配置WKWebView的WKScriptMessageHandler来处理消息。

// WebViewController.m
[webView.configuration.userContentController addScriptMessageHandler:self name:@"NativeBridge"];

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"sendMessageToNative"]) {
        // 处理消息
        NSLog(@"Received message from uni-app: %@", message.body);
        
        // 发送消息回uni-app
        NSString *jsString = @"handleMessageFromNative('Hello from iOS!')";
        [webView evaluateJavaScript:jsString completionHandler:nil];
    }
}

请注意，上述代码为简化示例，具体实现需根据各平台的开发文档进行调整。

回到顶部