The basic architecture of a mini-program (WXML, WXSS, JS, JSON)

WeChat Mini Programs, as a lightweight application form, have become an important choice in mobile development due to their convenient development model and efficient operation mechanism. Their basic architecture consists of four core file types: WXML, WXSS, JS, and JSON, each serving distinct roles to collectively define the logic, styles, and structure of the Mini Program.

WXML: The Structural Layer of Mini Programs

WXML (WeiXin Markup Language) is the template language for Mini Programs, similar to HTML but offering richer components and logical binding capabilities. Through features like data binding, conditional rendering, and list rendering, it tightly integrates dynamic data with the page structure.

Data Binding Example

<view>{{message}}</view>

Define the data in the corresponding JS file:

Page({
  data: {
    message: 'Hello World!'
  }
})

Conditional Rendering

<view wx:if="{{showText}}">Show Text</view>
<view wx:else>Hide Text</view>

List Rendering

<view wx:for="{{items}}" wx:key="id">
  {{index}}: {{item.name}}
</view>

WXSS: The Styling Layer of Mini Programs

WXSS (WeiXin Style Sheets) is the styling language for Mini Programs, extending CSS features with support for rpx units and style imports. Its core goal is to achieve adaptive layouts.

Basic Styling Example

.container {
  width: 750rpx; /* 750rpx equals the screen width */
  height: 200rpx;
  background-color: #f0f0f0;
}

Style Import

@import "common.wxss";

Selector Support

WXSS supports class selectors, ID selectors, and pseudo-class selectors but does not support wildcard selectors.

JS: The Logic Layer of Mini Programs

JavaScript files handle page logic, event responses, and data interactions. Each page or component has a corresponding JS file registered via the Page() or Component() methods.

Page Logic Example

Page({
  data: {
    count: 0
  },
  increment: function() {
    this.setData({
      count: this.data.count + 1
    });
  }
})

Event Handling

<button bindtap="increment">Click to Increment</button>

Lifecycle Functions

Page({
  onLoad: function(options) {
    console.log('Page loaded');
  },
  onShow: function() {
    console.log('Page displayed');
  }
})

JSON: The Configuration Layer of Mini Programs

JSON files are used for static configurations, including page and global settings. They adhere to strict JSON format and do not support comments.

Page Configuration Example

{
  "navigationBarTitleText": "Home",
  "usingComponents": {
    "custom-component": "/components/custom/custom"
  }
}

Global Configuration

app.json is the global configuration file for Mini Programs:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff"
  }
}

File Organization and Collaboration

A typical Mini Program page consists of four files with the same name but different extensions:

• index.wxml
• index.wxss
• index.js
• index.json

This modular architecture design ensures that structure, styles, logic, and configurations are clearly separated, facilitating development and maintenance. For example, when modifying page styles, developers only need to focus on the WXSS file without affecting other layers of code.

Component-Based Development

Mini Programs support custom components, each composed of four files:

components/
  custom/
    custom.wxml
    custom.wxss
    custom.js
    custom.json

Component configuration must be declared in the JSON file:

{
  "component": true,
  "usingComponents": {}
}

Data Communication Mechanisms

Mini Programs provide multiple ways to pass data:

Passing Values Between Pages

wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})

Component Communication

Parent component passing data to child component:

<custom-component prop-a="{{dataA}}"></custom-component>

Child component properties definition:

Component({
  properties: {
    propA: {
      type: String,
      value: ''
    }
  }
})

Global and Local Styles

WXSS supports both global and local styles:

• app.wxss: Global styles applied to all pages
• page.wxss: Local styles applied only to the current page

Style priority follows the proximity principle, where local styles override global styles.

Modular Development

JavaScript supports modular imports and exports:

// utils.js
function formatTime(date) {
  // Implementation code
}
module.exports = {
  formatTime: formatTime
}

// Page JS
const utils = require('../../utils/utils.js')

Dynamic Styling

WXSS supports dynamically setting styles via JS:

<view style="color: {{textColor}};">Dynamic Style</view>

Control in JS:

Page({
  data: {
    textColor: 'red'
  },
  changeColor: function() {
    this.setData({
      textColor: 'blue'
    })
  }
})

Configuration Override Rules

Mini Program configurations follow these priority rules:

1. Page configuration > Global configuration
2. Later configurations > Earlier configurations

For example, if navigationBarTitleText is defined in both app.json and a page's JSON, the page configuration will override the global configuration.

Special File Handling

In addition to the four basic file types, Mini Programs have some special files:

• project.config.json: Project configuration file
• sitemap.json: Search index configuration
• Plugin configuration files

These files are not mandatory but are useful in specific scenarios. For example, project.config.json can save personalized project settings:

{
  "setting": {
    "es6": true,
    "postcss": true
  }
}