uniapp学习day6

一.

1.css样式导入@import"../../"

<template>
	<view class="box">
	这是box
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
@import "../../common/style.css";
</style>

2.tabBar设置底部菜单项以及iconfont图标

在pages.json中增加tabBar:

"tabBar": {
		"color": "#8f8f94",
		"selectedColor": "#4cd964",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/classify/classify",
				"text": "分类"
			},
			{
				"pagePath": "pages/user/user",
				"text": "个人中心"
			}
		]
	}

添加图标：

"tabBar": {
		"color": "#8f8f94",
		"selectedColor": "#4cd964",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "/static/tabBar/home.png",
				"selectedIconPath": "/static/tabBar/home-h.png"
			},
			{
				"pagePath": "pages/classify/classify",
				"text": "分类",
				"iconPath": "/static/tabBar/classify.png",
				"selectedIconPath": "/static/tabBar/classify-h.png"
			},
			{
				"pagePath": "pages/user/user",
				"text": "个人中心",
				"iconPath": "/static/tabBar/user.png",
				"selectedIconPath": "/static/tabBar/user-h.png"
			}
		]
	}

3.manifest.json应用配置

AppID设置

模块自动导入的插件： csdn

4.API

uni.showToast:

	uni.showToast({
		title:"操作成功",
		icon:"success"
	})

navigator默认是无法跳转到tabBar的页面的，要添加open-type="reLaunch"

uni.showModal: 弹出框

<template>
	<view class="content">
		<button @click="remove">删除</button>
	</view>
</template>

<script setup>
	function remove(){
		uni.showModal({
			title:"是否删除",
			confirmColor:"#dc143c"
		})
	}
</script>

<style lang="scss">
	
</style>

uni.showActionSheet：从底部向上弹出操作菜单

<template>
	<view>
		<button @click="select">选择</button>
	</view>
</template>

<script setup>
	function select(){
		uni.showActionSheet({
			title:"请选择",
			itemList:["高中","大学","研究生"]
		})
	}
</script>

<style lang="scss">

</style>

动态设置页面导航条的样式 uni.setNavigationBarTitle

uni.setNavigationBarTitle({
		title:"动态标题"
	})

下拉刷新： 在pages.json中添加对应的页面位置 "enablePullDownRefresh": true

5.页面和路由

api跳转navigateTo：（之前的navigator是组件）

<template>
	<view @click="goDemo2">
		跳转到demo2
	</view>
</template>

<script setup>
	function goDemo2(){
		uni.navigateTo({
			url:"/pages/demo2/demo2?name=wangwu&age=20"
		})
	}
</script>

<style lang="scss">

</style>

Demo2跳回首页：（这样写是无法实现跳转的）

<template>
	<view>
	   <view @click="goIndex">跳转到首页</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';

	onLoad((e)=>{
		console.log(e);
	})
	function goIndex(){
		uni.navigateTo({
			url:"/pages/index/index"
		})
	}
</script>

<style lang="scss">

</style>

要使用uni.reLaunch:

<template>
	<view>
	   <view @click="goIndex">跳转到首页</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';

	onLoad((e)=>{
		console.log(e);
	})
	function goIndex(){
		uni.reLaunch({
			url:"/pages/index/index"
		})
	}
</script>

<style lang="scss">

</style>

返回上一页：

<template>
	<view>
	   <view @click="goIndex">跳转到首页</view>
	   <view @click="goBack">返回上一页</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';

	onLoad((e)=>{
		console.log(e);
	})
	function goIndex(){
		uni.reLaunch({
			url:"/pages/index/index"
		})
	}
	function goBack(){
		uni.navigateBack()
	}
</script>

<style lang="scss">

</style>

6.数据缓存

存储和读取：

<template>
	<view>
		
	</view>
</template>

<script setup>
	uni.setStorageSync('storage_key','hello');
	uni.setStorageSync('name','李四');
	
	let myName=uni.getStorageSync("name");
	console.log(myName);
</script>

<style lang="scss">

</style>

对某一项进行删除：uni.removeStorageSync("name")

场景：比如说历史记录中要删除某一项

<template>
	<view>
		<button @click="remove">删除一个</button>
	</view>
</template>

<script setup>
	uni.setStorageSync('storage_key','hello');
	uni.setStorageSync('name','李四');
	
	let myName=uni.getStorageSync("name");
	console.log(myName);
	
	function remove(){
		uni.removeStorageSync("name");
	}
</script>

<style lang="scss">

</style>

清除所有：

function clear(){
		uni.clearStorageSync();
	}