0

uniapp webview如何与H5相互通信

 2 years ago
source link: https://segmentfault.com/a/1190000041352139
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

uniapp webview如何与H5相互通信

2222.gif

h5封装的代码可以从这里获取
git：https://github.com/MyButifull...

一、uniapp如何接收H5发送的消息

uniapp端：
使用@message来监听H5的消息
image.png

H5端：
index.htmel 导入 uni.webview.js 最新版地址：https://js.cdn.aliyun.dcloud....
这里有一个坑安卓端运行时会加载不了这个JS，所以要加这个js代码拿下来本地再引入
image.png

运行时监听uniappjs加载完成，加载完成后可使用 window.uni.postMessage 发送消息至uniapp底座。 发送内容要写在data里

document.addEventListener('UniAppJSBridgeReady', function(e) {
    uni.getEnv(function(res) {
      console.log('当前环境：' + JSON.stringify(res));
    });

    // 向uniapp底座发送消息
    uni.postMessage({
      data: 'H5发送的消息'
    });
  });

二、uniapp发送消息给H5

image.png


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK