Uni-app跟学笔记（三）：样式、Vue基础、请求、数据缓存

文章目录

Uni-app跟学笔记（三）：样式、Vue基础、请求、数据缓存
- 1）样式
- 2）vue基础
- - 1：数据绑定
  - [2：v-bind 动态绑定](#2：v-bind 动态绑定)
  - [3：v-for 元素遍历](#3：v-for 元素遍历)
  - 4：事件注册
  - 5：生命周期
  - - [0. 概述](#0. 概述)
    - [1. 应用生命周期](#1. 应用生命周期)
    - [2. 页面生命周期](#2. 页面生命周期)
- 3）发送请求
- 4）数据缓存

本博客为 [uni-app]( 此门课的跟学笔记，目的是便于个人复习和对知识快速索引，源码素材可在均可在视频评论区找到

1）样式

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ";" 表示语句结束
支持基本常用的选择器class、id、element等，但是不支持"*"选择器
page 相当于 body 节点，按下F12开启检查模式就会看到page节点
1：定义在 App.vue 中的样式为全局样式，作用于每一个页面；
2：在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点（个人觉得这一块个人开发中用得不多，此处笔记欠缺，未来如果用到阿里巴巴矢量库中的字体图标的话再回来补吧，视频p13）：

html 复制代码

<template>
	<view>
		<view>
			样式的学习
		</view>
		<view class="box1">
			Test
			<text>hhh</text>
		</view>
	</view>
</template>

<!-- 同样支持scss,如果没法用,要点击工具,下拉菜单中有插件安装中下载scss插件 -->
<style lang="scss">
	/* 支持的选择器有class/id/element维度不支持"*" */
	/* import引入外联样式表 */
	@import url("uni-style.css");
	/* rpx是响应式px,自适应屏幕宽度的动态单位,750宽的屏幕750rpx恰为屏幕宽度 */
	.box1 {
		width: 750rpx;
		height: 750rpx;
		background-color: #0000FF;
		text {
			color: $global-color; // 在uni.scss中配置的全局变量
		}
	}
</style>

2）vue基础

因为uni-app中都是基于vue文件开发页面，所以这部分补充vue的基础语法

1：数据绑定

需要数据直接把数据定义在data()中

js 复制代码

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

插值表达式的使用
案例代码

2：v-bind 动态绑定

学过 vue 的都知道 " v-bind: " 可以简写为 " : " ，如果不加 " : " 即为 src="imgUrl" ，此时组件认为 imgUrl 是一个字符串，而不会解析，所以需要用 v-bind 动态绑定数据的值

3：v-for 元素遍历

用法同样和vue相同，图片中的注释很详细

4：事件注册

html 复制代码

<template>
	<view>		
		<!-- 4:事件注册的学习 -->
		<button type="primary" v-on:click="clickHandle">不带参,默认传递事件对象e</button>
		<button type="primary" v-on:click="clickHandle2(20)">传递参数,和变量名无关</button>
		<button type="primary" v-on:click="clickHandle3(20,$event)">传递参数和事件对象</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
            
            }
		},
		methods: {
			// 如果没有传递参数,那么默认拿到的就是事件对象
			clickHandle(e) {
				console.log('点击事件',e);
			},
			// 接受的时候和变量名无关
			clickHandle2(e) {
				console.log('拿到的数字是',e);
			},
			// 接受参数和事件对象
			clickHandle3(num,e) {
				console.log('拿到的数字是:',num,'事件对象:',e);
			}
		}
	}
</script>

5：生命周期

0. 概述

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

1. 应用生命周期

uni-app中的应用生命周期有以下四个

在App.vue根组件中，有默认的三个应用生命周期，onLaunch、onShow、onHide

html 复制代码

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		// 以上三个应用生命周期是项目自带的
		onError: function(err) {
			console.log('出现报错:',err)
		}
	}
</script>

<style>
	/*每个页面公共css */
	/* App.vue中的style是各页面共同拥有的样式 */
	/* 当然每个页面在自己的style中书写可以覆盖全局样式 */
</style>

运行在浏览器中更方便观察各应用生命周期的输出

2. 页面生命周期

1-基础

类似于Vue组件的生命周期，tabbar中的页面出现过一次就会被保存到内存中，所以再次点击只会出现onShow就不会再onLoad了
- onLoad：页面被加载时触发，只出现一次
- onShow：显示时触发
- onReady：页面渲染完成时触发
- onHide：页面隐藏时触发
- onUpload：页面销毁时触发，暂时用不上

html 复制代码

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		// onLoad中添加一个参数可以拿到从上一个页面跳转过来的信息
		onLoad(options) {
			console.log('页面加载了',',上一个页面的信息:',options);
		},
		onShow() {
			console.log('页面显示了');
		},
		onReady() {
			console.log('页面初次渲染完成');
		},
		onHide() {
			console.log('页面隐藏了')
		},
		methods: {

		}
	}
</script>

除了一些基础的页面生命周期函数，还有几个比较常用的单独介绍

2-下拉刷新

在跟学笔记（一）中，在pages.json文件中已经配置开启了全局的下拉刷新事件，但显然这是不合理的，并不是所有的页面都需要下拉刷新，我们应该只对需要下拉刷新的页面书写该功能即可

如何配置下拉刷新有两种方式

在pages.json中找到对应的pages节点，在style中开启enablePullDownRefresh，再于js中定义onPullDownRefresh处理函数，该函数与onLoad等生命周期函数同级，用于监听该页面用户下拉刷新事件，在该函数体中书写下拉刷新时处理的逻辑

html 复制代码

<template>
	<view>
		列表页
		<view v-for="(item,index) in list" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['暮光闪闪','柔柔','瑞瑞']
			}
		},
		// 注意onPullDownRefresh和页面生命周期函数同级,可以直接写在methods之外
		onPullDownRefresh() {
			console.log('触发下拉刷新')
			this.list=['暮光公主','柔柔','瑞瑞']
			// 此处可以添加一个定时器,因为数据刷新速度很快,可以更加丝滑
			uni.stopPullDownRefresh() // 停止下拉事件(光标旋转)
		},
		methods: {
			
		}
	}
