Mastering WeChat Mini‑Program Basics: Config, Lifecycle, and Page Structure

WeChat mini‑programs can be developed using native, wepy, or mpvue approaches; the latter two bundle source files into a dist directory that the developer tools open.

1. app.json – Global Configuration

The app.json file defines the mini‑program’s global settings, including:

pages (Array): list of page file paths.

window (Object): status bar, navigation bar, title, background color.

tabBar (Object): bottom navigation bar (2‑5 items, icons, colors).

networkTimeout (Object): request timeout values.

debug (Boolean): enables debug mode in the developer tools console.

2. app.js – Entry File

The App() function registers the mini‑program and receives an object that defines lifecycle callbacks:

onLaunch – triggered once when the app initializes.

onShow – triggered each time the app becomes visible.

onHide – triggered when the app goes to background.

onError – triggered on script errors or failed API calls.

onPageNotFound – triggered when a requested page does not exist.

Within any page you can call getApp() to obtain the app instance and access its variables and methods.

Example: a variable webShowed in app.js tracks whether a splash page has been shown; the splash page sets it to true in its onShow lifecycle, and onHide resets it to false for proper back‑navigation handling.

3. Page Definition

The Page() function registers a page with an object containing initial data and lifecycle methods:

data – initial page data.

onLoad – called once when the page loads; receives navigation parameters.

onReady – called once after the page first renders.

onShow – called each time the page becomes visible.

onHide – called when the page is hidden (e.g., navigation away).

onUnload – called when the page is unloaded.

onPullDownRefresh – handles pull‑down refresh (requires enablePullDownRefresh in window config).

Each page consists of .wxml (markup), .wxss (styles), .js (logic), and .json (page config). For detailed syntax and component usage, refer to the official documentation.

Further topics such as the build processes of wepy and mpvue will be covered in subsequent articles.