uniapp app和H5网页的通信 app嵌套H5通过webview

app发送信息给H5

这个很简单，只要在网址上面携带参数就可以

上面的例子是在app里面通过webview来嵌套网页，通过src的地址，可以携带参数，这样打开网页通过网址就可以获得传过来的参数

重点讲解网页发送信息给app

网页给app发送信息

官网给的列子只有html网页，因为业务的需求，vue和uniapp里面都测试可以
官网讲解

重点就是这个js，只有引入了这个js，才能实现通信

html的网页

首先引入js文件

    <script type="text/javascript" src="https://unpkg.com/@dcloudio/[email protected]/index.js"></script>

然后在添加如下代码

document.addEventListener('UniAppJSBridgeReady', function() {
// 通过当前代码，可以获取环境信息
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
// 通过如下代码，发送信息给app
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
}）

vue的网页

在index.html中引入js文件

<script type="text/javascript" src="https://unpkg.com/@dcloudio/[email protected]/index.js"></script>

在main.js中添加如下代码

document.addEventListener('UniAppJSBridgeReady', function () {})

在需要的vue页面，创建方法，点击触发

// 定义一个发送信息的方法，通过点击触发即可
const sendData = () => {
  uni.postMessage({
    data: {
      action: '6666666',
    },
  })
}

uniapp里面的网页

新建的文件必须满足当前目录结构，官网要求。
一样需要引入js文件，html文件的写法和第一中一样。这种写法只不过是和app可以在一个项目，webview的引入直接通过文件夹的路径即可。

app接收网页的信息

vue的文件通过message方法接收
nvue的文件通过onPostMessage方法接收
tips：vue和nvue编译的结果不同，nvue偏向原生。

代码如下，这里以nvue页面为例

// 通过onPostMessage接收
<web-view style="width: 375px;height: 400px;" src="http://10.197.105.190:5201/#/test-login" @onPostMessage="getPostMessage" ></web-view>
// 定义接收的方法
	const getPostMessage = (msg) => {
		console.log(11,msg)
	}

问题汇总

1 接收不到发送的信息

首先要判断UniAppJSBridgeReady这个方法有没有进来，其次环境变量打印是否成功

2 js文件路径的问题

不行就替换当前https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

js文件的稳定性，建议把js文件下载到本地，然后引入