何以解忧
何以解忧
发布于 2024-05-19 / 91 阅读
0
0

uni-app 笔记

uniapp组件

  • 通过uni-app的easycom 将组件引入精简为一步。只要组件安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册,直接在页面中使用。

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
			<uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
		// 这里不用import引入,也不需要在components内注册uni-badge组件。template里就可以直接用
	</script>

数据缓存

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。

OBJECT 参数说明

参数名

类型

必填

说明

key

String

本地缓存中的指定的 key

data

Any

需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

示例

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

复制代码

注意

  • uni-uni_dcloud-dcloud_为前缀的key,为系统保留关键前缀。如uni_deviceIduni_id_token,请开发者为key命名时避开这些前缀。

uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

参数说明

参数

类型

必填

说明

key

String

本地缓存中的指定的 key

data

Any

需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

复制代码

uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

参数名

类型

必填

说明

key

String

本地缓存中的指定的 key

success

Function

接口调用的回调函数,res = {data: key对应的内容}

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数

类型

说明

data

Any

key 对应的内容

示例

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

复制代码

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明

参数

类型

必填

说明

key

String

本地缓存中的指定的 key

示例

try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

复制代码

uni.getStorageInfo(OBJECT)

异步获取当前 storage 的相关信息。

平台差异说明

App

H5

微信小程序

支付宝小程序

百度小程序

HBuilderX 2.0.3+

OBJECT 参数说明

参数名

类型

必填

说明

success

Function

接口调用的回调函数,详见返回参数说明

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数

类型

说明

keys

Array<String>

当前 storage 中所有的 key

currentSize

Number

当前占用的空间大小, 单位:kb

limitSize

Number

限制的空间大小, 单位:kb

示例

uni.getStorageInfo({
	success: function (res) {
		console.log(res.keys);
		console.log(res.currentSize);
		console.log(res.limitSize);
	}
});

复制代码

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

平台差异说明

App

H5

微信小程序

支付宝小程序

百度小程序

HBuilderX 2.0.3+

示例

try {
	const res = uni.getStorageInfoSync();
	console.log(res.keys);
	console.log(res.currentSize);
	console.log(res.limitSize);
} catch (e) {
	// error
}

复制代码

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

OBJECT 参数说明

参数名

类型

必填

说明

key

String

本地缓存中的指定的 key

success

Function

接口调用的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

示例

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

复制代码

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

参数说明

参数名

类型

必填

说明

key

String

本地缓存中的指定的 key

示例

try {
	uni.removeStorageSync('storage_key');
} catch (e) {
	// error
}

复制代码

uni.clearStorage()

清理本地数据缓存。

示例

uni.clearStorage();

复制代码

uni.clearStorageSync()

同步清理本地数据缓存。

示例

try {
	uni.clearStorageSync();
} catch (e) {
	// error
}


更多笔记未完待续


评论