Lifecycle

In WeDa applications, there are three levels of instances: application (app), page (page), and component (component), with levels from highest to lowest. An application contains 0-n pages, and a page contains 0-n components. Through instance lifecycle hooks, custom code can be inserted at different stages of the instance.

Lifecycle Hooks

Application (app)

hook	Description
onAppLaunch(Object:{query:Record<string, string>})	Triggered when the application is initialized, only once globally. The parameter is an object containing the query (application launch parameters).
onAppShow(Object:{query:Record<string, string>})	Triggered when the application starts or switches from the background to the foreground (Mini Program).

Page (page)

hook	Description
onPageLoad(query:Record<string, string>)	Triggered when the page loads, called only once per page. The 'query' parameter is the parameter object passed when opening the current page.
onPageShow()	Triggered when the page is displayed/switches to the foreground (Mini Program).
onPageHide()	Triggered when the page is hidden/switched to the background (Mini Program), such as when navigating to another page (in Mini Program, specifically referring to actions that destroy the page stack like redirectTo, relunch, navigateBack), or when the Mini Program is switched to the background.
onPageUnload()	Triggered when the page is unloaded, e.g., when navigating to another page, the current page unloads.

Component (comp)

Components may have multiple custom implementations; only the most basic and common lifecycle hooks are listed.

hook	Description
onAttached()	Executed when the component instance is added to the page node tree, corresponding to the react willMount lifecycle.
onReady()	Executed after the component layout is completed. After the ownerComponent's attached is triggered, its child components will trigger ready in a depth-first, front-to-back order (pre-order DFS).
onDetached()	Executed when the component instance is removed from the page node tree.

Scheduling

WeDa has some system behaviors beyond the basic instance lifecycle, covering various synchronous and asynchronous operations:

1. Global/page-level variable initialization, including synchronously initializing parameter variables & asynchronously creating and initializing model variables & initializing auto-triggered data queries
2. Default login, initialize user data
3. Application Page Authentication

ps: There is a system-built-in scheduling phase before the application and page lifecycles. For clarity, we define these two phases as beforeCustomLaunch & beforePageCustomLaunch

Additionally, in custom methods, data methods can also be called via the WeDa API. These methods are asynchronous and will be blocked until after login when they need to request the server.

Consider an application with a structure represented by pseudocode similar to the following:

<app>
  <page>
    <container1><text1 /></container1>
    <container2 />
  </page>
</app>

The scheduling logic is analyzed as follows:

1. Enter the beforeCustomLaunch phase. The next step will not proceed until all synchronous/asynchronous processes are completed. If a failure occurs within this phase, it will directly skip to the next step without blocking the process:

   1. Parse the application parameters and create an application parameters object.
   2. Initiate silent asynchronous login without blocking rendering and lifecycle. Special oauth login is blocking, meaning that during asynchronous login, the current logged-in user may not be stably retrieved within lifecycles like onAppLaunch and onAppShow.
   3. Create global model variables & asynchronously call data source interfaces to initialize data (optional).
   4. Initialize global auto-triggered data queries. This initialization step is an asynchronous operation that does not block any processes.

2. onAppLaunch and onAppShow are triggered concurrently. Due to JavaScript's single-process model, if both methods are synchronous, the final effect resembles serial execution. When the methods are asynchronous, they do not block each other or subsequent processes according to the coroutine implementation.

3. Create the $page page instance, enter the page lifecycle to mount the page container and styles.

4. Enter the beforePageCustomLaunch phase, blocking other page lifecycles:

   1. Parse page parameters and create a parameter object $w.page.dataset.state.params
   2. Page authorization: verify login configuration. If and only when login is completed & page permissions are granted, start rendering page content. Since login is completed, $w.auth.currentUser can be stably obtained in subsequent processes.
   3. Initialize auto-triggered data queries within the page. This initialization step is an asynchronous operation that does not block any processes.

5. After authorization, page rendering begins and components start mounting. container1, text1, and container2 trigger onAttached sequentially (preorder DFS traversal).

6. During mounting, concurrently trigger onPageLoad and onPageShow, scheduled similarly to the app's lifecycle.

7. The page instance didmount triggers container1, text1, and container2 to fire onReady in sequence.

8. page triggers onPageReady.

9. When the page is destroyed and left, onPageHide and onPageUnload are triggered, non-blockingly causing container1, text1, and container2 to fire onDetached in sequence.

Mini Program App/Page

The lifecycle methods exported by the file are merged into the initialization parameters of the corresponding WeChat Mini Program App and Page.

• Mini Program App
• Mini Program Page

By defining lifecycle hooks for Mini Program pages or the app, you can implement and customize Mini Program-specific features. For example:

• Add onThemeChange in the WeDa app lifecycle, and WeDa will convert it to the App parameter.
• To implement Mini Program sharing logic in WeDa, add onShareAppMessage in the page lifecycle. For specific usage, refer to: onShareTimeline, onShareAppMessage

ps: Due to WeChat Mini Program's restriction on sharing to Moments in single-page unauthenticated mode, WeDa Mini Program currently does not support sharing to Moments.

FAQ

1. Q: How is process scheduling performed between different lifecycles?

A: According to the lifecycle rules, when methods are asynchronous, they do not block each other. If there is an explicit dependency, you can schedule them manually.

Example:

async onLoad(){
  // Create a resolver promise and expose the resolver for external invocation.
  let resolver = () => {}
  $w.page.dataset.state.promise = new Promise((resolve)=>{
    resolver = resolve
  }):
  // .... do something

  // Trigger the resolver when needed, thereby transitioning the promise to the resolved state.
  resolver()
}

async onShow() {
  /**
   * Blocking wait for the promise state to change
   * Proceed with subsequent logic only after the promise is resolved.
   */
  await $w.page.dataset.state.promise
}