1***@qq.com
1***@qq.com
  • 发布:2023-03-17 12:27
  • 更新:2023-08-03 15:26
  • 阅读:887

求助uniapp web-view 实时双向通讯问题

分类:uni-app

问题描述:

uniapp 安卓端 web-view 和 h5进行通讯的时候。

看官方文档来说 h5->安卓是 uni.postMessage方法,安卓到h5是 eval() 方法处理的,这都没有问题。

但是怎么能把这两部给联合起来,成一个函数链 即 h5->发送数据->安卓->返回数据。

他这两步都是单独的步骤,一个是h5给安卓通讯,一个是安卓调用h5的函数。如果是一次请求的话,数据怎么能返回?

这个问题挺重要的,在网上找了很多办法都没有解决。现在是发送数据接收不到返回值。两个步骤之间是断的。

请大佬解惑

2023-03-17 12:27 负责人:无 分享
已邀请:
BoredApe

BoredApe - 有问题就会有答案。

web-biew:

需要引入 uni.webview js ==> <script src="static/uni.webview.1.5.4.js"></script>

uni.webView.postMessage({  
    data: {  
        type: '__JSBridge',  
        action: 'chooseImage',  
        callBackFn: 'chooseImageCallBack',  
    },  
});  
window.chooseImageCallBack = function(data) {  
    resolve(JSON.parse(data));  
};

uni-app:

<web-view :src="src" @onPostMessage="getH5Message" @message="getH5Message" ></web-view>  

getH5Message(bridgeData) {  
    const {  
        detail: { data: [{ action, type, params, callBackFn }] },  
    } = bridgeData;  

    // xxxx  
    page.evalJS(`${callBackFn}('${JSON.stringify({ tempFilePaths })}')`);  
}  
  • 1***@qq.com (作者)

    谢谢大佬,但是好像还是没有联系到一块。你这个代码的意思是 H5->安卓->h5的新函数中。老的函数链条已经中断了。能否有在一个函数内完成 H5->请求数据->安卓-返回数据的解决方案,或者是相关的封装方案。

    2023-03-17 15:09

  • BoredApe

    回复 1***@qq.com: 你把第一段 代码 使用promise做个封装。

    2023-03-17 16:05

  • 1***@qq.com (作者)

    回复 BoredApe: 谢谢大佬,我的思路错了,这两天走了弯路,我尝试一下你的写法。

    2023-03-23 12:16

  • 菜鸟107

    回复 1***@qq.com: 大佬请问解决了吗,求指教

    2024-01-29 18:46

要回复问题请先登录注册