uni-app小程序跳转至网页并互相带参

问题描述：因为uni-app小程序的组件使用出了问题并无法解决，所以另外是用了webview独立开发了一个页面，需要来回跳转并携带参数；官网文档很多写的不详细，写的时候遇到很多坑。

uni-app小程序跳转到webview,小程序提供了web-view标签用于跳转至网页

<web-view src="https://xxx.com?token=123456" @message="messageValue"></web-view>
<!--@message是接收参数的回调-->
<!--token或者userId这种简短的数据可通过url传参进行传递-->

注意跳转链接至网页先要在小程序后台进行配置业务域名，不需要配置完整的路径
错误格式：https://baidu.com/www/index

webview页面进行参数接收，建议写在mounted生命周期中。

let value = window.location.search; //获取url从?开始后面的字符
console.log('携带的参数：', value);
this.token = value.substring(value.indexOf('=') + 1, value.length);       //获取token
console.log('token：', this.token);

现在小程序跳转到网页并且携带参数已完成，注意url传参最长为256字节，如果超过，官网并没有提供其他的参数传递接口，如果有业务需求需要与后端配合让后端，让后端写一个接口使用网络请求实现参数传递。

从webview跳转至小程序，并携带参数

首先要在webview中引入微信的js-sdk与uni-app的js-sdk

	//微信js-sdk
   <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>
	//uni-app js-sdk
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

在webview将参数传递回小程序

//传递参数
uni.postMessage({
    data: {
       action: this.round	//这是传递的参数可任意类型不受长度
   }
});

//返回至上一页
uni.navigateBack({
    delta: 1
})

在小程序页面接收参数，接收后用一个全局变量赋值或者写入缓存就好啦
使用web-view里的message这个事件去接收

<template>
	<view>
		<web-view :src="hosd" @message="messageValue"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		onLoad() {
			
		},
		methods:{
			messageValue(e){
				console.log("接收的参数：",e);
				let value=e.detail.data[0].action;
				console.log('接收的值',value);
			}
		}
	}
</script>

希望此文能帮到您，欢迎留言交流