H5页面打包成IOS应用（描述文件）

wen854854321

已于 2023-06-18 02:08:39 修改

阅读量2.6k

点赞数 1

文章标签： ios

于 2023-06-13 15:12:58 首次发布

本文链接：https://blog.csdn.net/wen854854321/article/details/131188762

版权

第一种方案

使用到的工具：

Iphone 配置实用工具

具体步骤：

导出后就大工告成了，打开Safari 下载这个文件就可以安装了~

第二种方案：（推荐）

1.下面这个代码根据占位符做修改后将内容copy到后缀为.mobileconfig 的文件中即可在Safari中下载、安装描述文件

代码中占位符解释：

{{$appLogo}} app的base64Logo

{{$appName}} app的名称

{{$appDesc}} app的描述

{{$appUrl}} 要跳转的URl

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PayloadContent</key>
	<array>
		<dict>
			<key>FullScreen</key>
			<true/>
			<key>Icon</key>
			<data>
			{{$appLogo}}
			</data>
			<key>IsRemovable</key>
			<true/>
			<key>Label</key>
			<string>{{$appName}}</string>
			<key>PayloadDescription</key>
			<string>Adds a Web Clip.</string>
			<key>PayloadDisplayName</key>
			<string>{{$appName}}</string>
			<key>PayloadIdentifier</key>
			<string>com.dxong.shiwan.webclip1</string>
			<key>PayloadOrganization</key>
			<string>{{$appDesc}}</string>
			<key>PayloadType</key>
			<string>com.apple.webClip.managed</string>
			<key>PayloadUUID</key>
			<string>4512113F-9DE1-4C24-99C0-B31884D57A22</string>
			<key>PayloadVersion</key>
			<integer>1</integer>
			<key>URL</key>
			<string>{{$appUrl}}</string>
		</dict>
	</array>
	<key>PayloadDescription</key>
	<string>{{$appDesc}}</string>
	<key>PayloadDisplayName</key>
	<string>{{$appName}}</string>
	<key>PayloadIdentifier</key>
	<string>com.72mao.pwa</string>
	<key>PayloadOrganization</key>
	<string>{{$appDesc}}</string>
	<key>PayloadRemovalDisallowed</key>
	<false/>
	<key>PayloadType</key>
	<string>Configuration</string>
	<key>PayloadUUID</key>
	<string>150E8B78-FC38-42FD-8924-E01985DEB363</string>
	<key>PayloadVersion</key>
	<integer>1</integer>
</dict>
</plist>

提示：

如果出现手机顶部导航为黑色的情况下可以使用：以下Html代码做嵌套处理。
后期补充：上面那个问题可以参考ios的官方文档：Supported Meta Tags

<!DOCTYPE html>
<html tag=ymclip15419>
<head>
<meta charset=utf-8>
<meta name=viewport content="viewport-fit=cover,user-scalable=no,width=device-width,initial-scale=1">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=theme-color content=#ffffff>
<style>
html, body, iframe {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	line-height: 0
}
</style>
<link href=https://at.alicdn.com/t/font_3438210_tsmg2mp81o.css referrerpolicy=no-referrer rel=stylesheet>
<style>
iframe {
	display: none
}

iframe.f {
	display: block
}

.nav {
	height: 48px;
	width: 100%;
	position: fixed;
	font-size: 14px;
	display: table;
	-webkit-user-select: none;
	line-height: initial;
	transition-duration: 0.3s;
	background: #FFFFFF
}

.nav > div[b] {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	position: relative;
	padding-top: 2px;
	cursor: pointer;
	z-index: 2;
	color: #888888
}

.nav i {
	display: block;
	font-size: 22px;
	margin-bottom: 2px
}

.nav .a {
	color: #EC1A5B !important
}
</style>
<style>
.nav {
	border: 1px solid #EEEEEE;
	border-left: none;
	border-right: none;
	left: calc(-100% + 20px);
	bottom: 60px;
	width: calc(100% - 20px);
	box-shadow: 0 0 12px #0006
}

.sd {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0
}

.bar {
	color: #eee;
	height: 100%;
	position: absolute;
	width: 20px;
	top: -1px;
	border-radius: 0 9px 9px 0;
	background: #888e;
	border: 1px solid #888e;
	border-left: none;
	border-right: none;
	z-index: 2
}

.bar i {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	display: block
}

.open.nav {
	left: 0
}

.open .bar i {
	transform: translateY(-50%) rotate(-180deg)
}

.open .sd {
	display: block
}
</style>
<body>
<iframe class=f frameborder=0 src=https://saas.baidu.com?mid=1 allow="geolocation *; microphone *; camera *; midi *; encrypted-media *;" allowfullscreen></iframe>
<!--<div class=nav>-->
<!--	<div onclick=tb() class=sd></div>-->
<!--	<div b class=a onclick=s(0)>-->
<!--		<i class="c1f c1-zhinanzhenxian"></i>-->
<!--		ces-->
<!--	</div>-->
<!--	<div onclick=tb() class=bar>-->
<!--		<i class="c1f c1-drop-right"></i>-->
<!--	</div>-->
<!--</div>-->
<script>
(function(ds){
		var b = document.getElementsByClassName('nav')[0];
		var fs = document.getElementsByTagName('iframe');
		var ns = b.querySelectorAll('div[b]');
		var wn = window;
		wn.s = function(w){
			var n = ns[w];
			if(n.className != 'a'){
				for(var i = 0; i < ds.length; i++){
					fs[i].className = (i == w) ? 'f' : '';
					ns[i].className = (i == w) ? 'a' : '';
				}
			}
			var d = ds[w]
				, f = fs[w];
			if(!f.src){
				f.src = d.u;
			}else{
				d.r && f.contentWindow.location.replace(d.u);
			}
		};
		wn.tb = function(){
			b.className = b.className.indexOf('open') < 0 ? 'nav open' : 'nav';
		};
	}
)([{
	'u': 'https://saas.baidu.com?mid=1',
	'r': 1
}]);
</script>