uniapp之tabBar/页面切换

1.uniapp目录结构

uni.scss 直接在里面编辑全局样式，且无需在每个分页面中引入，只需在style里添加 lang="scss"即可

2.tabBar

1.作用（设置页面切换的底部导航栏）

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

2.属性


3.list中的属性

3.设置进入小程序的默认显示页面

只需要将pages.json里的位置颠倒一下即可

4.调整底部导航栏位置顺序

颠倒tabBar里list的顺序即可

5.uniapp项目实现切换页面

（1）进入uniapp官网，点击左侧列表的tabBar

（2）复制列表右侧的tabBar代码粘贴到pages.json

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        //"iconPath": "static/image/icon_component.png",
        //"selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        //"iconPath": "static/image/icon_API.png",
        //"selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

将pagePath换成项目的路径（复制pages里path的路径），text换成标题（复制pages里"navigationBarTitleText"的值）
注：每新建一个页面，pages.json里就会自动添加path，然后手动在style里添加"navigationBarTitleText"

6.uniapp项目配置好页面切换后在微信小程序中打开

（1）运行—运行到小程序模拟器—运行设置
（2）复制微信发开发者路径
（3）进入微信开发者工具


（4）运行—运行到小程序模拟器—微信开发者工具（开启第一项）
此时微信开发者工具里就有了uniapp项目

uniapp项目中就有了一个微信小程序的包

注：template标签内要有一个最大的view盒子

7.get/post请求

（1）get请求

<h1 @click="requestData">发起网络POST请求</h1>
methods:{
			requestData(){
				uni.request({
				    url: 'http://api.komavideo.com/news/list',
				    method:'GET',
					data: {
				        
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			}
		}

（2）post请求

<h1 @click="requestData">发起网络POST请求</h1>
methods:{
			requestData(){
				uni.request({
				    url: 'http://api.komavideo.com/news/list',
				    method:'POST',
					data: {
				        pageSize:2
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			}
		}