uniapp添加网站favicon文件

前言

uniapp 默认创建的项目并没有给我们提供加上网站 favicon”机会”,但其实官方已经给出解决方法了,使用的是 自定义模板

自定义模板的场景,通常有以下几种情况:

  1. 调整界面 head 中的 meta 配置
  2. 补充 SEO 相关的一些配置「仅首页
  3. 加入百度统计等第三方js

如上,使用 自定义模板 肯定是满足我们解决添加 favicon 的了,看一下怎么用吧。

1、工程跟项目新建一个 XXX.html 文件,文件名字自己定义,比如 template.html
2、复制基本模板内容到这个html文件,在此基础上修改meta和引入js;
<!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">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded'function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
        
</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>
3、这 head 中加入我们的 favicon 文件
<link rel="icon" type="image/png" sizes="32x32" href="http://img.sscai.club/favicon1.png”>
4、在 manifest.json -> h5 -> template 节点中关联这个html文件的路径。

ok,运行下项目我肯可以看到已经添加好了。

综上,关于三种场景的使用方式可以自行扩展了,比如增加百度统计代码 > uniapp增加百度统计代码(h5)

最后

博客地址:https://www.cnblogs.com/niceyoo

求关注❤️,求推荐👍,如果觉得这篇文章有点东西,不妨左上角关注一下我。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信支付—微信H5支付「非微信内部浏览器-QQ/UC浏览器等」

前言 微信支付-微信H5外部浏览器支付「本文」微信H5内部浏览器支付「待写」PC端扫码支付「待写」 一直计划着写一写微信支付相关的文章&#xff0c;希望能加深一下自己的印象&#xff0c;拖了一天又一天… 最近终于空出时间来填坑了&#xff0c;我将文章分为微信H5外部浏览器支…

[js] 如何避免JS浮点运算的精度问题(例:0.1+0.7=0.7999999999999999)

[js] 如何避免JS浮点运算的精度问题&#xff08;例&#xff1a;0.10.70.7999999999999999&#xff09; function precision(num1,num2){num1Length num1.toString().length;num2Length num2.toString().length;let len num1Length > num2Length ? num1Length : num2Len…

多线程小结(1)

原文出处 定义就不多说了&#xff0c;直接上代码 1 /// <summary> 2 /// 单线程应用 3 /// </summary> 4 class Program 5 { 6 static void Main(string[] args) 7 { 8 Console.WriteLine("进入主线程"); 9 …

uniapp中使用微信jssdk

在做自定义分享时&#xff0c;用到了微信jssdk&#xff0c;记录一下。 声明&#xff1a;本文演示uniapp中使用jssdk&#xff0c;示例为网页自定义分享 npm方式使用下方指令进行安装&#xff0c;正文部分为非npm方式。 npm install jweixin-module --save 1、下载导入jssdk文件…

微信支付—微信H5支付「微信内部浏览器」

前言 微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付「本文」微信支付-PC端扫码支付「待写」 本篇是微信支付系列的第二篇、微信H5内部浏览器支付&#xff0c;关于微信H5外部浏览器唤起微信APP支付&#xff0c;请参考上一篇文章。 开发环境&#xff1a;Java Spr…

微信支付—微信H5支付「PC端扫码支付」

前言 微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付微信支付-PC端扫码支付「本文」 本篇是微信支付系列的第三篇&#xff0c;PC端扫码支付。 开发环境&#xff1a;Java SpringBoot Vue WxJava(开源SDK) 流程补充&#xff1a;关于微信PC端扫码支付&#xff0c;…

前后端分离项目,后端是如何处理前端传递的token?

前后端分离项目中&#xff0c;在不使用 SpringSecurity、Shiro 安全框架的情况下&#xff0c;后端是如何处理前段传递的 token 的呢&#xff1f; 简单说一个场景&#xff0c;在一个非常小的项目中&#xff0c;由于业务逻辑比较简单&#xff0c;也没有啥安全要求&#xff0c;所以…

面试必备:多线程学习(一)

这是2020年“水”的第23篇文章 面试中&#xff0c;多线程并发问题基本上是必问的&#xff0c;所以&#xff0c;不背上个线程相关的问题&#xff0c;都不好意思出去面试了。 一提到多线程&#xff0c;相信大部分小伙伴首先想到的一定是 Synchronize、Lock&#xff0c;再就是vola…

MacOS中Nginx的安装「借助Homebrew」

本文Nginx的安装借助于Homebrew&#xff1b; 1、Homebrew2、Nginx安装 1、Homebrew 如果你已经安装过Homebrew了&#xff0c;那么你可以跳过这一步&#xff0c;直接进行Nginx安装步骤&#xff1b; Homebrew是一款MacOS平台下的软件包管理工具&#xff0c;拥有安装、卸载、更新、…

