全局组件，一次编写全量实现
微信团队约 4 分钟在小程序页面结构中，我们会发现常用功能应用在多个页面，例如底部 tabbar 常常应用在小程序的全部页面。以往开发者通过自定义组件方式来覆盖所有页面。但这种方式不仅代码量大，影响性能表现；而且状态同步复杂，用户体验不够丝滑。
底部 tabbar、顶部切换栏目是常见的全局应用功能
现在 Skyline 小程序渲染引擎 已经全面支持 全局组件，开发者仅需一次编写即可在全部页面快速实现交互效果，开发量更少、性能更好、用户操作更便捷。
👉 体验丝滑的 工具栏 demo
更显著的应用优势
对比自定义组件的方式，全局组件的优势明显：
开发更简单：开发者仅需编写一次代码，即可全局统一调用，避免以往每个页面都需要编写重复代码的麻烦
自定义能力更丰富：搭配手势系统、worklet 动画等组件，快速实现更丰富的交互效果
性能更优秀：重复代码的减少能够有效提升代码包加载速度，性能提升更明显
体验更丝滑：全局组件支持跨页面渲染和状态同步，同时渲染层级最高，保证在用户切换不同页面的时候，工具栏的状态得到保持，体验更丝滑
更简单的开发过程
应用全局组件能够有效减少开发成本，仅需简单 3 步即可轻松实现：
配置信息：在 app.json 文件中添加 appBar 选项
添加 appBar 代码文件：在代码根目录下添加 app-bar/index.js 等 4 个入口文件
编写 appBar 代码：使用自定义组件的方式编写 appBar 代码
👉 点击查看代码
// 第一步：配置信息{"appBar": {}}// 第二步：添加 appBar 代码文件app-bar/index.jsapp-bar/index.jsonapp-bar/index.wxmlapp-bar/index.wxss// 第三步：编写 appBar 代码Page({getInstance() {if (typeof this.getAppBar === 'function') {const appBarComp = this.getAppBar();appBarComp.setData({});}}});
当然开发者也希望提供更丰富、更贴近原生的交互效果，满足用户的使用体验。因此在基础 app-bar 的前提上，我们也可以尝试结合 手势系统、worklet 动画 实现更丝滑、更 “炫酷” 的工具栏设计。
通过手势轻松实现工具栏最小化 / 最大化
通过 worklet 动画丝滑适配工具栏内容
实现上图示例的效果并不复杂，仅需 2 步代码编写：
编写自定义组件代码：在 app-bar/index.wxml 中根据业务诉求编写自定义组件代码，与当前编写方法一致
补充自定义动画效果代码：例如示例使用了手势系统和 worklet 动画，我们需要添加对应的事件
👉 点击查看代码
// 第一步：编写自定义组件代码<!-- app-bar/index.wxml --><vertical-drag-gesture-handler worklet:ongesture="handleVerticalDrag"><view class="expand-container"><!-- 最大化展示：nav-bar --><view class="nav-bar column"></view><!-- 跟着手势变化，改变组件的展示效果 --><view class="cover-area" style="height: {{maxCoverSize}}px;"><view class="row " bind:tap="expand"><!-- 跟着手势改变宽高 --><image class="cover" mode="aspectFill" src="{{musicCover}}" /><!-- 最小化展示：标题、按钮 --><view class="title-wrap row-between"><view class="title column"><text overflow="ellipsis" max-lines="1">Skyline 渲染框架入门与实践</text><text class="name" overflow="ellipsis" max-lines="1">小程序技术专员 - binnie</text></view><view class="row"><image class="icon" style="margin-right: 24px;" src="/assets/play.png" /><image class="icon" src="/assets/next.png" /></view></view></view></view><!-- 最大化展示：详情内容 --><view class="music-title">...</view><view class="footer">...</view></view></vertical-drag-gesture-handler>// 第二步：补充自定义动画效果代码Component({lifetimes: {attached() {const progress = shared(0)// 通过 worklet 改变各个组件的状态this.applyAnimatedStyle('.cover', () => {'worklet'...})this.applyAnimatedStyle('.expand-container', () => {'worklet'...})this.applyAnimatedStyle('.title-wrap', () => {'worklet'return {opacity: 1 - progress.value}})this.applyAnimatedStyle('.nav-bar', () => {'worklet'...})this.progress = progress}},methods: {// vertical-drag-gesture-handler 绑定的手势事件handleVerticalDrag(evt) {'worklet'if (evt.state === GestureState.ACTIVE) {const delta = evt.deltaY / screenHeightthis.handleDragUpdate(delta)} else if (evt.state === GestureState.END) {const velocity = evt.velocityY / screenHeightthis.handleDragEnd(velocity)} else if (evt.state === GestureState.CANCELLED) {this.handleDragEnd(0.0)}},// 手势变化时handleDragUpdate(delta) {'worklet'const curValue = this.progress.valueconst newVal = curValue - deltathis.progress.value = clamp(newVal, 0.0, 1.0)},// 手势结束时handleDragEnd(velocity) {'worklet'...if (animateForward) {this.progress.value = timing(1.0, {duration: 200,easing: animationCurve,})}...}}})
如果开发者朋友们希望快速应用全局组件，点击 代码片段（请使用 PC 端浏览器打开）即可一站应用。
全局组件 FAQ
使用全局组件非常方便，但开发者需要了解以下注意事项，更好地应用全局组件：
全局组件仅支持 3.3.1 及以上基础库版本
全局组件仅支持 Skyline 渲染，不支持 WebView 渲染，因此需要 切换到 Skyline 方可实现
如果小程序同时应用 WebView 与 Skyline（当前支持单个页面切换 Skyline），开发者需要注意跳转页面的状态变化
由于全局组件的渲染层级最高，因此开发者需要留出足够空间容纳全局组件，避免与其他页面元素发生层级覆盖
应用 全局组件 不仅能够有效降低开发成本；而且提升用户体验，便于轻松访问常用功能；同时支持自定义工具栏，满足更多交互设计需求。欢迎各位开发者体验，轻松实现交互效果！
同时 Donut 多端框架 也支持接入 Skyline 渲染引擎，多端应用同步实现更流畅的交互效果，欢迎各位开发者接入！
如有 Skyline 渲染引擎相关问题，可在 Skyline 社区专区 发帖互动，技术专员将为大家解答及进行深度交流。