uniapp专题学习（五）
前言
在uniapp专题学习（四）中学习了以下知识点：
native修饰符、父子组件间的传值、sync修饰符与update响应式写法、vue的生命周期、uniapp的界面的交互反馈(uniapp的api比较多，所以只练习了一部分，更多的用法可以参考uniapp api)。
动态设置TabBar
uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容
示例代码：
uni.setTabBarItem({
index: 0,
text: 'text',
iconPath: '/path/to/iconPath',
selectedIconPath: '/path/to/selectedIconPath'
})
uni.setTabBarStyle(OBJECT)
动态设置 tabBar 的整体样式
详情请点击setTabBarStyle参数说明
示例代码：
uni.setTabBarStyle({
color: '#FF0000',
selectedColor: '#00FF00',
backgroundColor: '#0000FF',
borderStyle: 'white'
})
uni.hideTabBar(OBJECT)
隐藏 tabBar
详情请点击hideTabBar参数说明
示例代码：
uni.hideTabBar()
uni.showTabBar(OBJECT)
显示 tabBar
详情请点击showTabBar参数说明
示例代码：
uni.showTabBar()
uni.setTabBarBadge(OBJECT)
为 tabBar 某一项的右上角添加文本。
详情请点击setTabBarBadge参数说明
示例代码：
uni.setTabBarBadge({
index: 0,
text: '99+'
})
uni.removeTabBarBadge(OBJECT)
移除 tabBar 某一项右上角的文本。
示例代码：
uni.removeTabBarBadge({
index: 0
})
uni.showTabBarRedDot(OBJECT)
显示 tabBar 某一项的右上角的红点。
详情请点击showTabBarRedDot参数说明
示例代码：
uni.showTabBarRedDot({
index: 0
})
uni.hideTabBarRedDot(OBJECT)
隐藏 tabBar 某一项的右上角的红点。
详情请点击hideTabBarRedDot参数说明
示例代码：
uni.hideTabBarRedDot({
index: 0
})
uni.request(OBJECT)
发起网络请求。
在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
详情请点击request参数说明
示例代码：
<template>
<view>
<image :src="imgUrl" @click="getDog"></image>
</view>
</template>
<script>
export default {
data() {
return {
imgUrl:""
};
},
methods:{
getDog(){
uni.showLoading({
title:"图片加载中"
})
uni.request({
url:"https://dog.ceo/api/breeds/image/random",
success: res => {
this.imgUrl = res.data.message
uni.hideLoading()
}
})
}
},
onLoad() {
this.getDog()
}
}
</script>
Tips:
- 携带参数可以添加
data属性 - 修改请求头可以添加
header属性 - 修改请求方式可以添加
method属性
小案例： 打开页面获取所有评论页面，点击评论获取详情评论、回复信息
评论页面
<template>
<view class="out">
<view class="row" v-for="item in list" :key="item.id" @click="clickItem(item.id)">
<view class="title">{{item.title}}</view>
<view class="content">{{item.body}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[]
};
},
methods:{
//获取网络数据
getData(){
uni.request({
url:"http://jsonplaceholder.typicode.com/posts",
success:res=> {
this.list = res.data
}
})
},
clickItem(id){
uni.navigateTo({
url:"../detail/detail?id="+id
})
}
},
onLoad() {
this.getData()
}
}
</script>
<style lang="scss">
.out{
padding: 50rpx 30rpx;
.row{
padding: 20rpx 0;
border-bottom: 1px dotted #e4e4e4;
.title{
font-size: 36rpx;
padding-bottom: 15rpx;
}
.content{
font-size: 28rpx;
}
}
}
</style>
详情页面
<template>
<view>
<view class="detail">
<view class="title">{{objData.title}}</view>
<view class="content">{{objData.body}}</view>
</view>
<view class="comments">
<view class="text">评论</view>
<view class="row" v-for="item in comments" :key="item.id">
<view class="top">
<view class="name">{{item.name}}</view>
<view class="mail">{{item.email}}</view>
</view>
<view class="body">
{{item.body}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
objData:null,
id:1,
comments:[]
};
},
onLoad(e) {
this.id = e.id
this.getDetail()
this.getComments()
},
methods:{
getDetail(){
uni.showLoading({
title:"数据加载中...",
mask:true
})
uni.request({
url:"http://jsonplaceholder.typicode.com/posts/"+this.id,
success:res=>{
this.objData = res.data
},
complete: () => {
uni.hideLoading()
}
})
},
getComments(){
uni.request({
url:`http://jsonplaceholder.typicode.com/posts/${this.id}/comments`,
success:res=>{
this.comments = res.data
}
})
}
}
}
</script>
<style lang="scss">
.detail{
padding: 30rpx;
.title{
font-size: 46rpx;
color: #000;
padding-bottom: 20rpx;
}
.content{
font-size: 30rpx;
color: #666;
padding-bottom: 60rpx;
}
}
.comments{
padding: 30rpx;
background: #f8f8f8;
.text{
font-size: 46rpx;
margin-bottom: 30rpx;
}
.row{
border-bottom: 1px solid #e8e8e8;
padding: 20rpx 0;
.top{
display: flex;
justify-content: space-between;
font-size: 22rpx;
color: #999;
padding-bottom: 15rpx;
}
.body{
font-size: 28rpx;
color: #555;
}
}
}
</style>
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
详情请点击setStorage参数说明
示例代码：
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
详情请点击setStorageSync参数说明
示例代码：
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
详情请点击getStorage参数说明
示例代码：
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
详情请点击getStorageSync参数说明
示例代码：
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
详情请点击removeStorage参数说明
示例代码：
uni.removeStorage({
key: 'storage_key',
success: function (res) {
console.log('success');
}
});
uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。
示例代码：
try {
uni.removeStorageSync('storage_key');
} catch (e) {
// error
}
