uniapp运用：如何引入全局样式，或者单独引入样式、设置页面底部的tabber、在pages里面设置一系列的信息、开启下拉刷新的各种方法、.触底请求数据、.uniapp请求数据的办法、Storage

1.如何引入全局样式，或者单独引入样式

1.1单独引入样式

//在该页面的style中单独引入
<style>
	@import url("./a.css");
</style>

1.2全局引入

//在app.vue中引入
<style>
	@import url("./static/css/iconfont.css");
	/*每个页面公共css */
	/* 在这里定义的样式,全局都能生效 */
</style>

2.设置页面底部的tabber

2.1.在pages.json中增加tabbar

	"tabBar":{
	    //这是设置默认的颜色
		"color":"#ff1030",
		//这是选中时候的颜色
		"selectedColor":"#F0AD4E",
		//这是list的列表，里面设置每个页面
		"list":[
		{    //页面的名字
			"text":"首页",
			//页面的路径
			"pagePath":"pages/index/index",
			//页面未选中时候的图片
			"iconPath":"static/tabs/home.png",
			//页面选中时候的图片
			"selectedIconPath":"static/tabs/home-active.png"
		},
		{
			"text":"信息",
			"pagePath":"pages/messages/messages",
			"iconPath":"static/tabs/message.png",
			"selectedIconPath":"static/tabs/message-active.png"
		},
		{
			"text":"聊天",
			"pagePath":"pages/news/news",
			"iconPath":"static/tabs/contact.png",
			"selectedIconPath":"static/tabs/contact-active.png"
		}
		]
	},

3.在pages里面设置一系列的信息

		{
		    "path" : "pages/messages/messages",
		    "style" :                                                                 
		    {
                //头部信息
		        "navigationBarTitleText": "信息页面",
                //开启下拉刷新
		        "enablePullDownRefresh": true,
                //头部的背景颜色
				"navigationBarBackgroundColor":"#007AFF",
                 //为h5页面设置的下拉颜色
				"h5":{
					"pullToRefresh":{
						"color":"#4CD964"
					}
				}
		    }
		    
		}

4.开启下拉刷新的方法

//1.onPullDownRefresh开启下拉刷新
 onPullDownRefresh() {
 	console.log('触发了下拉');	
 	setTimeout(()=> {
 		this.list.push('666')
 		//停止刷新
 		uni.stopPullDownRefresh()
 	},500)
 },
//2.在pages里面用"enablePullDownRefresh": true开启下拉刷新

//3.通过定义方法的点击事件 methods
<button @click="refresh">刷新</button>
	refresh() {
		uni.startPullDownRefresh()
	}

5.触底请求数据

	onReachBottom() {
			console.log('触底了');
			this.list = [...this.list,...['前端','后端','ui','测试','前端']]
		},

6.uniapp请求数据的办法

	<button @click="getLunbo">获取轮播图</button>
	getLunbo() {
		uni.request({
			url: "http://localhost:8082/api/getlunbo",
			success (res) {
				console.log(res);
			}
		})
		},

7.存储以及获取、移除数据到Storage中

setSrorage() {
	// uni.setStorage({
	// 	key: 'id',
	// 	data: 66,
	// 	success() {
	// 		console.log('存储成功');
	// 	}
	// })
	uni.setStorageSync('id',1000)
},
getInfo() {
	// uni.getStorage({
	// 	key: "id",
	// 	success(res) {
	// 		console.log(res.data);
	// 	}
	// })
	const res = uni.getStorageSync('id')
	console.log(res);
}
claer() {
    // uni.removeStorage({
	// 	key: 'storage_key',
	// 	success(res) {
	// 		console.log('success');
	// 	}
	// });
    uni.removeStorageSync('storage_key');
}

8.条件编译跨段兼容详讲

**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

8.1写法示例

#ifdef APP-PLUS
需条件编译的代码
#endif
//仅出现在 App 平台下的代码

#ifndef H5
需条件编译的代码
#endif
//除了 H5 平台，其它平台均存在的代码

#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif
//在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

8.2**%PLATFORM%** 可取值如下：

#APP-PLUS	App
#APP-PLUS-NVUE或APP-NVUE	App nvue
#H5	H5
#MP-WEIXIN	微信小程序
#MP-ALIPAY	支付宝小程序
#MP-BAIDU	百度小程序
#MP-TOUTIAO	字节跳动小程序
#MP-LARK	飞书小程序
#MP-QQ	QQ小程序
#MP-KUAISHOU	快手小程序
#MP-JD	京东小程序
#MP-360	360小程序
#MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
#QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
#QUICKAPP-WEBVIEW-UNION	快应用联盟
#QUICKAPP-WEBVIEW-HUAWEI	快应用华为

8.3写法示例

<!-- #ifdef H5 -->
<view>我只要在H5里面看见</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我只要在小程序看见</view>
<!-- #endif -->