uniapp web-view控制父页面跳转

时光不弃青栀

已于 2022-09-30 15:17:08 修改

阅读量1.5k

点赞数

文章标签：前端 uni-app javascript

于 2022-09-29 19:46:57 首次发布

本文链接：https://blog.csdn.net/qingzhid/article/details/127112616

版权

本文介绍了如何在uniapp项目中嵌入一个已有的pc页面，并处理返回页面的问题。通过引入uniapp的web-view.js，监听'UniAppJSBridgeReady'事件，实现从H5到uniapp页面的跳转。同时，提供了前端和后端结合的判断方式，根据用户是否来自移动端来决定跳转行为。

摘要由CSDN通过智能技术生成

近期开发uniapp项目，有一功能，需要在h5嵌套一个已有的pc 页面，但是pc的页面已经写死了返回的页面，uniapp上web-view嵌套使用的话需要进行适配,对于不是很熟悉前端的xdm来说还是比较晕的，直接上代码：

<!-- uni 的 SDK，必须引用，路径换成你们自己的路径，我这使用的是thymeleaf，根据你们自己获取方式即可。 -->
<script type="text/javascript" th:src="@{/static/js/uniapp/uni-webview-1.5.4.js}"></script>
<script>
	var jumpToUniappFunc;
	document.addEventListener('UniAppJSBridgeReady', function() {
	   uni.getEnv(function(res) {
	       console.log('当前环境：' + JSON.stringify(res));
	   });
	   jumpToUniappFunc = ()=>{
	       uni.navigateTo({
	         url:'/pages/xxxx/instance/instance-list'
	       })
	   }
	});
</script>

uniapp的web-view.js自行去官网下载：
https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

然后使用JS判断是否来自H5或APP，是的话调用jumpToUniappFunc()进行跳转即可，isFromMobile是在后端通过request的User-Agent判断的，这里就不展示代码了。

// 是否来自移动端，true=是
var isFromMobile = [[${isFromMobile}]]

function toWaitReadList() {
    if(isFromMobile){
    	 // 移动端直接跳转
         jumpToUniappFunc()
         return
     }
     // pc跳转
     window.history.forward(1);
     window.location.href = `${adminPath}/xxxxx/xxxxx/list`
 }