uni-app取消原生导航栏、全局文件下的easycom和tabbar、condition以及分包

菜蛋_
3,478 阅读11分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

如何取消原生导航栏？或自定义导航

全局取消原生导航栏

在pages.json的globalStyle里，有个navigationStyle设置，默认是default，即带有原生导航栏。
也可以设置为custom。
在设为custom后，所有页面都没有原生导航。
但在微信小程序里，右上角始终都有一个胶囊按钮。
很多微信小游戏界面上也没原生导航栏，但有胶囊按钮。
一般App里不会使用这个参数配置。建议个别页面单独设置不使用原生导航

单独去除原生导航栏

支持通过如下方法取消单独一个页面的原生导航栏。但小程序右上角胶囊按钮仍然去不掉。页面配置 navigationStyle 为 custom：

image.png

原生导航栏在App侧的扩展

微信小程序的设计里，没有给原生导航提供太多自定义能力。在开发App时是不够用的。
pages.json里，每个page下面的style下面还有一个子扩展节点：app-plus。
这个节点定义了在5+App环境下，也即iOS、Android环境下，增强的配置。
其中有一个子节点titleNView，这个是5+规范里webview页面的原生导航窗体规范。

App去除导航栏后改变状态栏样式

App因为默认为沉浸式，去除导航栏后，页面顶部会直通到状态栏的区域，可能出现如下需求：

  • 改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。如果想单独设置颜色，App端可使用[plus.navigator.setStatusBarStyle]设置。部分低端Android手机（4.4）自身不支持设置状态栏前景色。
  • 改变状态栏背景颜色：通过绘制一个占位的view固定放在状态栏位置，设置此view的背景颜色，即可达到想要的效果，uni-app提供了一个状态栏高度的css变量

image.png

给原生导航栏添加自定义按钮

注意：按钮的点击事件需要在页面监听[onNavigationBarButtonTap]件

页面监听代码如下

image.png pages.json配置如下：

image.png buttons的text推荐使用字体图标。
如果按钮使用的汉字或英文较长，推荐把字体改小一点，或者调节按钮宽度等值。
配置button的背景颜色为透明：background:'rgba(0,0,0,0)'

以上代码在hello uni-app的模板-顶部导航标题栏中有示例。

原生导航栏自定义按钮带红点和角标

image.png 以上代码在hello uni-app的模板-顶部导航标题栏中有示例。

原生导航栏自定义按钮带下拉选择（城市选择

image.png

全局文件下的easycom

免引用，免注册

HBuilderX 2.5.5起支持easycom组件模式。

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目根目录或uni_modules的components目录下，并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 如下：

image.png 不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件库批量安装，随意使用，自动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

在[uni-app插件市场]下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。

easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。设置参数如下：

image.png 自定义easycom配置的示例

如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径。

image.png 说明

  • easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
  • easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
  • 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
  • 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
  • easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
  • nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom

tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置（渲染效率快），不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。
Tips

  • 当设置 position 为 top 时，将不会显示 icon
  • tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
  • tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
  • tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。（放在页面栈里，不销毁）
  • 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

image.png
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

image.png
midButton属性说明（只针对Appd端和H5页面）

image.png
效果

image.png

image.png

tabbar常见问题

  • tabbar 的 js api 见[接口-界面-tabbar]，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。
  • tabbar 的 item 点击事件见[页面生命周期的onTabItemTap]。
  • 代码跳转到 tabbar 页面，api只能使用[uni.switchTab]，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置[open-type="switchTab"]
  • tabbar 的默认高度，在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px，与H5端统一。开发者也可以自行设定高度，调回56px。
  • tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量--window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(--window-bottom) + 10px)
  • 中间带+号的tabbar模板例子，。可跨端，但+号不凸起。如需中间凸起，配置tabbar的midButton。
  • 如果是需要先登录、后进入tab页面，不需要把登录页设为首页，首页仍然是tabbar页，
  • 前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，
  • 微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。
  • PC宽屏上，当页面存在topWindow或leftWindow或rightWindow等多窗体结构时，若想改变 tabbar 显示的位置，请使用 [custom-tab-bar组件] 配置，若想隐藏 tabbar，可以使用如下 css（好处是可以和 leftwindow 等窗体联动）： image.png

image.png

自定义tabbar

原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。

但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。

  • H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 [custom-tab-bar组件]来自定义
  • 普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。所以这种情况建议使用单页方式。单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。如果是App端，nvue单页的性能会显著高于vue页面
  • 微信小程序自定义tabbar：微信提供一直基于webview自定义tabBar的方案。该功能体验不佳，不太推荐使用。)，项目根创建 custom-tab-bar 目录，注意里边的代码是 wxml,wxss，不是 vue，uni-app编译器会直接拷贝该目录到微信小程序中
  • 原生的tabbar有且只有一个且在首页。二级页如需的tab，需自行编写view来实现。一般二级页面更适合的导航是 [segement组件]

condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

image.png

image.png 注意：  在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：

image.png

image.png

subPackages

分包加载配置，此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。

App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：uniapp.dcloud.io/collocation…

subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：

image.png 注意：

  • subPackages 里的pages的路径是 root 下的相对路径，不是全路径。

  • 微信小程序每个分包的大小是2M，总体积一共不能超过20M。

  • 百度小程序每个分包的大小是2M，总体积一共不能超过8M。

  • 支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。

  • QQ小程序每个分包的大小是2M，总体积一共不能超过24M。

  • 字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。

  • 快手小程序每个分包的大小是2M，总体积一共不能超过24M。

  • 分包下支持独立的 static 目录，用来对静态资源进行分包。

  • uni-app内支持对微信小程序、QQ小程序、百度小程序、支付宝小程序、字节小程序(HBuilderX 3.0.3+)、快手小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小

  • 针对vendor.js过大的情况可以使用运行时压缩代码

    • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
    • cli创建的项目可以在package.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
      使用方法：

假设支持分包的 uni-app 目录结构如下

image.png 则需要在 pages.json 中填写

image.png

preloadRule

分包预载配置。

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

image.png app的分包，同样支持preloadRule，但网络规则无效。

avatar
文章
阅读
粉丝