章节3.项目自定义配置

说明：

由于我们从课时4-课时10 和我们的上一季：第三学期第一季课程 课时4-课时10内容相同，因此在讲课时4-课时10的时候，就直接使用我们上一季的课程视频，那么从本节课开始我们正式讲解本季的项目。这里我顺便跟大家演示一下，如何从上一季课程中复制代码到本季课程中。

如果有同学学习过上一季的课程，然后本季直接从课时11开始学习，那么可以跟着老师这样来操作。【具体查看课时11视频】

# 一、nvue说明和项目配置说明

关于 nvue说明 大家可以打开官网查看：nvue介绍

uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。
在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，hello uni-app 示例就是如此。
虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果你不开发 App，那么不需要使用 nvue。
如果你是 web 前端，不熟悉原生排版，那么建议你仍然以使用 vue 页面为主，在 App 端某些 vue 页面表现不佳的场景下使用 nvue 作为强化补充。
编译模式 : uni-app 编译模式

# 1. 针对nvue引入一个css样式库

说明，这个样式库主要是针对nvue页面，由于nvue中不支持某些css，因此封装了一个兼容nvue和vue的css样式库，方便大家使用。
css样式库：common.nvue.vue.css 或者大家去群里面下载本节课的课件，课件里面也有这个样式库。

在项目根目录 App.vue 入口文件中引入样式库：

<style>
	/*每个页面公共css */
	@import '/common/css/common.nvue.vue.css';
</style>

# 2. 针对本项目写一个公共的样式文件

我们需要明白，我们上节课引入的css样式库：common.nvue.vue.css, 它是一个兼容库，你可以理解成它是一个通用的，可以运行到任何项目的样式库，这个库本项目可以引入，其它项目也可以引入，但是每个项目有自己特色的主题样式、背景样式、字体样式等，因此，我们可以在这个通用库的基础上，写一个我们当前这个项目用到的公共的样式。

另外，大家要知道，针对 nvue页面，css样式它是不支持复写的，例如：
/* css样式复写 */
border: 1px solid #000;
/* nvue页面样式不支持复写，要写成：*/
border-width: 1px;
border-style: solid;
border-color: #000;

在项目根目录 App.vue 入口文件中引入样式库：

<style>
	/*每个页面公共css */
	@import '/common/css/common.nvue.vue.css';
	@import '/common/css/theme.css';
</style>

/common/css/theme.css 内容

/* 项目主题样式表 */
/* #ifndef APP-PLUS-NVUE */
page {
  height: 100%;
}
/* #endif */
/* 页面背景色 */
.page {
	background-color: #EDE9E7;
	/* #ifndef APP-PLUS-NVUE */
	min-height: 100%;height: auto;
	/* #endif */
	/* #ifdef APP-PLUS-NVUE */
	flex: 1; /* app端nvue页面默认flex布局 */
	/* #endif */
}
/* 主背景色 */
.main-bgColor{
	background-color: #08c262;
}
/* 主文字色 */
.main-textColor{
	color: #08c262;
}

/pages/index/index.nvue

<template>
	<view class="page">
		 <text class="font-weight-bold main-textColor">测试文字</text>
	</view>
</template>

# 二、nvue页面和vue页面引入自定义图标

说明：

关于自定义图标，这个知识点我们已经在我们的第一学期课程课时53：【知识点】页面引入字体图标已经讲过了，如果不会的同学可以去看一下那套课程。
大家直接去群文件里面，找到本节课的课件，我给大家就直接提供了我们项目需要用到的自定义图标，大家直接去群文件里面下载即可。

# 1. APP端 `nvue页面引入自定义图标`

在项目根目录 App.vue 入口文件中：

...
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			//加载图标库
			// #ifdef APP-PLUS-NVUE
			const domModule=weex.requireModule('dom')
			domModule.addRule('fontFace',{
				'fontFamily':'iconfont',
			    'src':"url('https://at.alicdn.com/t/font_1605591_gom9ls29eyh.ttf')",
				// 'src':"url('/static/my.ttf')",
			})
			// #endif
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>
...

注意：

在nvue页面中，我们的图标必须写在text组件中；
在nvue页面中，text组件图标不能换行；

# 2. H5端和小程序端 `nvue页面引入自定义图标`

在项目根目录 App.vue 入口文件中：

...
<style>
	/*每个页面公共css */
	...
	/* #ifndef APP-PLUS-NVUE */
	@import '/common/css/icon.css';
	/* #endif */
</style>
...

/common/css/icon.css

