ios网页免签封装APP隐藏顶部网址教程，详细干货分享
这个教程在互站网要花五百块钱买，里面的傻瓜式js还有人做成工具利用信息差卖，而且全网都找不到其它的可用教程。
一般情况下，很多站长会把自己的网站手机版打包成app，安卓的自然简单，直接用网上各种工具或者一些比如Hbuilder之类的IDE直接打包。但是ios网上就没有什么打包教程了，如果打包成原生ipa文件甚至还需要证书，或者手机越狱才能安装，但是实际上ios网页打包是有解决方案的，具体可以看我之前的教程（这个教程很重要，涉及到免签打包工具），建议看的时候无视之前的，直接从“打包苹果应用”看起：
虽然教程里面是uniapp的代码，但是实际上和网页打包一致，所以有网页打包需求的可以直接参考之前的教程，下载工具完成打包即可。
但是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后缀的文件，将以下的代码放进去，封装的网站首页修改成你的主页地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<meta name="apple-mobile-web-app-title" content="Meta Game">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="apple-touch-startup-image" href="/startup.png">
<title>Meta Game</title>
<style>
*{
margin: 0;
padding: 0;
}
html {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
margin: 0px;
overflow: hidden;
box-sizing: border-box;
padding: 0;
}
iframe {
border: 0px;
height: 100vh;
overflow: hidden;
width: 100%;
}
</style>
</head>
<body>
<iframe frameborder="0" scrolling="auto" src="你的网址" mce_src="你的网址"></iframe>
</body>
</html>
然后重新回到打包软件，将里面的web地址一直精确到刚才新建的html文件。这样再通过ios设备打开app，就会发现点击链接也不会跳出头部了。这段代码的原理就是，新建一个节目，用iframe嵌套的原理包裹整个网站，所以里面的网站无论怎么点击，都没有出现页面地址的变更，于是就不会出现头部了。
同时，根据ios Web Clip的特性，还可以定义图标和启动图。
<link rel="apple-touch-icon" href="/icon.png">
<link rel="apple-touch-startup-image" href="/startup.png">
<link rel="apple-touch-icon"
href="/icon.png">：该标签指定了网站添加到主屏幕上时的图标，以供用户识别和点击。可以使用 PNG 或 JPG
格式的图片，建议尺寸为 180px x 180px，透明度为 0 或 1 的区域将被 iOS
系统自动填充为白色或黑色。该标签也可以使用多个尺寸的图片，以便不同大小的设备显示不同的图标。 <link
rel="apple-touch-startup-image"
href="/startup.png">：该标签指定了网站启动时的加载画面，可以使用 PNG 格式的图片，建议尺寸为
640px x 1136px（iPhone
5），不同的设备也可以使用不同的尺寸。启动画面应该尽量简洁，以保证快速加载和用户体验。如果未指定该标签，则会显示默认的白色背景。
问题四：状态栏颜色是黑色，和主题不匹配
感谢泽泽社大佬提供的方案，可以修改第三步的html文件，头部加上以下代码，自己摸索设置代码中的颜色值，就可以修改状态栏颜色（已经确认最新几款苹果手机都兼容）
<meta name="theme-color" content="#1972F8" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1C4D98" media="(prefers-color-scheme: dark)">
还有一种方式，就是直接申明状态栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black就是黑色
以上就是所有的解决教程，前两个问题其实网上都有，但是第三个是真的全网都搜索不到，我自己解密出来的。如果去淘宝封装价格都是好几百，甚至还有五百收徒的商品，简直太可怕了。不过经过了以上全部步骤之后，你的网站就可以免签打包成ios应用，给任何ios手机的人安装了。