排行榜 统计
  • 建站日期:2017-05-08
  • 文章总数:446 篇
  • 评论总数:6393 条
  • 分类总数:25 个
  • 最后更新:10月9日

ios网页免签封装APP隐藏顶部网址教程,详细干货分享

本文阅读 5 分钟
广告

这个教程在互站网要花五百块钱买,里面的傻瓜式js还有人做成工具利用信息差卖,而且全网都找不到其它的可用教程。
一般情况下,很多站长会把自己的网站手机版打包成app,安卓的自然简单,直接用网上各种工具或者一些比如Hbuilder之类的IDE直接打包。但是ios网上就没有什么打包教程了,如果打包成原生ipa文件甚至还需要证书,或者手机越狱才能安装,但是实际上ios网页打包是有解决方案的,具体可以看我之前的教程(这个教程很重要,涉及到免签打包工具),建议看的时候无视之前的,直接从“打包苹果应用”看起:

uniapp苹果ios端免签打包带分发,转换思路玩法

虽然教程里面是uniapp的代码,但是实际上和网页打包一致,所以有网页打包需求的可以直接参考之前的教程,下载工具完成打包即可。
1.jpg
但是ios打包完成后,会有三个明显的问题:

1.顶部始终会出现不安全提示
2.普通的网页情况下,点击任何链接都会跳出类似浏览器的新页面,或者干脆真的到浏览器了
3.点击链接会跳出带网址的头部,使用起来不像app

解决方案如下:

问题一:顶部始终会出现不安全提示

这是最好解决的问题,那就是直接给网站配置https,也就是配置下ssl证书,再重新用工具打包,就可以解决第一个问题。

问题二:普通的网页情况下,点击任何链接都会跳出到浏览器

这个问题的解决方法,是在网页的头部head或者通用的某个页面区块或者通用js中,加入如下代码:

<script type="text/javascript">
if(("standalone" in window.navigator) && window.navigator.standalone){
    var noddy, remotes = false;
    document.addEventListener('click', function(event) {
    noddy = event.target;
    while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
    noddy = noddy.parentNode;
    }
    if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
    {
    event.preventDefault();
    document.location.href = noddy.href;
    }
    },false);
}
</script>

上面这段js的原理是,识别到ios设备浏览,并将所有的可跳转a标签,都变为js动态跳转形式,这样就可以防止跳出到浏览器。但是还会存在第三个问题,那就是点击任何链接,跳出的页面都会带一个有网址的头部,非常影响界面效果和体验。

问题三:点击链接会跳出带网址的头部,使用起来不像app

在网站的根目录(其它目录也可以),新建一个html后缀的文件,将以下的代码放进去,封装的网站首页修改成你的主页地址。

<html style="font-size: 96px;">
<head>
<meta http-equiv="Content-Type" content="text/html;" >
<meta http-equiv=" x-ua-compatible"="">
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
 </head> 
<body scroll="no">
<style mce_bogus="1">
body { margin: 0px;  }
iframe {border: 0px;}
</style>
<iframe id="frame3d" name="frame3d" frameborder="0" width="100%" scrolling="auto" style="margin-top: -4px;" οnlοad="this.style.height=document.body.clientHeight-84" height="100%" src="你的网址" mce_src="你的网址"></iframe> 
</body>
</html>

然后重新回到打包软件,将里面的web地址一直精确到刚才新建的html文件。这样再通过ios设备打开app,就会发现点击链接也不会跳出头部了。这段代码的原理就是,新建一个节目,用iframe嵌套的原理包裹整个网站,所以里面的网站无论怎么点击,都没有出现页面地址的变更,于是就不会出现头部了。

以上就是所有的解决教程,前两个问题其实网上都有,但是第三个是真的全网都搜索不到,我自己解密出来的。如果去淘宝封装价格都是好几百,甚至还有五百收徒的商品,简直太可怕了。不过经过了以上全部步骤之后,你的网站就可以免签打包成ios应用,给任何ios手机的人安装了。

您的大名:
万水千山总是情,给个打赏行不行。 打赏
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/2400/
SASS @while
« 上一篇 03-17
2021最新Conflux挖矿教程,国产数字货币高效率挖矿
下一篇 » 04-18
广告

发表评论

V注册会员 L评论等级
R5 条回复
  1. fudongxuVLv.1 说道:
    2021-10-13     Win 10 /    Chrome

    大佬,我的整体布局样式缩小了,这个问题有办法解决吗?

    1. 不暇VLv.6 说道:
      2021-10-13     Android /    Chrome

      @fudongxu

      这个要看你代码怎么写的,只能从项目里面优化吧。

  2. LeoChenVLv.1 说道:
    2021-07-30     Win 10 /    UC浏览器

    大神您好,想请教您一个问题,隐藏顶部网址之后,点h5自带的返回按钮就一切正常,但是,从侧边返回就会屏闪一下,好像重刷页面的感觉,请问怎么解决?谢谢

  3. 小小叶子Lv.1 说道:
    2021-06-05     Win 10 /    Chrome

    大神您好,关于第三点隐藏顶部网址的,在IOS13里是可以实现的,但在IOS14里就无效了,请问可有破解的方法,求助!!

    1. 不暇VLv.6 说道:
      2021-06-05     Android /    Chrome

      @小小叶子

      你可以通过邮箱的方式,把你的网址和ios14下的效果截图一起发给我。

没有更多评论了

作者信息

热门文章

标签TAG

热评文章