Vue3项目页面跳转回Uniapp页面，UniApp项目中集成Vue3

最新推荐文章于 2025-05-06 18:28:10 发布

原创最新推荐文章于 2025-05-06 18:28:10 发布

· 606 阅读

6 ·

版权

文章标签：

#uni-app #前端 #vue.js

背景：在uniapp中嵌套一个已经完善的Vue3项目，Vue3项目中有一个回到uniapp页面的功能。

Uniapp代码:

Uniapp-login.vue
1.使用uni.navigateTo跳转web-view.vue组件

			<cover-view class="btn-go">
				<cover-view style="height: 100rpx;line-height: 100rpx;z-index: 100;" @click="openLink"> 点击进入
				</cover-view>
			</cover-view>
          methods: {
			openLink() {
				uni.navigateTo({
					url: `/pages/video/components/web-view`
				});
	        },
		  }

Uniapp-web-view

2.使用web-view标签承载网页，详细请参考官网：web-view | uni-app官网

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

<template>
	<view class="container">
        <web-view :src="url"></web-view>
    </view>
</template>
<script>
	export default {
		data() {
			return {
				url: '你的Vue3项目线上地址（要打开的外部链接）',
			};
		},
	}
</script>

从Vue3项目返回Uniapp页面

Vue项目代码：

1.index.html 引入线上文件文件，地址：https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

也可以放在下面内去引入

  <!-- uniapp -->
  <!-- uni 的 SDK，必须引用。 -->
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

2.gridmapApp.vue

<div @click="goToLogin" class="leave1">
          <img :src="signOutGreen" alt="" :width="30" />
</div>
onMounted(() => {
    nextTick(() => {
    // 初始化uni.webview
    document.addEventListener("UniAppJSBridgeReady", function () {
      // alert("初始化uniapp的API成功");
    });
  });
}
//退出
function goToLogin() {
  uni.webView.getEnv(function (res:any) {
    // alert("当前环境：" + JSON.stringify(res));
  });
  uni.webView.navigateTo({
    url: "/pages/video/video",
  });
}