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

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

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

v3.0 之前,主要分支有 base、tabbar、spa、i18n 等,其中前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 切换 tabbar,tabbar 页面无缓存。使用了第三方 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。

详细说说分支变更情况

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

🎉 unibest 文档地址 🎉

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

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

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

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

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

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

相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端