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

雨点打透心脏的1/2处 2022-10-25 14:24 135阅读 0赞

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

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

<web-view src="https://xxx.com?token=123456" @message="messageValue"></web-view>

注意跳转链接至网页先要在小程序后台进行配置业务域名，不需要配置完整的路径  
错误格式：https://baidu.com/www/index  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70]  
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>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70]: /images/20221024/9f5b1f506c884dcfb9b6803cf1a31399.png