#🎉 unibest 3.0 发布了!看看都更新了啥好用的功能\~

🎉 unibest 3.0 发布了!看看都更新了啥好用的功能~

大家好,我是菲鸽,昨天周六(2025-06-21)肝了一整天,实现了我一直想实现但是没时间实现的功能:多个 tabbar 相关的分支统一成一个。

v3.0 之前,主要分支有 basetabbarspai18n 等,其中前3个分支都是跟底部的 tabbar 导航栏相关的,于是我在琢磨能否将他们合并成一个分支,通过不同策略来实现,现在终于实现了。

新实现的 tabbar 导航栏有4种不同的策略,分别对应 0,1,2,3:

  • 0 完全原生 tabbar,使用 switchTab 切换 tabbar,tabbar 页面有缓存。
    • 优势:原生自带的 tabbar,最先渲染,有缓存。
    • 劣势:只能使用 2 组图片来切换选中和非选中状态,修改颜色只能重新换图片(或者用 iconfont)。
  • 1 半自定义 tabbar,使用 switchTab 切换 tabbar,tabbar 页面有缓存。使用了第三方 UI 库的 tabbar 组件,并隐藏了原生 tabbar 的显示。
    • 优势:可以随意配置自己想要的 svg icon,切换字体颜色方便。有缓存。可以实现各种花里胡哨的动效等。
    • 劣势:首次点击 tababr 会闪烁。
  • 2 全自定义 tabbar,使用 navigateTo 切换 tabbartabbar 页面无缓存。使用了第三方 UI 库的 tabbar 组件。
    • 优势:可以随意配置自己想要的 svg icon,切换字体颜色方便。可以实现各种花里胡哨的动效等。
    • 劣势:首次点击 tababr 会闪烁,无缓存。
  • 3 无 tabbar,只有一个页面入口,底部无 tabbar 显示;常用语临时活动页。

代码层面的修改也很简单,只需要修改 selectedTabbarStrategy 为对应的策略数值,然后对应配置 tabbarList 即可。关键代码如下:

ts 复制代码
/**
 * tabbar 选择的策略,更详细的介绍见 tabbar.md 文件
 * 0: 'NATIVE_TABBAR'  `完全原生 tabbar`
 * 2: 'FULL_CUSTOM_TABBAR' `全自定义 tabbar`
 * 1: 'HALF_CUSTOM_TABBAR' `半自定义 tabbar`
 * 3: 'NO_TABBAR' `无 tabbar`
 *
 * 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致错误
 */

// TODO:通过这里切换使用tabbar的策略
export const selectedTabbarStrategy = 0

// selectedTabbarStrategy==0 时,需要填 iconPath 和 selectedIconPath
// selectedTabbarStrategy==1 or 2 时,需要填 icon 和 iconType
// selectedTabbarStrategy==3 时,tabbarList 不生效
export const tabbarList = [
  {
    iconPath: 'static/tabbar/home.png',
    selectedIconPath: 'static/tabbar/homeHL.png',
    pagePath: 'pages/index/index',
    text: '首页',
    icon: 'home',
    iconType: 'uiLib',
  },
  {
    iconPath: 'static/tabbar/example.png',
    selectedIconPath: 'static/tabbar/exampleHL.png',
    pagePath: 'pages/about/about',
    text: '关于',
    icon: 'i-carbon-code',
    // 注意 unocss 的图标需要在 页面上引入一下,或者配置到 unocss.config.ts 的 safelist 中
    iconType: 'unocss',
  },
  // {
  //   pagePath: 'pages/my/index',
  //   text: '我的',
  //   icon: '/static/logo.svg',
  //   iconType: 'local',
  // },
  // {
  //   pagePath: 'pages/mine/index',
  //   text: '我的',
  //   icon: 'iconfont icon-my',
  //   iconType: 'iconfont',
  // },
]

非常简单,注意修改完后需要重新运行,以便生成新的 pages.json,否则还是旧的。

因为有重大分支变更,所以升级了主版本号,从 v2.15.0 升级到了 v3.0.0

详细说说分支变更情况

basetabbarspa 合并成了新的 base 分支,并改名为 main 分支。

原本的 main 分支是文档相关的,已经拆分出去了,在文档的仓库。

今天我又加上了其他几个分支,都是基于新的 main 开发的,主要是 ui 库的整理,方便用户直接生成不同 ui 库的基础模版,如下图。

其他变更

lint 格式化程序变更

原本我是配置了超级好用的 oxlint,速度非常快,爱不释手,但是奈何他还不支持 vue 文件。对于个人项目或者小项目, oxlint + prettier 就够了。但是对于大团队来说,还是不足的,正好有用户提了 issue,正好周末有空,那就整吧。

正好 antfueslint/config 也确实很贴心,几乎所有文件(除了css)都能处理,引入也方便,格式化效果也不错,于是就搞进去了,除了速度慢,没啥毛病。

我们是 uniapp 项目,所以还是用了 uni-helpereslint/config,它对 antfueslint/config 进行了 uniapp 处理。至此搞定了新的 lint 工具。

oxlint 支持 vue 的时候,我们会第一时间切换回来,真香。

吐槽下, eslint 格式化时不时卡死,吐血。

alovajs 引入

新开了个 alovajs ,简单处理了一下,但是感觉还不是最优解,所以还不敢直接放到 main 分支中。有熟悉的大牛可以帮我搞个完备的 alovajs,目前主要是 ts 方面不足,还有上传请求的封装。欢迎PR

🎉 unibest 文档地址 🎉

我发现还是有很多网友近旧的文档地址,新地址的用户访问数还是不足旧地址。旧的文档已经不更新了,因为秘钥丢失,我进不去了。请大家使用新地址访问。

新仓库网址是 "unibest.tech",很好记。左上角有版本号。右上角有 github 的连接,这里进去的就是最新的 unibest 代码仓库,如下图。

如上图,最底部还有 "优秀案例" 的展示,如果您有好的案例也可以在 issue: 📳 Unibest 优秀案例征集!诚邀您的参与 #139中填写,我会不定期整理进去。

我还发现 githubstar 数也是这样,新仓库比不上旧仓库,如上图。看来大家保存都是去年发的文章里面的仓库地址,虽然我已经把文章里面的各种地址都改了,但是之前的人估计不会再去看这些文章了,所以一直存的都是旧地址。

嗯,好了,写得差不多了,希望 unibest 有帮到你。

对了,最后透露一下,目前平均每天有 100+unibest项目生成。看来写 uniapp 的用户还不少,哈哈。

相关推荐
烛阴42 分钟前
Python多进程开发实战:轻松突破GIL瓶颈
前端·python
爱分享的程序员43 分钟前
前端面试专栏-主流框架:11. React Router路由原理与实践
前端·javascript·react.js·面试
weixin_459074351 小时前
在el-image组件的预览中添加打印功能(自定义功能)
前端·javascript·vue.js
知否技术1 小时前
2025微信小程序开发实战教程(三)
前端·微信小程序
海的诗篇_1 小时前
前端开发面试题总结-vue3框架篇(二)
前端·javascript·vue.js·面试·前端框架·vue
大熊程序猿1 小时前
quartz 表达式最近10次执行时间接口编写
java·服务器·前端
广药门徒2 小时前
ad24智能pdf输出的装配图没有四个边角那里的圆孔
前端·javascript·pdf
zhangxingchao2 小时前
Flutter与H5页面的交互
前端
粥里有勺糖2 小时前
视野修炼第124期 | 终端艺术字
前端·javascript·github
zhangxingchao2 小时前
Flutter常见Widget的使用
前端