$Page

• Type:

  function $Page<Data extends Record<string, any>, Custom extends Record<string, any>>(
    name: string,
    options: PageOptions<Data, Custom>,
  ): void;

  Parameters:

  • name: page short name
  • options: page options

Page registrar provided by the framework.

// pages/index/index.ts
import { $Page } from "@mptool/skyline-enhance";

$Page("main", {
  // your config here
});

Extensions

onRegister

• Type: (): void

Called just before the page registers.

Warning

Mini-program native methods are not yet mounted on this at this point.

onAwake

• Type: onAwake(time: number): void | Promise<void>

• Parameters:

  • time: duration of this sleep, in ms

Called when the mini-program is brought back from the background while the page is alive.

Warning

The framework does not inspect or wait for an async return value.

Unsupported lifecycles

In Skyline mode, pages are registered on demand when first navigated to, so this package does not provide the following lifecycles (they are only available with @mptool/enhance):

• onAppLaunch
• onNavigate
• onPreload

Injected properties

$name

• Type: string

Current page name.

$state

• Type: PageState & Record<string, unknown>

Page state generated by the framework.

Independent per instance

Each page instance receives its own $state at onLoad (initialized from the state in the page definition), so you can safely read and write business data, and multiple instances of the same page do not affect each other.

Async data

The initial value of $state is copied at onLoad. If data must be fetched asynchronously, write it to the instance's $state in onLoad or a later lifecycle, so each instance keeps its own data.

The Skyline version has no onAppLaunch / onPreload / onNavigate, so the framework does not write any state before instance creation.

:::

• $state.firstOpen: whether this is the first opened page

Event dispatch

The event dispatch members are all instance properties or methods of Emitter:

• $on(type: string, handler: (event?: any) => void | Promise<void>): void: listen for the type event

• $emit(type: string, event?: any): void: emit the type event synchronously

• $emitAsync(type: string, event?: any): Promise<void>: emit the type event asynchronously and accept a callback

• $off(type: string, handler?: (event?: any) => void | Promise<void>): void: remove the handler for type, or all handlers when handler is omitted

$refs

• Type: Map<string, ComponentInstance>

Map of child component instances that have a ref; can be used to access child component references.

Example

<custom-component binding="$" ref="customComp1" />

$Page("main", {
  onLoad() {
    this.$refs.get("customComp1"); // instance reference of the custom-component1 child
  },
});

$

Parent-child component communicator, providing the ability to establish communication between parent and child components, or between pages and components, through binding="$".

Page information

$currentPage

• Type: (): PageInstance | undefined

Get the current page instance.

Warning

Returns undefined when the page stack is empty (for example, during cold start or after all pages have been closed); callers must check for this case.

$getPath

• Type: (name: string): string

Get the page path for the given page short name. The return value is always an absolute path with a leading / (for example, /pages/main when configured as pages/main), normalized consistently with $go.

Navigation methods

The following methods are the same as in enhance: pageName is a page short name, optionally with a queryString; you can also pass an absolute path with parameters.

Warning

Because relative URL syntax can be confused with page short names, the framework does not support relative-path navigation. Always use a page short name or an absolute path.

Tips

The Skyline version has no navigation lock, so navigation always executes immediately. To share types with @mptool/enhance, the return types below include undefined, but they always resolve to the navigation result.

$go

• Type: (pageName: string) => Promise<WechatMiniprogram.NavigateToSuccessCallbackResult | undefined>

Navigate to the specified page. This wraps wx.navigateTo.

this.$go("play?vid=xxx&cid=xxx");

$redirect

• Type: (pageName: string) => Promise<WechatMiniprogram.GeneralCallbackResult | undefined>

Redirect to the specified page, i.e. replace the page without creating history. This wraps wx.redirectTo.

this.$redirect("about?year=2021");

$switch

• Type: (pageName: string) => Promise<WechatMiniprogram.GeneralCallbackResult | undefined>

Switch to the specified tabBar page and close all other non-tabBar pages. This wraps wx.switchTab.

Warning

wx.switchTab does not support parameters: in enhance, the query is only used to trigger onNavigate, but the Skyline version has no such lifecycle, so the query is ignored entirely.

this.$switch("main");

$reLaunch

• Type: (pageName: string) => Promise<WechatMiniprogram.GeneralCallbackResult | undefined>

Close all pages, then open a page within the app. This wraps wx.reLaunch.

this.$reLaunch("main?user=mrhope");

$back

• Type: (delta = 1) => Promise<WechatMiniprogram.GeneralCallbackResult | undefined>

A simple wrapper around wx.navigateBack; delta is the number of levels to go back and defaults to 1. When the page stack is insufficient and home is configured, the framework calls reLaunch to home.

View-layer proxies

Use a data-set on elements to bind navigation configuration:

• data-url: target page short name or absolute path, optionally with parameters
• data-delta: number of levels for $bindBack to go back
• data-before: executed before navigation
• data-after: executed after navigation

Available proxies: $bindGo, $bindRedirect, $bindSwitch, $bindRelaunch, $bindBack.

Warning

data-after runs only when navigation actually happens (the wx navigation API returns successfully); it does not run when navigation fails or does not actually happen (the Promise resolves to undefined). Navigation failures are caught and logged as errors, so no unhandled Promise rejection is produced.

Tips

<button catch:tap="$bindGo" data-url="play" data-before="onClickBefore">click go</button>