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