全局组件，一次编写全量实现

发表时间:Wed Mar 06 2024 17:30:43 GMT+0800 (中国标准时间)

gh_56fc3b00cc4f https://mmbiz.qpic.cn/sz\_mmbiz\_jpg/Hm69WQTQfWFvhLc2GFH3cQ4uPjKPX1apRqCX3xUiaay1VblCovn4J1KUAXZcibXj74oslK2x6VBeictwmm1iaujIPw/0?wx_fmt=jpeg

在小程序页面结构中，我们会发现常用功能应用在多个页面，例如底部 tabbar 常常应用在小程序的全部页面。以往开发者通过自定义组件方式来覆盖所有页面。但这种方式不仅代码量大，影响性能表现；而且状态同步复杂，用户体验不够丝滑。

底部 tabbar、顶部切换栏目是常见的全局应用功能

现在 Skyline 小程序渲染引擎 已经全面支持 全局组件，开发者仅需一次编写即可在全部页面快速实现交互效果，开发量更少、性能更好、用户操作更便捷。

👉 体验丝滑的 工具栏 demo

更显著的应用优势

对比自定义组件的方式，全局组件的优势明显：

• 开发更简单：开发者仅需编写一次代码，即可全局统一调用，避免以往每个页面都需要编写重复代码的麻烦

• 自定义能力更丰富：搭配手势系统、worklet 动画等组件，快速实现更丰富的交互效果

• 性能更优秀：重复代码的减少能够有效提升代码包加载速度，性能提升更明显

• 体验更丝滑：全局组件支持跨页面渲染和状态同步，同时渲染层级最高，保证在用户切换不同页面的时候，工具栏的状态得到保持，体验更丝滑

更简单的开发过程

应用全局组件能够有效减少开发成本，仅需简单 3 步即可轻松实现：

1. 配置信息：在 app.json 文件中添加 appBar 选项

2. 添加 appBar 代码文件：在代码根目录下添加 app-bar/index.js 等 4 个入口文件

3. 编写 appBar 代码：使用自定义组件的方式编写 appBar 代码

👉 点击查看代码

// 第一步：配置信息

当然开发者也希望提供更丰富、更贴近原生的交互效果，满足用户的使用体验。因此在基础 app-bar 的前提上，我们也可以尝试结合 手势系统、worklet 动画 实现更丝滑、更 “炫酷” 的工具栏设计。

通过手势轻松实现工具栏最小化 / 最大化

通过 worklet 动画丝滑适配工具栏内容

实现上图示例的效果并不复杂，仅需 2 步代码编写：

1. 编写自定义组件代码：在 app-bar/index.wxml 中根据业务诉求编写自定义组件代码，与当前编写方法一致

2. 补充自定义动画效果代码：例如示例使用了手势系统和 worklet 动画，我们需要添加对应的事件

👉 点击查看代码

// 第一步：编写自定义组件代码

如果开发者朋友们希望快速应用全局组件，点击 代码片段（请使用 PC 端浏览器打开）即可一站应用。

全局组件 FAQ

使用全局组件非常方便，但开发者需要了解以下注意事项，更好地应用全局组件：

1. 全局组件仅支持 3.3.1 及以上基础库版本

2. 全局组件仅支持 Skyline 渲染，不支持 WebView 渲染，因此需要 切换到 Skyline 方可实现

3. 如果小程序同时应用 WebView 与 Skyline（当前支持单个页面切换 Skyline），开发者需要注意跳转页面的状态变化

4. 由于全局组件的渲染层级最高，因此开发者需要留出足够空间容纳全局组件，避免与其他页面元素发生层级覆盖

应用 全局组件 不仅能够有效降低开发成本；而且提升用户体验，便于轻松访问常用功能；同时支持自定义工具栏，满足更多交互设计需求。欢迎各位开发者体验，轻松实现交互效果！

同时 Donut 多端框架 也支持接入 Skyline 渲染引擎，多端应用同步实现更流畅的交互效果，欢迎各位开发者接入！

如有 Skyline 渲染引擎相关问题，可在 Skyline 社区专区 发帖互动，技术专员将为大家解答及进行深度交流。

阅读原文