软件开发功能从无到有，从少到多。或许是时候进入从多到少的阶段了，这几天一直在优化一些功能，尝试进一步优化用户体验。姨妈记录这件事情或许更多的人是习惯自己给自己记录，并不想要分享这些数据。基于这个原因，于是想着能够重新简化用户界面，隐藏tabbar 中间闺蜜的相关功能。
网上搜索了一下解决方案，基本都是通过创建多个 tabbar list 的方式来实现的。这种方法基本是针对不同的用户权限设置完全不同的用户菜单，我并不想要这么复杂的功能，只是想动态控制中间的图标是否显示。
经过一番搜索，发现 uniapp 官方其实提供了相关的操作接口：
uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容
平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 抖音小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √（钉钉小程序不支持） | √ | √ | √ | √ | √ |
OBJECT参数说明：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异 |
|---|---|---|---|---|---|
| index | number | 是 | tabBar 的哪一项，从左边算起 | ||
| text | String | 否 | tab 上的按钮文字 | ||
| iconPath | String | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效。微信小程序 2.7.0+、支付宝小程序支持网络图片，其他平台暂不支持网络图片 | ||
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效 | ||
| pagePath | String | 否 | 页面绝对路径，必须在 pages 中先定义，被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.switchTab 跳转） | App（2.8.4+）、H5（2.8.4+） | |
| visible | Boolean | true | 否 | 该项是否显示 | App（3.2.10+）、H5（3.2.10+） |
| iconfont | Object | 否 | 字体图标，优先级高于 iconPath | App（3.4.4+） | |
| success | Funtion | 否 | 接口调用成功的回调函数 | ||
| fail | Funtion | 否 | 接口调用失败的回调函数 | ||
| complete | Funtion | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
我这里需要的设置的属性是：visible
直接撸代码：
// 单用户模式隐藏闺蜜tab
uni.setTabBarItem({
index: 1,
visible: !this.$getIsSingleUserMode(),
success() {
console.log('set tabbat: success')
},
fail(error) {
console.log('set tabbat: ', error)
}
})
不过在设置页面直接调用这个代码会提示{“errMsg“:“setTabBarBadge:fail not TabBar page“}，在没有 tabbar 的页面设置相关属性会直接报错。
针对这个提示最简单的办法是将代码放入用户页面进行设置，用户页面是带 tabbar 的，但是，直接把这个功能塞入用户页面有点太难看了。尝试了一下之后放弃了，准备采取另外的办法。因为本身这个设置是准备设计成可以保存的配置项，那么也就简单了，在配置页面通过 unistorage 存储配置，页面的 onShow 中读取配置来动态调整菜单就可以了，也省去了再写一套 tabbar list 的麻烦。
配置页面：
setSingleUserMode() {
console.log('hide besties')
// 此页面无法设置tabbar
this.isSingleUserMode = !this.isSingleUserMode;
uni.setStorageSync(
'isSingleUserMode',
this.isSingleUserMode
);
}
需要调整 tabbar 的页面：
onShow() {
this.setCurrentPage(this);
// 单用户模式隐藏闺蜜tab
uni.setTabBarItem({
index: 1,
visible: !this.$getIsSingleUserMode(),
success() {
console.log('set tabbat: success')
},
fail(error) {
console.log('set tabbat: ', error)
}
})
}
实际效果：
14 comments
真的一人一项这么专业，而且撸代码会上瘾哈哈
还是写代码好玩啊
新年好呀，这几天太忙了 结婚的太多了 天天端盘子
新年好啊
这都回去过年啦？
不过年底这么多结婚的吗？我们这里好像没有呢。这年底了还得帮工啊？
确实，等APP值钱了，这些代码都是机密。
这些代码其实还好，不涉及核心逻辑。如果对 uni 框架比较熟悉应该也很容易实现，我是不专业，所以费了点时间，嘻嘻
我开始还以为你整个tabbar不用原生呢（那样麻烦太多了），仔细一看原来不显示某一项。
自己写太麻烦了，作为一个战五渣表示很吃力。哈哈哈。
有没有那种不需要写代码还能写程序的工具呢？
gpt？
只能等生成式ai发力拉
页面里渲染的东西太多的话，uniapp有性能瓶颈，这个我做项目确实遇到过，官方好像有一个UniappX据说可以真正的编译成原生应用，但是目前ios端还没提供，所以没太玩过
性能与原生相比肯定还有差距，这个只要是基于 js 引擎肯定会有性能损失。
如果要编译原生其实可以用 dart 之类的，不过这个我是真没学过，哈哈哈。
uniappx 没用过，找时间了解下。
上次看到你的图片上默认勾选的就是分享，当时就觉得有点不妥想说。
后来一想，只是在APP中分享，也不是分享微信朋友圈，况且女人的心思，咱不懂，万一喜欢与闺蜜讨论这个呢。
另外，以前有时出于好意，直言不讳，想帮助别人，反而引起对方不快或不满，造成矛盾和疏远。
现在留言评论都小心谨慎多了，都不敢完全说出自己的直观想法了。
需求这个东西每个人都有想法，一款产品不可能满足所有人的需求。
我现在的想法是尽可能提供更多的自主配置功能，尽量满足用户自己的使用习惯。
之前主要是增加功能，从无到有，现在主要是优化功能，从有到好。当然也会陆续加入一些新的功能。
女人心海底针嘛，嘻嘻