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

菲鸽
10,733 阅读6分钟

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

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

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

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

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

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

// 文件路径为 `./src/layouts/fg-tabbar/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的策略
/**
 * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
 * 0: 'NO_TABBAR' `无 tabbar`
 * 1: 'NATIVE_TABBAR'  `完全原生 tabbar`
 * 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
 * 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' `无缓存自定义 tabbar`
 *
 * 温馨提示：本文件的任何代码更改了之后，都需要重新运行，否则 pages.json 不会更新导致错误
 */
export const TABBAR_MAP = {
  NO_TABBAR: 0,
  NATIVE_TABBAR: 1,
  CUSTOM_TABBAR_WITH_CACHE: 2,
  CUSTOM_TABBAR_WITHOUT_CACHE: 3,
};
// TODO：通过这里切换使用tabbar的策略
export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR;

// selectedTabbarStrategy==NATIVE_TABBAR(1) 时，需要填 iconPath 和 selectedIconPath
// selectedTabbarStrategy==CUSTOM_TABBAR(2,3) 时，需要填 icon 和 iconType
// selectedTabbarStrategy==NO_TABBAR(0) 时，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',
  },
];

温馨提示：本文件的任何代码更改了之后，都需要重新运行，否则 pages.json 不会更新导致错误 非常简单，注意修改完后需要重新运行，以便生成新的 pages.json，否则还是旧的。

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

详细说说分支变更情况

新用户可以不看，老用户可以稍微看下。

把 base、tabbar、spa 合并成了新的 base 分支，并改名为 main 分支。

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

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

其他变更

lint 格式化程序变更

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

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

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

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

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

alovajs 引入

周末肝了一天，已经接入 alovajs 了，会自动同步到各个分支。（通过github 流水线）

alovajs 确实值得推广，文档也很用心。我果断捐赠了 50 大洋，支持开源贡献。

也请了 alovajs 成员帮我看看我写的方式对不对，提交 PR，提高代码优雅度。

🎉 unibest 文档地址 🎉

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

新仓库网址是 “unibest.tech”， 有科技tech的unibest => unibest.tech，主要是这个域名便宜哈哈^_^。

左上角有版本号，没有版本号的是旧仓库（codercup那个）。右上角有 github 的连接，这里进去的就是最新的 unibest 代码仓库，如下图。

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

Star History Chart

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

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

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

记住 unibest.tech，从右上角点进去的不会错。

image.png

avatar
文章
阅读
粉丝