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

首页 编程分享 JQUERY丨JS丨VUE 正文

菲鸽 转载 编程分享 2025-06-24 19:59:16

简介 🎉 unibest 3.0 发布了!看看都更新了啥好用的功能~ 大家好,我是菲鸽,昨天周六(2025-06-21)肝了一整天,实现了我一直想实现但是没时间实现的功能:多个 tabbar 相关的分支统一


🎉 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 即可。关键代码如下:

/**
 * 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

肝了一天,已经接入 alovajs 了,会自动同步到各个分支。(通过github 流水线)

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

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

🎉 unibest 文档地址 🎉

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

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

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

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

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

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

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

转载链接:https://juejin.cn/post/7518343357765124136


Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论




ABOUT ME

Blogger:袅袅牧童 | Arkin

Ido:PHP攻城狮

WeChat:nnmutong

Email:nnmutong@icloud.com

标签云