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.