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

原文切换至：https://blog.csdn.net/weixin_48495574/article/details/113504259

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

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

注意跳转链接至网页先要在小程序后台进行配置业务域名，不需要配置完整的路径
错误格式：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
   

在webview将参数传递回小程序

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

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

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

希望此文能帮到您，欢迎留言交流
如转载请加上原文链接