uni-app 外包插件需求 兼容鸿蒙next、安卓、ios weiview双向通信

发布于 1周前 作者 sinazl 来自 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消息发送
    等等

  4. 接收和返回消息 已同步的方式进行。
    参考插件：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教程
2 回复

可以做 专业插件开发 q 1196097915 主页 https://ask.dcloud.net.cn/question/91948

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


针对您提出的uni-app外包插件需求，实现兼容鸿蒙next、安卓、iOS的WebView双向通信，以下是一个简化的代码案例，展示了如何在uni-app中实现这一功能。请注意，由于不同平台的WebView实现细节可能有所不同，这里提供一个通用的思路和基础代码框架，实际开发中可能需要根据具体平台进行调整。

uni-app前端代码

在uni-app项目中，您可以使用plus.webview对象与Native进行通信。以下是一个简单的示例：

// 发送消息到Native
function sendMessageToNative(message) {
    plus.webview.currentWebview().evalJS(`
        window.postMessage('${JSON.stringify(message)}', '*');
    `);
}

// 监听来自Native的消息
if (window.addEventListener) {
    window.addEventListener('message', function(event) {
        const message = JSON.parse(event.data);
        console.log('Received message from Native:', message);
        // 处理接收到的消息
    }, false);
} else if (window.attachEvent) {
    window.attachEvent('onmessage', function(event) {
        const message = JSON.parse(event.data);
        console.log('Received message from Native:', message);
        // 处理接收到的消息
    });
}

Native端代码（以Android为例）

在Android端，您需要创建一个WebView并设置其WebChromeClient和WebViewClient来处理JavaScript接口调用和消息传递。以下是一个简化的示例：

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // 处理URL Scheme，例如：jsbridge://...
        return super.shouldOverrideUrlLoading(view, request);
    }
});

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 处理来自WebView的消息
        if ("postMessage".equals(message)) {
            String jsonMessage = defaultValue;
            // 解析并处理JSON消息
            result.confirm("");
            return true;
        }
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
});

webView.loadUrl("file:///android_asset/index.html"); // 加载uni-app打包后的HTML文件

注意事项

  1. 平台差异：鸿蒙next、iOS平台的WebView实现与Android可能有所不同，需要根据各自平台的文档进行调整。
  2. 安全性：在生产环境中，务必注意WebView与Native通信的安全性，避免XSS攻击等安全问题。
  3. 调试：使用开发者工具（如Chrome DevTools、Xcode等）进行调试，确保通信机制在不同平台上都能正常工作。

以上代码仅为示例，具体实现需根据项目需求进行调整和优化。

回到顶部