Global toolbar | Weixin public doc

Start from base library version 3.3.1. Please remaining backward compatible.

Components that can be rendered across pages, using scenes such as music APP Of the bottom toolbar, etc. In a continuous Skyline When the page jumps, the component instance is the same, so the state can be synchronized, and the rendering level is above the page (also in the custom tabbar Above).

in webview Rendering and Skyline When mixing between renders, there are the following limitations:

app-bar Components support only Skyline Rendering, from the webview Page jump Skyline Page will appear, return to the webview The page disappears.
Continuous Skyline Jump between pages,app-bar Components are the same instance, if separated from the webview, are different instances and the state is out of sync.
from Skyline Return to the webview Page, enter again Skyline，app-bar Component instances are rebuilt and the state is out of sync.

# sample code

Developer tools need to be upgraded to Nightly 1.06.2401052, Base Library Selection 3.3.1

# Example - 1 Mixed jump scene

{% Minicode ('zBQSTXmv7tNY') %}

{% Minicode ('iHQv5ZmT7ZNW') %}

# Use Process

# 1. Configuration information

in app.json Add in appBar Options.

Example:

{
  "appBar": {}
}

# 2. Add to appBar Code file

Add the entry file to the root directory, taking care not to change the file name.app-bar Components cannot be declared as virtualized nodes virtualHost: true。

app-bar/index.js
app-bar/index.json
app-bar/index.wxml
app-bar/index.wxss

# 3. write appBar code

Written in the form of a custom component that completely takes over the appBar Of the rendering. In addition, custom components added getAppBar Interface to get the current page under the appBar Component instance.

# 1. Responding to Events

To prevent blocking the page,app-bar The component root node is added by default pointer-events: None, when the node in the component needs to respond to a click, add the pointer-events: auto。

<view class="tool-bar"></view>

.tool-bar {
  pointer-events: auto
  position: absolute
}

# 2. Get a Component Instance

Page({
  getInstance () {
    if (typeof this.getAppBar === 'function' ) {
      const AppBarComp  = this.getAppBar()
      appBarComp.setData({})
    }
  }
})

# Global toolbar