uni-app采坑纪录第一坑

1.titleNView不用，切换为subNView进行自定义（只能subNView才能够完全自定义）

{
	"id": "nav",
	"path": "pages/index/subNVue/nav",
	"type":"navigationBar" // 设置为navigationBar类型才能让原生子窗体站住原生导航栏的位置
},
{
	"id": "drawer",
	"path": "pages/common/popup/popup",
	"type": "popup",
	"style": {
			"width": "60%" // 只是显示整个屏幕宽度的50%，高度1
	}
}

2.在uni-app中使用图标

往上很多的方法都是使用网络连接，但是我希望用本地的方式来，不喜欢这种远程cdn的方式，索性花了一天的时间搞定了如何在本地使用图标导入。

第一个是顶部导航栏的titleNView的图标导入，使用fontsrc导入static下的ttf文件就可以了

第二个是顶部导航栏的subNView的图标导入，使用

beforeCreate() {
		const domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'iconfont',
			src: "url('https://at.alicdn.com/t/font_1474869_7okdayux80x.ttf')"
		});
	},

然后在css中定义icon

.icons {
	font-family: iconfont;
	font-size: 30px;
}

<text class="icons icon-riji"></text>

第三个是在普通的vue中使用图标，这个就有点麻烦了，下载ali的图标库就不用介绍了，下面是 font.scss文件

 

@font-face {
	font-family: 'HM-font';
	src: url('data:application/x-font-woff2;charset=utf-8;base64,解析的ttf文件')
		format('woff2');
}
/* #ifndef APP-PLUS-NVUE */
.icon {
	font-family: 'HM-font' !important;
	font-size: 60upx;
	font-style: normal;
	color: #000000;
	&.yuyin-home:before {
		content: '\e64e';
	}
}
/* #endif */

解析ttf文件的网站：https://www.giftofspeed.com/base64-encoder/

为什么要写 if 是因为 nvue的css里面写一个语法 要不然会有特别多的css的语法警告

还有就是各种红色报错都是因为 标签img--》image 或者是 js写错了等等