uni-app 与 web-view内嵌网页 双向通信

这里的通信主要测试环境是打包APP端和web-view内嵌网页的双向通信。

一、 内嵌网页向uni-app通信
参考文章：uniapp web-view

1. 内嵌网页向uni-app发消息
   在web-view访问的网页内引入uni.webview.1.5.3.js,待sdk加载完毕后就可以调用方法postMessage。如下：

// index.html


    
        
        
        
    
    
        
    

1. uni-app接收消息
   在web-view存在的组件内写监听message的方法。如下：

效果图

二、 uni-app向内嵌网页通信

1. uni-app向内嵌网页发消息

const
  _funName='msgFromUniapp',
  _data = {
    msg:'msg from uniapp'
  };
const currentWebview = this.$scope.$getAppWebview().children()[0];
currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);

2. 内嵌网页接收消息

window.msgFromUniapp= function(arg) {
  console.log(arg);
  console.log(JSON.stringify(arg));
}

效果图

三、 实现案例

1. 内嵌网页代码

2. uniapp组件代码

有勇气并不表示恐惧不存在，而是敢面对恐惧、克服恐惧。