uniapp小程序与webview通信

前言

小程序webView中嵌套H5页面，难免会遇到小程序与h5页面进行数据通信或交互的场景。比如H5需要获取小程序的登录token、或者H5提交表单之后，操控小程序的路由让其返回某个页面。

1.uniapp向H5发送数据

在 web-view 中只需要通过 URL 就可以向 H5 进行传参，H5页面根据对链接进行截取获得参数。
uniapp：

<template>
	<view>
		<web-view src="https://XXX.com?name=lisa">web-view>
	view>
template>
1
2
3
4
5

H5：

  created() {
    let query = this.getQuery("name"); //获取 uni-app 传来的值
  },
  methods: {
    getQuery(name) {
  	  var name, value;
  	  var returnData = {};
  	  var str = location.href; //取得整个地址栏
  	  var num = str.indexOf("/?");
  	  str = str.substr(num + 2); //取得所有参数   stringvar.substr(start [, length ]
  	  var arr = str.split("&"); //各个参数放到数组里

  	  for (var i = 0; i < arr.length; i++) {
    	num = arr[i].indexOf("=");

    	if (num > 0) {
      	  name = arr[i].substring(0, num);
      	  value = arr[i].substr(num + 1);
      	  returnData[name] = value;
    	}
  	  }
  	  return returnData;
	}
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.H5控制uniapp navigateTo、reLaunch等路由

html需要引入uniapp的SDK：

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
1
2

document.addEventListener("UniAppJSBridgeReady", function() {
	document.getElementById("form_page").onclick = function() {
		uni.reLaunch({
			url: "../login/login",
		});
	};
});
1
2
3
4
5
6
7

可以使用的uni方法有如下：