uniapp 用web-view嵌套网页地址并传参

小程序登陆后把token和openId 对应传到pc端 pc端有两套一套pc端代码和适应移动端的代码 嵌套的是适应移动端的代码

1.uniapp

javascript 复制代码
<template>
	<view class="main">
		<u-navbar :fixed="true" :autoBack="false" @leftClick="goBack"></u-navbar>
		<web-view :src="url" @message="message"></web-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				url: '',
				token: '',
				canBack: false,
				openId: ''
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token');
			this.openId = uni.getStorageSync('openid');
			this.url = 'http://192.168.31.190:8888/mobile/?token=' + encodeURIComponent(this.token) + '&openId=' +
				encodeURIComponent(this.openId)
			console.log(this.url)
		},

	
		methods: {
			message(event) {
				console.log(event.detail.data);
			},


		},

	}
</script>
<style>
	.main {
		width: 100%;
		height: 100vh;
	}
</style>

2.vue3+vant pc端接收参数

javascript 复制代码
const token = ref("")
const openId = ref("")
onMounted(() => {
  var url = window.location.href;
  console.log(url)
  var regex = /[?&]token=([^&#]+)/; // 匹配 ? 或 & 后面跟 token= 开头的部分
  var regexId = /[?&]openId=([^&#]+)/; // 匹配 ? 或 & 后面跟 token= 开头的部分
  var match = url.match(regex);
  token.value = decodeURIComponent(match[1]);
  openId.value = decodeURIComponent(url.match(regexId)[1]);
})
相关推荐
上单带刀不带妹33 分钟前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
11054654011 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax2 小时前
在图片没有加载完成时设置默认图片
前端
OEC小胖胖2 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
你怎么知道我是队长2 小时前
C语言---编译的最小单位---令牌(Token)
java·c语言·前端
一枚前端小能手3 小时前
🔥 Vue状态管理越写越乱,Pinia拯救了我
前端
cloudcruiser3 小时前
Apache HTTP Server:深入探索Web世界的磐石基石!!!
前端·其他·http·apache
一个专注api接口开发的小白4 小时前
手把手教程:使用 Postman 测试与调试淘宝商品详情 API
前端·数据挖掘·api
织_网4 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
vvilkim4 小时前
深入理解 Spring Boot Starter:简化依赖管理与自动配置的利器
java·前端·spring boot