Uniapp H5配置Ios Safari浏览器添加到主屏幕自定义应用图标及名称

山楂树の

已于 2023-05-30 17:53:24 修改

阅读量943

点赞数 1

分类专栏： Uniapp 文章标签：前端 javascript safari uni-app

于 2023-05-30 17:42:48 首次发布

本文链接：https://blog.csdn.net/dabaooooq/article/details/130950992

版权

Uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

可参考manifest.json 应用配置 | uni-app官网

一、项目根目录新建html页面，用于自定义模板，我这里是template，文件名自行定义

二、复制下面的基本模板内容，到这个html文件，在此基础上自定义配置meta、link和引入js（是在此基础上新增，不要修改或删除原有代码，否则自定义模板不会生效）

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			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>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

三、在 `manifest.json->web配置->template` 节点中关联这个html文件的路径。

四、在新建的template文件中定义自定义meta和link

定义应用名称 <meta name="apple-mobile-web-app-title" content="融合评价">
定义应用图标 <link rel="apple-touch-icon" href="/static/favicon.png">

五、注意：link标签的href路径对应的是工程根目录static文件夹下，同时该文件也要位于服务器上的 /static/ 文件夹中，如果只是本地工程中有，服务端没有的话，图标只会在本地开发环境生效，正式发布的线上环境不会生效！

山楂树の

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Uniapp H5配置Ios Safari浏览器添加到主屏幕自定义应用图标及名称

link标签的href路径对应的是工程根目录static文件夹下，同时该文件也要位于服务器上的 /static/ 文件夹中，如果只是本地工程中有，服务端没有的话，图标只会在本地环境生效，线上环境不生效
复制链接

扫一扫