@font-face {
  font-family: "iconfont"; /* Project id 1605591 */
  src: url('https://at.alicdn.com/t/font_1605591_gom9ls29eyh.woff2?t=1749193620609') format('woff2'),
       url('https://at.alicdn.com/t/font_1605591_gom9ls29eyh.woff?t=1749193620609') format('woff'),
       url('https://at.alicdn.com/t/font_1605591_gom9ls29eyh.ttf?t=1749193620609') format('truetype');
}
...

# 三、自定义底部导航栏

# 方式一：使用uView框架提供的Tabbar 底部导航栏组件

这种方式我们在上一套课程：第三学期第一季课程uni-app入门已经讲过了，用的就是这种方式，大家可以去看看，这里就不赘述了。
Tabbar 底部导航栏组件使用

# 方式二：uni-app官方提供的TabBar底部导航栏配置

官方地址：https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar (opens new window) 在 pages.json 中提供 tabBar 配置
项目根目录 pages.json 文件中：

# 1. `tabBar`属性说明

...
"tabBar": {
	"borderStyle": "black",  //tabbar 上边框的颜色，可选值 black/white
	"backgroundColor": "#f7f7f7", //tab 的背景色
	"color": "#222222", //tab 上的文字默认颜色
	"selectedColor": "#08c262", //tab 上的文字选中时的颜色
	// "redDotColor": "#ff0000", //tabbar上红点颜色
	...
}

# 2. `tabBar`属性中，`list`属性说明[tab 的列表]

定义list属性前，我们先定义几个页面
底部导航栏图片图标

"tabBar": {
		"borderStyle": "black", //tabbar 上边框的颜色，可选值 black/white
		"backgroundColor": "#f7f7f7", //tab 的背景色
		"color": "#222222", //tab 上的文字默认颜色
		"selectedColor": "#08c262", //tab 上的文字选中时的颜色
		// "redDotColor": "#ff0000", //tabbar上红点颜色
		"list":[
			{
				"pagePath": "pages/index/index", //页面路径，必须在 pages 中先定义
				"text": "首页", //tab上按钮文字，在App和H5平台为非必填。例如中间可放一个没有文字的+号图标
				"iconPath": "/static/tabbar/index.png",//图片路径,大小限制为40kb,建议尺寸为 81px*81px
				"selectedIconPath": "/static/tabbar/indexSelected.png"
				// "visible":true, //该项是否显示，默认显示
			},
			{
				"pagePath": "pages/xiaoxi/xiaoxi",
				"text": "消息", 
				"iconPath": "/static/tabbar/xiaoxi.png",
				"selectedIconPath": "/static/tabbar/xiaoxiSelected.png"
			},
			{
				"pagePath": "pages/wode/wode",
				"text": "我的", 
				"iconPath": "/static/tabbar/wode.png",
				"selectedIconPath": "/static/tabbar/wodeSelected.png"
			}
		]
	}

底部导航栏字体图标

    "tabBar": {
		"borderStyle": "black", //tabbar 上边框的颜色，可选值 black/white
		"backgroundColor": "#f7f7f7", //tab 的背景色
		"color": "#222222", //tab 上的文字默认颜色
		"selectedColor": "#08c262", //tab 上的文字选中时的颜色
		// "redDotColor": "#ff0000", //tabbar上红点颜色
		"iconfontSrc": "/static/my.ttf",
		"list":[
			{
				"pagePath": "pages/index/index", //页面路径，必须在 pages 中先定义
				"text": "首页", //tab上按钮文字，在App和H5平台为非必填。例如中间可放一个没有文字的+号图标
				"iconPath": "/static/tabbar/index.png",//图片路径,大小限制为40kb,建议尺寸为 81px*81px
				"selectedIconPath": "/static/tabbar/indexSelected.png"
				// "visible":true, //该项是否显示，默认显示
			},
			{
				"pagePath": "pages/xiaoxi/xiaoxi",
				"text": "消息", 
				"iconPath": "/static/tabbar/xiaoxi.png",
				"selectedIconPath": "/static/tabbar/xiaoxiSelected.png"
			},
			{
				"pagePath": "pages/wode/wode",
				"text": "我的", 
				"iconPath": "/static/tabbar/wode.png",
				"selectedIconPath": "/static/tabbar/wodeSelected.png",
				"iconfont": {
					"text": "\ue64e", //字库 Unicode 码
					"selectedText": "\ue797" ,//选中后字库 Unicode 码
					// "fontSize":"18px", //字体图标字号(px)
					"color":"#222222", //字体图标颜色
					"selectedColor": "#08c262"//字体图标选中颜色 
				}
			}
		]
	}

# 四、globalStyle：用于设置应用的状态栏、导航条、标题、窗口背景色等

官方文档查看：https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle (opens new window) 项目根目录 pages.json 文件中：

    ...
    "globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app0",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"titleNView":false,
			"scrollIndicator": "none"
		}
	},
    ...