webview内嵌h5和微信小程序的相互跳转

1.在微信小程序里面使用内嵌h5页面，需要主要要在微信公众平台：开发管理——开发设置——业务域名中配置你内嵌的页面用到的域名。
2.微信小程序跳转到h5页面使用标签:
主要如果页面跳转到这个webview标签页面，src后面的参数是带不过去的比如：‘…/webview/webview?src=https://api.com/list?id=1&token=sdjiwboaxne’
你会发现list后面的参数都带不过去，你需要进行编码一下：

let src = "https://api.com/list?id=1&token=sdjiwboaxne";
wx.navigateTo({
url:'../webview/webview?src='+ encodeURIComponent(src)
})

<template>
	<view>
		<web-view :src="src" :webview-styles="webviewStyles"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "",
				webviewStyles: {
					progress: {
						color: '#019aff'
					}
				}
			}
		},
		onLoad(param) {
			this.src = decodeURIComponent(param.src);
		}

3.在h5页面完成操作跳转到小程序页面，需要用到官方的：

所以我们要注意现在vue项目里面引入微信的sdk，我是使用npm下载引入的。

npm install weixin-js-sdk --save

在使用的页面引入：

import wx from 'weixin-js-sdk'


//跳转的方法：
toWX(){
//这里还是要注意一下你跳转的页面，如果跳转的页面是首页之类带有tabbar的，你需要使用:
  wx.miniProgram.switchTab({url:'/path/to/page'})
  //其他页面你可以使用
  wx.miniProgram.navigateTo({url: '/path/to/page'})
}

注意点：
如果web-view是tab页面，要实现点击切换tab刷新web-view页面可以使用：

//当前是 tab 页时，点击 tab 时触发
onTabItemTap: function() {
 //在这里写给web-view要跳转页面赋值方法。
},

如果要刷新web-view页面，可以在webviewUrl后面拼接时间戳或者版本号用来解决缓存问题，web-view的缓存是很严重的，因为缓存问题会有各种各样的问题。
版本号可以调用接口来实现，时间戳可以看下面：

let randStr = new Date().getTime() + '' + Math.round(Math.random() * 10000);
let webviewUrl = path +'?randStr=' + randStr;