快速下载||AnotherRedisDesktopManagerMedis-Redis可视化工具

尽管是在Gitee上下载这款软件&#xff0c;网速仍然是非常的慢&#xff0c;不知道是不是我的网络问题。 提供一份我的下载链接 MacOS&#xff1a;Another.Redis.Desktop.Manager.1.3.1.dmg Windows&#xff1a;Another.Redis.Desktop.Manager.1.3.1.exe 也许你还想试试Medis Mac…

面试必备:synchronized的底层原理?

最近更新的XX必备系列适合直接背答案&#xff0c;不深究&#xff0c;不喜勿喷。 你能说简单说一下synchronize吗&#xff1f; 可别真简单一句话就说完了呀~ 参考回答&#xff1a; synchronize是java中的关键字&#xff0c;可以用来修饰实例方法、静态方法、还有代码块&#xff…

支付宝手机h5网页支付不再提供「继续浏览器付款」按钮了吗

来自圈友的疑惑&#xff0c;记录一下 之前写过一篇「支付宝手机h5支付的文章」&#xff0c;如果下载运行过Demo的小伙伴肯定发现了一个问题 > 「Demo中有显示继续浏览器付款按钮&#xff0c;但自己实际环境并没有」 难道是操作不对&#xff1f; 其实不然&#xff0c;这是两个…

.NETFramework-Web.Mvc:ViewResult

ylbtech-.NETFramework-Web.Mvc&#xff1a;ViewResult1.程序集 System.Web.Mvc, Version5.2.3.0, Cultureneutral, PublicKeyToken31bf3856ad364e35返回顶部 1、#region 程序集 System.Web.Mvc, Version5.2.3.0, Cultureneutral, PublicKeyToken31bf3856ad364e35 // c:\users\…

ConcurrentHashMap底层原理?

本文为面试必备系列篇&#xff0c;不深入叙述&#xff0c;具体细节可自行查询。 可能会问的问题 1、用过ConcurrentHashMap吗&#xff1f;2、为什么要用ConcurrentHashMap&#xff1f;3、HashMap与HashTable的区别&#xff0c;引出ConcurrentHashMap…4、HashMap在多线程环境下…

支付宝支付-当面付之扫码支付「扫码支付」

前言 支付宝支付—沙箱环境使用支付宝支付-支付宝PC端扫码支付支付宝支付-手机浏览器H5支付支付宝支付-当面付之扫码支付「本文」 当面付包含两种支付方式&#xff1a;商品条形码支付 扫码支付 经过前面两篇PC端扫码支付、手机H5支付&#xff0c;我们可以看到一个共同的特点就…

MybatisCodeHelperNew-2.8.1-191-201插件使用

本文测试环境IDEA_2020.1&#xff0c;文中提供了MacOS用户操作截图 1、文件解压后放置plugs插件目录「Windows」 扫码回复「139」 下载后将文件解压&#xff0c;将压缩包内的 MyBatisCodeHelper-Pro 放入 IDEA 安装目录的 plugins 目录。 2、如果你是MacOS用户「MacOS」 同样找…

Redis简单案例(四) Session的管理

Redis简单案例(四) Session的管理 原文:Redis简单案例(四) Session的管理负载均衡&#xff0c;这应该是一个永恒的话题&#xff0c;也是一个十分重要的话题。毕竟当网站成长到一定程度&#xff0c;访问量自然也是会跟着增长&#xff0c;这个时候&#xff0c; 一般都会对其进行负…

MacOS中Elasticsearch的安装「借助Homebrew」

1、Homebrew 如果你已经安装过Homebrew了&#xff0c;那么你可以跳过这一步&#xff0c;直接进行Elasticsearch安装步骤&#xff1b; Homebrew是一款MacOS平台下的软件包管理工具&#xff0c;拥有安装、卸载、更新、查看、搜索等很多实用的功能&#xff0c;强烈推荐安装。 请…

负载均衡中使用 Redis 实现共享 Session

最近在研究Web架构方面的知识&#xff0c;包括数据库读写分离&#xff0c;Redis缓存和队列&#xff0c;集群&#xff0c;以及负载均衡&#xff08;LVS&#xff09;&#xff0c;今天就来先学习下我在负载均衡中遇到的问题&#xff0c;那就是session共享的问题。 一、负载均衡 负…

Typora中使用Gitee图床

1、前言 之前好友写了一篇「使用gitee作为图床 ,写markdown自动上传文件」&#xff0c;初衷是由于我一直使用的是Typora来写博客「力推」&#xff0c;但之前的版本都不支持图床功能&#xff0c;现在新版本已经有了图床功能了&#xff0c;赶紧入坑。 本篇环境&#xff1a;MacOS…