近段时间,公司为了节省劳动力,让我彻底转行uni-app,然而我搜了一下boss,发现uni-app根本没有使用环境,导致我时隔三年又重新装上了boss,智联,51job等一些友好App。
虽然很抗拒,但是本着职业道德,还是要好好干活的,这不,就遇到了一个比较有脑洞的一个需求:
uni发布成h5,用webclip方式搞到苹果手机上(iOS界俗话说的永不掉签)
大家都知道,webclip也就是书签形式的打开一个网页而已,所以就有所谓的地址栏在顶部一直显示着,类似这样:
WechatIMG6.png
看到画红框的地方了么,需求就是为了去掉这个东西,就是为了这个,我研究了一两天。在这里就算做个记录吧。
踩坑
- 修改页面<meta>配置。(网上最多的方法),例如:
<meta name="apple-mobile-web-app-capable" content="yes" />
还有很多修改meta的方法这就不一一列举了,我都试了,然而是没卵用的,遇到这个东西的人应该也不少。
解决办法
iframe内联框架
既然内部改不了,那就干脆彻底不改uni生成的东西了,外表搞个壳,撑开不就完了。
- 首先写一个html文件
- html文件里使用iframe框架,返回h5项目的首页即可
具体的html文件写法,拿走不谢:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>
首页
</title>
</head>
<body onload="refit()" style="padding:0;margin:0;">
<iframe src="/h5/" style="width:100%;height:100%;" frameborder="0" scrolling="yes" id="bdIframe"></iframe>
</body>
</html>
<script>
function refit(){
oIframe = document.getElementById('bdIframe');
deviceWidth = document.documentElement.clientWidth;
deviceHeight = document.documentElement.clientHeight;
oIframe.style.width = (Number(deviceWidth)) + 'px';
oIframe.style.height = (Number(deviceHeight)) + 'px';
}
</script>
然后就大功告成,效果如图:
WechatIMG7.png
是不是很像原生!!你要是因为我解决了,憋说话,单击❤️。