小程序全局工具栏：提升用户体验的新利器
[图片] 在过去的小程序开发过程中，全局工具栏一直是开发者们急需解决的问题。然而，小程序并未直接支持此功能，开发者们只能采用自定义组件方式来实现。这种方法需要在每个页面的 wxml 中引入组件，导致大量重复代码，同时状态同步过程复杂且不够顺滑，给开发者带来了很大的困扰。 为了解决这个头疼的问题，Skyline 已经支持了小程序全局工具栏功能。这个全新的功能将大大简化开发流程，提升用户体验和操作便利性。全局工具栏可以实现跨页面渲染和状态同步，其渲染层级位于页面之上，使得用户在不同页面间切换时，工具栏的状态能得到保持，大大增强了操作的便利性。 接下来的文章中，我们将详细介绍小程序全局工具栏的使用流程，希望能帮助开发者们更好地理解和应用这一强大的功能～ 使用步骤通过以下三个步骤，你将能够轻松实现全局工具栏的功能： 1、配置信息：首先，在 app.json 文件中添加 appBar 选项，如下所示： {
"appBar": {}
}
2、添加 appBar 代码文件：在代码根目录下添加入口文件，包括以下四个文件： app-bar/index.js
app-bar/index.json
app-bar/index.wxml
app-bar/index.wxss
3、编写 appBar 代码：使用自定义组件的方式编写 appBar 代码。在 app-bar/index.js 文件中，创建一个自定义组件实例，并在 app-bar/index.wxml 文件中编写组件的结构。同时，可以在 app-bar/index.wxss 文件中添加样式。最后，在需要获取 appBar 组件实例的页面中，使用 getAppBar 接口获取实例，进行操作。例如： Page({
getInstance() {
if (typeof this.getAppBar === 'function') {
const appBarComp = this.getAppBar();
appBarComp.setData({});
}
}
});
通过以上三个步骤，你已经成功实现小程序全局工具栏，从而简化开发流程并提升用户体验和操作便利性～ 注意事项和限制在使用小程序全局工具栏时，我们需要关注以下几点注意事项和限制，以确保功能的正常运行： app-bar 组件仅支持 Skyline 渲染，Webview 渲染不支持，需确保项目采用 Skyline 渲染引擎以实现全局工具栏功能。在 Webview 渲染和 Skyline 渲染之间混跳时，全局工具栏的状态同步会受到影响，需要注意在跳转页面时处理状态变化。由于全局工具栏的渲染层级位于页面之上，需要避免与其他页面元素发生层叠覆盖，确保留出足够的空间容纳全局工具栏，避免影响用户体验。全局工具栏功能需要 v3.3.1 及以上的小程序基础库版本支持。遵循以上注意事项和限制，开发者将能够更好地利用小程序全局工具栏功能，提升用户体验和操作便利性。 案例展示我们通过实际案例来介绍小程序全局工具栏的应用场景～ 以微信学堂为例，我们可以使用全局工具栏来实现课程播放栏的功能。在课程播放的过程中，我们可以浏览其他课程、查看课程介绍等等。在这种情况下，实现一个全局的课程播放栏可以很好地提升用户体验。借助小程序全局工具栏，我们可以轻松实现这一功能～ [图片] 接下来，让我们来看看具体的代码实现～ 使用十分简单，我们参照使用步骤建立 app-bar 组件，然后我们只需要在 app-bar 组件中实现我们的业务代码即可。 我们的课程播放器还结合了手势和 worklet 动画，实现了最小化和最大化全局工具栏的效果，用户可以根据自己的需要来切换全局工具栏的大小，提高用户使用体验，实现更加丰富和高效的用户界面～ 在 app-bar/index.wxml 中，实现的代码与我们平时写自定义组件无异，可以根据业务诉求实现自定义的组件，我们这里展示了课程播放器的实现。 <!-- 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>
因为我们在 wxml 中使用了手势系统，所以我们需要给手势加上手势事件，这样我们就实现了一个顺滑的课程播放器啦～ 如果你还没有学习过 worklet 动画和手势系统，建议可以学习一下 worklet 动画 和 手势系统，了解之后你将更好地理解我们在课程播放器中使用的手势和 worklet 动画的实现方式，同时，worklet 动画和手势系统也可以帮助你实现更加复杂和丰富的用户界面。 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 / screenHeight
this.handleDragUpdate(delta)
} else if (evt.state === GestureState.END) {
const velocity = evt.velocityY / screenHeight
this.handleDragEnd(velocity)
} else if (evt.state === GestureState.CANCELLED) {
this.handleDragEnd(0.0)
}
},
// 手势变化时
handleDragUpdate(delta) {
'worklet'
const curValue = this.progress.value
const newVal = curValue - delta
this.progress.value = clamp(newVal, 0.0, 1.0)
},
// 手势结束时
handleDragEnd(velocity) {
'worklet'
...
if (animateForward) {
this.progress.value = timing(
1.0, {
duration: 200,
easing: animationCurve,
})
}
...
}
}
})
以上是我们实现课程播放器的核心代码，如果您想要进一步了解和实践，可在 PC 端点击 代码片段 进行调试。 总结小程序全局工具栏为用户提供了更加便捷的操作方式和更丰富的功能，让小程序的使用体验得到了显著提升。通过全局工具栏，用户可以在不同页面间快速切换，轻松访问常用功能，同时还可以自定义工具栏，满足个性化需求。此外，全局工具栏还可以帮助开发者提高用户粘性，提升小程序的活跃度。 小程序全局工具栏适用于多种场景，如电商平台、在线教育、新闻资讯、工具类等。例如，电商平台可以将购物车、订单等入口放置在全局工具栏上，方便用户随时查看和管理；在线教育平台可以将课程列表、学习记录等功能放置在全局工具栏上，方便用户快速找到所需内容。 小程序全局工具栏是一个非常实用的功能，可以帮助用户更好地使用小程序，同时也为开发者提供了提升用户体验和增加用户粘性的机会。我们邀请大家尝试将小程序全局工具栏这个能力应用到自己的小程序上，为用户带来更好的使用体验～
