JlsBottomNav

面向小程序 WebView 场景的底部导航组件，H5 端保留当前 80px 高度体系，并同步小程序侧的底栏数据来源、显示规则和 icon 使用方式。

文件说明

• JlsBottomNav.vue 组件主文件，只负责渲染、激活态、高亮、跳转和滚动表现。
• tabbar.api.js 底栏配置接口请求，当前使用 /srv/?a=app_menu。
• tabbar.utils.js 底栏数据归一化、首页兜底、顺序、icon class 解析、目标地址解析。
• useTabbar.js 组件内状态和加载逻辑，支持 api / mock 两种加载模式。
• nav-state.js activeTab 的新旧 key 兼容规则。
• iconfont.css 小程序侧 iconfont 字体定义。
• preview.js 预览辅助层，用于把路由 query 解析成预览参数。
• tabbar.mock.js 预览用 mock 数据。
• index.js 目录入口。

正式接入

1. 引入组件

import JlsBottomNav from '@/components/JlsBottomNav';

2. 页面里控制显示

<JlsBottomNav
  :visible="shouldShowJlsBottomNav"
  :load-options="{
    useMock: false,
    mockData: null,
  }"
/>

visible 为 true 时组件才会渲染并尝试加载数据。

接口显示规则：

• 只有接口成功并返回有效菜单时，才显示接口里的其他按钮
• 如果接口返回 data: []
• 如果接口失败
• 如果接口结构异常

以上情况都统一只保留 home

3. 激活态

组件通过当前路由的 activeTab 识别高亮项，兼容以下写法：

• home
• message / news
• application / list
• mine / user

例如：

?navMode=jls&activeTab=home
?navMode=jls&activeTab=news
?navMode=jls&activeTab=list
?navMode=jls&activeTab=user

Icon 规则

组件和小程序保持一致：

• fa- 开头：按 font-awesome 渲染
• 其他 class：按 iconfont 渲染
• 激活态颜色优先读取接口根级 color

示例：

{ icon: 'fa-home' }
{ icon: 'icon-shijian' }

当前仓库已全局引入 font-awesome。如果移植到别的项目，对方项目也需要提供 font-awesome，或者自行改成别的图标方案。

预览与 Mock

如果只是本地看效果，可以配合 preview.js 使用。

当前项目里的用法是：

import { getJlsTabbarPreviewOptions } from '@/components/JlsBottomNav/preview';

它会读取：

• jlsTabbarPreview=1
• jlsTabbarMock=1

并转换成组件需要的 visible / loadOptions。

示例地址：

/#/checkin/?navMode=jls&activeTab=home&jlsTabbarPreview=1&jlsTabbarMock=1

移植建议

最小正式版本

如果对方项目不需要预览辅助，建议带走这些文件：

• JlsBottomNav.vue
• tabbar.api.js
• tabbar.utils.js
• useTabbar.js
• nav-state.js
• iconfont.css
• index.js

可选开发辅助

如果对方也希望保留本地预览，再额外带走：

• preview.js
• tabbar.mock.js

注意点

• 组件默认按当前小程序规则跳转：
  • home 优先走 wx.miniProgram.redirectTo
  • 非 home 优先走 wx.miniProgram.navigateTo，失败后再降级
• 底栏显示兜底规则是“只保留首页”：
  • 只有接口成功并返回有效菜单时，才显示首页之外的其他项
  • 接口空数组、失败、异常、无法归一化时，都只显示 home
• 当前跳转逻辑是：
  • home 默认跳回小程序页 /pages/index/index
  • 其他项不会直接跳裸 H5 URL，而是优先使用接口返回的 page_url
  • 如果接口没有返回 page_url，则会把 webview_url 包装成小程序承接页地址，例如 /pages/webview-preview/index?url=...
• 也就是说，当前实现仍然是“首页回小程序页，其他项走小程序承接页再打开 H5”，不是“其他项直接在当前 H5 中跳转到接口 URL”。
• 非首页保留页面栈的原因和小程序一致：进入 webview-preview 后，需要保住微信原生左上角返回按钮。
• 当前样式尺寸以 H5 版本为准，没有照搬小程序 rpx 布局。