uniapp引入inconfont自定义导航栏

app,h5端引入

uniapp本身的全局设置中有个iconfontsrc属性

所以只需要
1.iconfont将需要的icon添加至项目

2.下载到本地解压后,将其中的ttf文件,放在static静态目录下

3.在page.json中对全局文件进行配置tabBar(导航图标)
“iconfontSrc”: “static/font/iconfont.ttf”, 这个属性是字体目录

"tabBar": {
		"iconfontSrc": "static/font/iconfont.ttf",
		"color": "#ffffff",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#fcbd71",
		"list": [{
			"pagePath": "pages/index/index",
		       "iconfont": {
				   // iconfont 图标设置 颜色 以及被选中的颜色
		       	"text": "\ue601",
				"color": "#000",
				"selectedText": "\ue601",
				"selectedColor": "#007aff"
		       },
			"text": "组件"
		}, {
			"pagePath": "pages/page2/page2",
			"iconPath": "static/image/index20.png",
			"selectedIconPath": "static/image/index2.png",
			"text": "接口"
		}]
	},
	

4.此时就可以在list对导航item添加iconfont属性

text就是将unicode码转换为h5可以识别的
还可以使用ttf来对导航进行自定义更改

buttoms 就是可以自己在导航上自己定义按钮只能有俩个并且是左,右对称

设置文字路径

此时可以配置文字图标 图标是unicode所以这个时候我们需要转换


反斜杠u转换为unicode码

成功
注意看似乎使用ttf的只有app和h5适配

既然以上全局文件不支持小程序,那么小程序如下

1.同上下载到本地,但是需要在项目设置中把base64码下载

2.将css文件复制粘贴项目的公共css目录和ttf文件导入static目录

并且在@font-face的配置哪里将src只保留url()部分

4.app.vue进行全局css样式导入

5.用css代码使用

<view class="iconfont icon-shouye">
			
		</view>

和上面一样,如果小程序也想实现定义导航呢
根据官方文档style的navifationstyle可以来定义

此时运行效果图

已经失去文字标题了
对此官方也有解释,使用自定义的时候会取消uniapp设置的样式,所以我们需要自己写

根据官方demo是自己写了个导航栏占位

css部分

<style scoped lang="scss">
.home{
	.wx-nav{
		margin-top: 100rpx;
		  height: var(--status-bar-height);
		        width: 100%;
		display: flex;
		
		justify-content: center;
		text-align: center;
		line-height-step: 200rpx;
	}
}

	
</style>

效果图

此时就实现了自定义导航栏 ,但是需要根据你的样匹配手机型号
但是此时h5端运行改该代码就会报错,所以要进行编译预处理

<template>
	<view class="home">
	<!-- #ifdef MP-WEIXIN -->
	<view class="wx-nav">
		<view class="iconfont icon-fangdajing"></view>
		<text>小 猴 体 育</text>
		<view class="iconfont icon-shouye"></view>
	</view>
	 <!-- #endif H5-->
	 <!-- 写代码块 -->
		<view class="wx-content">
			<text>我是内容</text>
		</view>
	</view>
</template>

这段代码看起来是使用了注释预处理指令来控制代码的条件编译，针对微信小程序（MP-WEIXIN）进行特定的展示。
在代码中有以下注释预处理指令：
<!-- #ifdef MP-WEIXIN -->
这个指令表示，下面的代码块将仅在当前编译环境为微信小程序时生效。
接下来是代码块：
<view class=“wx-nav”>
<view class=“iconfont icon-fangdajing”></view>
<text>小 猴 体 育</text>
<view class=“iconfont icon-shouye”></view>
</view>
这是一个视图（view）组件的代码块，其中包含了一个搜索图标、一个文本和一个首页图标，这可能是小猴体育微信小程序中的导航栏或标题栏的一部分。
最后是注释预处理指令的结束标记：
<!-- #endif -->
这个指令表示，下面的代码块是条件编译的结束，只在编译环境为微信小程序时才会生效。
通过这种方式，可以根据不同的编译环境，在同一个代码文件中编写适用于不同平台的代码，以实现更好的代码复用和适配性。在上述代码中，只有在编译环境为微信小程序时，包含视图组件的代码块才会被处理和展示。在其他编译环境下，这些代码块会被忽略或处理为其他内容。

完整代码

<template>
	<view class="home">
	<!-- #ifdef MP-WEIXIN -->
	<view class="wx-nav">
		<view class="iconfont icon-fangdajing left"></view>
		<text uni-title>小 猴 体 育</text>
		<view class="iconfont icon-shouye right"></view>
	</view>

		<view class="wx-content">
			<text>我是内容</text>
		</view>
	</view>
</template>

<script setup>
	
	import { reactive, ref } from 'vue'
	 const student=ref({
		 name:"后诚意",
		 age:18
	 })
	  const student1=reactive({
		 name:"后诚意",
		 age:18
	 })
	const count = ref(0)
	 var add=()=>{
		 console.log(student,student1)
		 // 可以发现使用ref包裹对象时候,底层调用reactive  但是不是很规范，从源码角度来看的话，在ref中传入一个对象的话，那么最后还是要通过reactive的方式去实现相关的源码。
		 console.log(count)
		 console.log("改之前的对象名字",student.value.name)
		 student.value.name="张国荣"
		 student1.name="李国均匀"
		 console.log("改之后的对象名字",student.value.name)
		 console.log("模板会自动解析.value ,所以模板操作时候",count,count.value)
	 }
	function increment() {
	  
	}
	
</script>

<style scoped lang="scss">
.home{
	.wx-nav{
		border-bottom: solid 1rpx #707070;
		background-color:#FFFFFF ;
		
		.left{
			margin-left: 30rpx;
		}
		.right{
			margin-right: 30rpx;
		}
		
		padding-bottom: 10rpx;
		margin-top: 80rpx;
		// 没写具体的高 差不多和底部导航栏一样·高合适
		height: 50rpx;
		        width: 100%;
		display: flex;
		justify-content: space-between;
		text-align: center;
		
	}
}

	
</style>