相关知识点：
【web-view加载h5】小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案

【web-view加载h5】uniapp中使用web-view相互通信+uniapp向webview中实时通信

一、概要

1. uniapp打包成的小程序、app，在某些场景下需要访问第三方或其他上线的h5页面，并要实现交互通信，一般就是h5页面点击某个按钮，需要通知应用做出下一步的操作。
2. 注意：根据官方文档提供的例子，APP、微信小程序、H5都没问题，但是百度小程序必须添加业务域名通信功能才能生效。
3. 下面的代码还实现了应用向h5页面即时通讯，关键词:‘#’。
4. h5中获取小程序或父级传递的参数参考该文章的第三点：【web-view加载h5】小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案

二、uniapp页面

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

三、h5页面

	
	
	
	



	
web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。
	

		navigateTo
		redirectTo
		navigateBack
		reLaunch
		switchTab
	
	

		
网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。
		

			postMessage
		
	
	
	
	
	
	

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145

参考：https://uniapp.dcloud.io/component/web-view

四、uniapp向webview中实时通信

其中之一就是小程序不能向内置的webview实时传参，因为只能通过url地址首次传递数过去。官方不开放接口看起来无可奈何。

但是世上无难事儿，只怕有心人，作为一个合格的程序员就应该是一个有心人。不废话：诀窍就是通过url地址传递参数给webview。但是问题来了，动态的参数会使webview重新加载页面，页面一刷新，一切都白搭。但是的但是，小程序也有漏洞，千防万防就是防不住我呀，url地址不是有“锚”连接吗（“#”），对，就是这个符号。在url地址里面添加这个符号，后面紧跟动态参数，比如：http://p.vr100.com/index.php?m=bbs#1,这样webview地址就不会重新加载，参数1也过去了，然后在h5页面里面获取url地址，完美解决！

h5中：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47

使用：

getUrlData.init(function(res){
	console.log(res);//返回的格式例如 {type: 'myType', data: 1}
})

• 1
• 2
• 3

效果：

需要注意的点：

图中的这个type名称可以根据自己的需求更改，需要什么就改什么！