近期开发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`
 }
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