uni-app 实现功能例子

浏览外部网页

创建一个专用来浏览外部的组件页面：pages/webview/index.vue

vue

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>
 
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 定义响应式变量
const url = ref('');
// 在 onLoad 生命周期中接收参数
onLoad((e) => {
	console.log('页面参数：',e.url);
  url.value = e.url;
});
</script>

在pages.json中定义路由：

json

{
			"path" : "pages/webview/index",
			"style" : 
			{
				"navigationBarTitleText" : "",
				"enablePullDownRefresh": false
			}
		}

在其他页面中跳转到这个路由+查询参数：

vue

<script setup>
	const goTo = (url) =>{
		uni.navigateTo({
			url:'/pages/webview/index?url='+url
		});
	};
</script>

页面跳转时传递参数

起始页：

uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

接收页面：

html

<script setup>
import { ref, onMounted,getCurrentInstance } from 'vue';

const id = ref('');
const name = ref('');

//加载完成后运行
onMounted(() => {
  //获取当前组件的实列，并得到它的路由查询参数
  const options = getCurrentInstance().proxy.$route.query;
  //查询参数赋值
  id.value = options.id;
  name.value = options.name;
});
</script>