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，一经查实，立即删除！

相关文章

sed: -e expression #1, char 23: unknown option to `s'

sed: -e expression #1, char 23: unknown option to `s'

语言&#xff1a;bash why? / 作为sed的分隔符&#xff0c;和需要操作的内容有冲突 way? 替换 / 分隔符为 # 或者其他分隔符 转载于:https://www.cnblogs.com/2bjiujiu/p/9029598.html
阅读更多...
[js] ReferenceError和TypeError有什么区别？

[js] ReferenceError和TypeError有什么区别？

[js] ReferenceError和TypeError有什么区别&#xff1f; ReferenceError 指的是引用出错&#xff0c;比如尝试访问未定义的变量&#xff0c;或者提前访问无提升的变量&#xff0c;都会引发这个错误&#xff1a; console.log(foo); // ReferenceError: foo is not defined l…
阅读更多...
WebStorm使用教程

WebStorm使用教程

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具任何一个编辑器都需要保存(ctrl s)&#xff0c;这是所有win平台上编辑类软件的特点&#xff0c;但是webstorm编辑文件右上角是没有那个熟悉的 * 的。好处&#xff1a;省去了ctrl s之后&#xff0c;在结合Firefox的…
阅读更多...
微信支付—微信H5支付「非微信内部浏览器-QQ/UC浏览器等」

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

前言 微信支付-微信H5外部浏览器支付「本文」微信H5内部浏览器支付「待写」PC端扫码支付「待写」 一直计划着写一写微信支付相关的文章&#xff0c;希望能加深一下自己的印象&#xff0c;拖了一天又一天… 最近终于空出时间来填坑了&#xff0c;我将文章分为微信H5外部浏览器支…
阅读更多...
[js] 如何避免JS浮点运算的精度问题（例：0.1+0.7=0.7999999999999999）

[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）

多线程小结（1）

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

uniapp中使用微信jssdk

在做自定义分享时&#xff0c;用到了微信jssdk&#xff0c;记录一下。 声明&#xff1a;本文演示uniapp中使用jssdk&#xff0c;示例为网页自定义分享 npm方式使用下方指令进行安装&#xff0c;正文部分为非npm方式。 npm install jweixin-module --save 1、下载导入jssdk文件…
阅读更多...
[js] 举例说明js立即执行函数的写法有哪些？

[js] 举例说明js立即执行函数的写法有哪些？

[js] 举例说明js立即执行函数的写法有哪些&#xff1f; 1、(function(){ //code }())2、!function(){ //code }()3、!(function(){ //code })()4、!(()>{ //code })()个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。…
阅读更多...
微信支付—微信H5支付「微信内部浏览器」

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

前言 微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付「本文」微信支付-PC端扫码支付「待写」 本篇是微信支付系列的第二篇、微信H5内部浏览器支付&#xff0c;关于微信H5外部浏览器唤起微信APP支付&#xff0c;请参考上一篇文章。 开发环境&#xff1a;Java Spr…
阅读更多...
[js] for in 和 for of 的区别？

[js] for in 和 for of 的区别？

[js] for in 和 for of 的区别&#xff1f; for of 用于遍历于数组和可迭代对象得到的是entity({key: value})&#xff0c; for in 用于遍历对象的得到的是对象的属性名 for in 不可用来遍历一个数组, for in 将会把数组中的 length 等不需要的属性给一并遍历出来 for of 不可…
阅读更多...
微信支付—微信H5支付「PC端扫码支付」

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

前言 微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付微信支付-PC端扫码支付「本文」 本篇是微信支付系列的第三篇&#xff0c;PC端扫码支付。 开发环境&#xff1a;Java SpringBoot Vue WxJava(开源SDK) 流程补充&#xff1a;关于微信PC端扫码支付&#xff0c;…
阅读更多...
[js] 写一个方法判断数组内元素是否全部相同

[js] 写一个方法判断数组内元素是否全部相同

[js] 写一个方法判断数组内元素是否全部相同 const isSameArray function (array) {if (Array.isArray(array)) {return new Set(array).size 1;}return false; };个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎…
阅读更多...
SQL Server中使用自定义指定顺序排序

SQL Server中使用自定义指定顺序排序

SQL Server中使用自定义指定顺序排序 原文:SQL Server中使用自定义指定顺序排序比如需要对SQL表中的字段NAME进行如下的排序&#xff1a;张三&#xff08;Z&#xff09;李四&#xff08;L)王五&#xff08;W&#xff09;赵六&#xff08;Z&#xff09; 如果想按 “ 张三、李四、…
阅读更多...
前后端分离项目，后端是如何处理前端传递的token？

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

前后端分离项目中&#xff0c;在不使用 SpringSecurity、Shiro 安全框架的情况下&#xff0c;后端是如何处理前段传递的 token 的呢&#xff1f; 简单说一个场景&#xff0c;在一个非常小的项目中&#xff0c;由于业务逻辑比较简单&#xff0c;也没有啥安全要求&#xff0c;所以…
阅读更多...
[js] 说说防止重复发送ajax请求的方法有哪些？各自有什么优缺点？

[js] 说说防止重复发送ajax请求的方法有哪些？各自有什么优缺点？

[js] 说说防止重复发送ajax请求的方法有哪些&#xff1f;各自有什么优缺点&#xff1f; // 方法一 防抖function debounce(f, ms) { let time; return function(){ let arg Array.prototype.slice.call(arguments, 1); if(time) { clearTimeout(time); } time setTimeout(fu…
阅读更多...
linux shell的here document用法(cat EOF)

linux shell的here document用法(cat EOF)

什么是Here Document?Here Document 是在Linux Shell 中的一种特殊的重定向方式&#xff0c;它的基本的形式如下cmd << delimiter Here Document Contentdelimiter其作用是将两个 delimiter 之间的内容(Here Document Content 部分) 传递给cmd 作为输入参数;比如在终端…
阅读更多...
面试必备：多线程学习（一）

面试必备：多线程学习（一）

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

[js] 请使用 js 实现一个双向链表

[js] 请使用 js 实现一个双向链表 链表结构是我们在面试中经常会被问起的较为基础的数据结构问题&#xff0c;起初学习数据结构使用的是C语言&#xff0c;最近在做前端面试题的过程中没碰到了需要用js实现双链表的需求&#xff0c;百度出来的文章发现可很多错误&#xff0c;于…
阅读更多...
MacOS中Nginx的安装「借助Homebrew」

MacOS中Nginx的安装「借助Homebrew」

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

03、动态代理--CGLib引入增强

package com.offer.note.Java基础.动态代理.CGLib引入增强;public interface Browser {void visitInternet(); } package com.offer.note.Java基础.动态代理.CGLib引入增强;/*** 目标类&#xff1a;被代理类** author: xueguanfeng* date: 2018-05-15 09:57*/ public class Chr…
阅读更多...
最新文章

Copyright @ 2022~2023