</script>

利用uni.startPullDownRefresh()方法来触发下拉事件，类似于上面用uni.stopPullDownRefresh停止下拉事件一样，是一个全局的函数，注意，uni.startPullDownRefresh()方法刷新后的逻辑共享onPullDownRefresh函数，下面的案例用一个点击事件触发下拉刷新模拟

html 复制代码

<template>
	<view>
		<button type="primary" v-on:click="Refresh">点击触发下拉刷新事件</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: ['暮光闪闪','柔柔','瑞瑞']
			}
		},
		// 注意onPullDownRefresh和页面生命周期函数同级,可以直接写在methods之外
		onPullDownRefresh() {
			console.log('触发下拉刷新')
			this.list=['暮光公主','柔柔','瑞瑞']
			// 此处可以添加一个定时器,因为数据刷新速度很快,可以更加丝滑
			uni.stopPullDownRefresh() // 停止下拉事件(光标旋转)
		},
		methods: {
			Refresh() {
				uni.startPullDownRefresh(); // 内置下拉页面刷新函数
			}
 		}
	}
</script>

3-页面触底

onReachBottomDistance：触发页面触底时距离页面底部的距离，单位只能是px

追加数据以演示页面触底效果，onReachBottom也与生命周期同级，当触底时向列表中添加新元素，"..."是ES6特性中的用法

html 复制代码

<script>
	export default {
		data() {
			return {
				list: ['Twilight Sparkle','Apple Jack','Rainbow Dash',
				'Rarity','Fluttershy','Pinkie Pie','Starlight Glimmer',
				'Apple Bloom','Sweetie Belle','Big Mac'
				]
			}
		},
		onReachBottom() {
			console.log('触发页面触底')
			// "..." 扩展运算符,向原数组中添加新的内容,ES6新特性
			this.list=[...this.list,...['RoysterCDD','Serendipityyy']]
		}
	}
</script>

3）发送请求

准备一个后端接口（直接用的自己之前写的demo），用postman进行接口测试，其返回值是一个标准的Result类型包含code、msg、data三值，其中data是JSON数组，每个JSON元素包含四个字段

uni-app中的数据请求和普通的HTTP请求非常类似，最终用v-for把数据回显到页面上
在完成本案例中踩的坑是：在uni-app的success回调函数中，this不再指向Vue实例，所以如果直接用 this.getList=data.data.data 不能把数据赋值到getList中，因此新建变量提前把 vue 实例上下文对象存储到 self 变量中，得以调用

html 复制代码

<template>
	<view>
		<text>数据回显</text>
		
		<!-- <view>{{getList}}</view> -->

		<!-- 渲染请求拿到的数据,解析JSON数据 -->
		<view v-for="(item,index) in getList" :key="item.id" class="box-item">
			<view>{{item.id}}</view>	
			<view>{{item.name}}</view>
		</view>
		
		<button @click="sendGet">
			发送请求
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getList: [], // 存储get请求拿到的数据
			}
		},
		methods: {
			sendGet() {
				// 将Vue实例的上下文存储到self变量中
				let self=this;
				uni.request({
					url: 'http://localhost:8082/depts',
					// 如果发送请求成功
					// 注意,在success回调函数中,this不再指向Vue实例,所以需要提前保存到self中
					success(data) {
						console.log(data);
						if(data.data.code===1) {
							self.getList=data.data.data;
						} else {
							console.error('接口请求失败');
						}
						console.log('测试',self.getList)
					},
					fail(err) {
						console.error('发送请求失败',err);
					}
				})
			}
		}
	}
</script>

<style>
.box-item {
	background-color: skyblue;
}
</style>

4）数据缓存

包含8个函数，set、get、remove、clear（一般不用），4个异步，4个同步

html 复制代码

<template>
	<view>
		数据缓存
		<view>以下为异步接口</view>
		<button type="primary" @click="setStorage">存储数据</button>
		<button type="primary" @click="getStorage">根据键获取数据</button>
		<button type="primary" @click="removeId">根据键移除数据</button>
		<view>以下为同步接口</view>
		<button type="primary" @click="setStorageSync">存储数据</button>
		<button type="primary" @click="getStorageSync">根据键获取数据</button>
		<button type="primary" @click="removeIdSync">根据键移除数据</button>
		<!-- 还有一个clearStorage清空本地所有数据,用的少,不多阐释 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 存储数据(异步)
			setStorage() {
				uni.setStorage({
					key: 'id',
					data: 80,
					success() {
						console.log('存储成功')
					}
				})
			},
			// 存储数据同步
			setStorageSync() {
				uni.setStorageSync('id',100);
			},
			// 获取数据(异步)
			getStorage() {
				uni.getStorage({
					key: "id",
					// 改成res?
					success(data) {
						console.log("获取成功:>", data)
					}
				})
			},
			// 获取数据(同步)
			getStorageSync() {
				const res=uni.getStorageSync('id');
				console.log(res);
			},
			// 移除数据(异步)
			removeId() {
				uni.removeStorage({
					key: 'id',
					success() {
						console.log("删除成功!")
					}
				})
			},
			// 移除数据(同步)
			removeIdSync() {
				uni.removeStorageSync('id');
			}
		}
	}
</script>

<style>

</style>

上述案例操控的键都是写死的没有用到文本框传参，当点击存储数据过后，可以在浏览器检查模式的本地存储中找到存储的键值对