A mini program framework provides the foundational development tools and standards needed to build WeChat mini programs efficiently. It abstracts away complexity and enables developers to focus on application logic by managing structure, data flow, and page interacsions.
Project Structure Overview
Creating a New Project
When creating a new mini program project, remove all sample code to keep only the essential files. The minimum viable project structure should contain only what's necessary for the application to run.
Core Configuration Files
app.js - Application Entry Point
// app.js
App({
onLaunch() {
const logs = wx.getStorageSync('logs') || [];
logs.unshift(Date.now());
wx.setStorageSync('logs', logs);
wx.login({
success: res => {
// Send res.code to backend to retrieve openId, sessionKey, unionId
}
});
},
onShow(opt) {
// Triggered when app starts or returns to foreground
},
onHide(opt) {
// Triggered when app moves to background
},
onError(msg) {
// Triggered on script errors or API failures
},
globalData: {
userInfo: null
}
});
app.json - Global Configuration
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "WeChat",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
index.js - Page Logic
// pages/index/index.js
Page({
data: {
},
onLoad(options) {
},
onReady() {
},
onShow() {
},
onHide() {
},
onUnload() {
},
onPullDownRefresh() {
},
onReachBottom() {
},
onShareAppMessage() {
}
});
Reactive Data Binding
index.js Implementation
// pages/index/index.js
Page({
data: {
message: 'initial value'
},
handleTap() {
this.setData({
message: 'value after button press'
});
}
});
The Page function registers a page and accepts a configuration object defining the page's initial state, lifecycle callbacks, and event handlers. The data property holds the page's reactive state, while methods like handleTap respond to user interactions by calling this.setData() to update the state.
index.wxml - Template Markup
<!--pages/index/index.wxml-->
<view>
{{message}}
</view>
<input value="{{message}}" />
<button bindtap="handleTap">Click Me</button>
WXML templates define the page structure. Double curly brace syntax {{variable}} creates data bindings. The bindtap directive attaches click handlers to elements.
index.wxss - Styling
/* pages/index/index.wxss */
input {
border: 1px solid black;
}
input, view, button {
margin: 100rpx;
}
WXSS provides styling capabilities similar to CSS. The rpx unit is a responsive unit specific to mini programs, automatically scaling based on screen size.
Data Flow Behavior
When the page loads, message has the initial value 'initial value', which displays in both the view and input components. Clicking the button triggers handleTap, which updates the state via setData(). The framework automatically re-renders bound components to reflect the new value.
Directly modifying input fields without triggering the button handler does not update the bound data. This demonstrates that mini programs use one-way data binding—data flows from the JavaScript layer to the view layer, not the other direction.
Logic Layer Components
The logic layer in WeChat mini programs includes several fundamental APIs for managing application state, page lifecycle, and navigation.
App Function
The App() function registers the entire mini program instance. It accepts a configuration object containign lifecycle callbacks, global data, and custom methods.
App Configuration Parameters
Lifecycle Callbacks:
onLaunch(options): Fires once when the mini program initializes. Use this for one-time setup tasks like authentication. onShow(options): Fires when the app starts or returns from background. onHide(): Fires when the app moves to background. onError(error): Fires on JavaScript errors or failed API calls. onPageNotFound(options): Fires when a requested page doesn't exist. onUnhandledRejection(res): Fires for unhandled Promise rejections.
Global State:
globalData: Application-wide state accessible from any page via getApp().
Usage Example:
App({
onLaunch(options) {
console.log('App Launch', options);
}
});
The application object registered with App() can be accessed from any page in the mini program using the getApp() global function, allowing shared access to global data and methods.