uni-app基础学习与理解（一）

首先在学习uni-app之前，确保我们的电脑上已经安装HBuilderX，与微信开发者工具

为了大家快速了解学习这个框架我们这里就不放过多的演示图片了，大家按照提供的方法或API进行操作即可

这里要说一下uni-app这个框架是便于开发者一端开发多段使用的，就像官方文档里解释的一样（uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。）

一些项目初始化以及怎样运行的话这里就不过多演示了，大家按照HBuilderX里面的提示照做就可以了，工具栏标识的还是很明确的

项目初始化完成后我们来讲一下框架的全局配置与基础配置

• 项目的基础配置、全局配置

在项目创建完成我们在编辑工具中找到pages.json文件，在这个文件里是我们项目的一些基础配置以及全局配置

接下来我们来说：通过globalStyle进行全局配置（这里是官方文档的介绍，用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档 ）

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

• 在这里我们新建页面这里随便起名字哈，我这里简单地在index.vue页面上做更改（右键pages新建index目录，在index目录下右键新建.vue文件,并选择基本模板 ）

• 通过pages来配置页面

  属性	类型	默认值	描述
  path	String		配置页面路径
  style	Object		配置页面窗口表现，配置项参考 pageStyle

  {
  	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  		{
  			"path": "pages/index/index",
  			"style": {
  				"navigationBarTitleText": "uni-app"
  			}
  		}
  
  	]
  }
  

  这样我们的页面就挂载到项目中来了

• 配置tabbar

这里我们要了解到 如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

注意：

1. 当设置 position 为 top 时，将不会显示 icon

2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持 black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

在list是一个数组，其中每一项都是对象：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

在创建tabBar之前我们确保其中的页面已经在pages数组中已经挂载

"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text": "分类",
				"pagePath":"pages/classify/classify",
				"iconPath":"static/tabs/classify.png",
				"selectedIconPath":"static/tabs/classify-active.png"
			},
			{
				"text": "我的",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}

• 接下来我们在对uni-app比较好用的一个地方做一个了解，多用于我们项目中开发多个页面，当预览某一个位置的时候造成我们重复的点击测试很麻烦（condition启动模式配置 ）
  注意：启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}

在这里我们可以不用手写这些代码，可以这样操作，最后一项是编辑启动页面，我这里截图没有显示到

本篇文章就此先讲解一些基础的配置问题，若有什么地方不明确或某些位置不太懂得请在评论中指出，后期我会继续出更多的基础教学谢谢各位支持 ，谢谢大家