#🎉 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 的用户还不少,哈哈。

相关推荐
m0_73812072几秒前
CTFshow系列——命令执行web38-40
前端·windows·安全·web安全
是小狐狸呀2 小时前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿4 小时前
常用css
前端·css
奶糖 肥晨5 小时前
解决 UniApp 自定义弹框被图片或 Canvas 覆盖的 Bug
uni-app·bug
你的人类朋友5 小时前
说说git的变基
前端·git·后端
姑苏洛言5 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
荷花微笑5 小时前
HBuilderX升级,Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass
uni-app·css3
字节逆旅5 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry5 小时前
Compose 从 View 系统迁移
前端
GIS之路6 小时前
2025年 两院院士 增选有效候选人名单公布
前端