学习Uni-app开发小程序Day14

烟火星云

已于 2024-05-17 16:43:16 修改

阅读量767

点赞数 30

文章标签：学习 uni-app 小程序

于 2024-05-16 15:20:51 首次发布

本文链接：https://blog.csdn.net/qq_34080064/article/details/138960340

版权

今天学习其他的api，接上回，继续学习界面。，这节主要是学习：设置导航条、页面路由、设置tabBar，下拉刷新、数据缓存

设置导航条

uni.setNavigationBarTitle

动态设置当前页面的标题,注意：如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间
使用方法：uni.setNavigationBarTitle({ title: '新的标题' });

uni.setNavigationBarColor

设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖

uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ff0000',
    animation: {
        duration: 400,
        timingFunc: 'easeIn'
    }
})

uni.showNavigationBarLoading

在当前页面显示导航条加载动画。这就是在导航栏名称前显示一个loading的，App平台调用此API时会在屏幕中间悬浮显示loading；uni.showNavigationBarLoading()

uni.hideNavigationBarLoading

在当前页面隐藏导航条加载动画。uni.hideNavigationBarLoading()

uni.hideHomeButton

隐藏返回首页按钮，只适用于微信小程序、京东小程序

这个在文档中是有详细介绍的，这里不做过多说明、

设置TabBar

uni.setTabBarItem

动态设置 tabBar 某一项的内容

uni.setTabBarItem({
  index: 0, //更改的下标，就是需要修改那个tab
  text: 'text', //修改的名称
  iconPath: '/path/to/iconPath', //修改显示的图片
  selectedIconPath: '/path/to/selectedIconPath' //修改成选中后显示的图
})
//注意: 设置 iconfont（字体） 属性时，pages.json iconfontSrc 需要指定字体文件，参考下面的配置
// pages.json
{
  "tabBar": {
    "iconfontSrc":"static/iconfont.ttf",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "Tab1",
        "iconfont": {
          "text": "\ue102",
          "selectedText": "\ue103",
          "fontSize": "17px",
          "color": "#000000",
          "selectedColor": "#0000ff"
        }
      }
    ]
  }
}

uni.setTabBarStyle

动态设置 tabBar 的整体样式

uni.setTabBarStyle({
  color: '#FF0000',
  selectedColor: '#00FF00',
  backgroundColor: '#0000FF',
  borderStyle: 'white'
})

uni.hideTabBar和uni.showTabBar

这是隐藏tabBar和显示的，使用很少，只需要知道这个

uni.setTabBarBadge

为 tabBar 某一项的右上角添加文本，这是常用的，这里最好是在App.vue
中设置，在onLaunch中进行

uni.setTabBarBadge({
  index: 0, //tabBar的哪一项，从左边算起
  text: '1' //显示的文本，不超过 3 个半角字符
})

uni.removeTabBarBadge

移除 tabBar 某一项右上角的文本，参数是index，从左开始

uni.showTabBarRedDot

显示 tabBar 某一项的右上角的红点,参数是index，从左开始

uni.hideTabBarRedDot

隐藏 tabBar 某一项的右上角的红点，参数是index，从左开始

uni.onTabBarMidButtonTap

监听中间按钮的点击事件

这是设置tabBar的，在文档中更详细，这里只做记录

下拉刷新

onPullDownRefresh

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新

uni.startPullDownRefresh

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致

uni.stopPullDownRefresh()

停止当前页面下拉刷新

{
    "pages": [
        {
        	"path": "pages/index/index",
        	"style": {
        		"navigationBarTitleText": "uni-app",
        		"enablePullDownRefresh": true
        	}
        }
    ],
    "globalStyle": {
    	"navigationBarTextStyle": "white",
    	"navigationBarBackgroundColor": "#0faeff",
    	"backgroundColor": "#fbf9fe"
    }
}
// 仅做示例，实际开发中延时根据需求来使用。
export default {
	data() {
		return {
			text: 'uni-app'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}

页面路由

uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

uni.redirectTo

关闭当前页面，跳转到应用内的某个页面
跳转到 tabBar 页面只能使用 switchTab 跳转

uni.reLaunch

关闭所有页面，打开到应用内的某个页面
注意：如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

uni.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意：如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

uni.switchTab({
	url: '/pages/index/index'
});

uni.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

EventChannel

EventChannel.emit(string eventName, any args)

触发一个事件
string eventName 事件名称
any args 事件参数

EventChannel.off(string eventName, function fn)

取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数
string eventName 事件名称
function fn 事件监听函数
参数 any args 触发事件参数

EventChannel.on(string eventName, function fn)

持续监听一个事件
string eventName 事件名称
function fn 事件监听函数
参数 any args 触发事件参数

EventChannel.once(string eventName, function fn)

监听一个事件一次，触发后失效
string eventName 事件名称
function fn 事件监听函数
参数 any args 触发事件参数

数据缓存

uni.setStorage

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

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

注意：uni-、uni_、dcloud-、dcloud_为前缀的key，为系统保留关键前缀。如uni_deviceId、uni_id_token，请开发者为key命名时避开这些前缀

uni.setStorageSync(KEY,DATA)

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

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

uni.getStorage(OBJECT)

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

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

uni.getStorageSync(KEY)

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

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

uni.getStorageInfo(OBJECT)

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

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

uni.getStorageInfoSync()

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

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

uni.removeStorage(OBJECT)

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

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

uni.removeStorageSync(KEY)

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

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

uni.clearStorage()

清理本地数据缓存。

uni.clearStorage();

uni.clearStorageSync()

同步清理本地数据缓存。

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

注意

uni-app的Storage在不同端的实现不同：

H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
百度小程序策略详见、抖音小程序策略详见
非App平台清空Storage会导致uni.getSystemInfo获取到的deviceId改变
除此之外，其他数据存储方案：

H5端还支持websql、indexedDB、sessionStorage
App端还支持SQLite、IO文件等本地存储方案

哎，该章节是从文档中进行的复制，并没有汰深入了解，只是听着视频，然后对照文档进行查看，觉得难度不大，就没有将所有属性进行验证。
看来还是有点懈怠了，继续努力吧！！！