WeChat Mini Programs are lightweight applications built on the WeChat platform, leveraging its APIs for device access, location services, media handling, and payment integration. They follow a component-based architecture, similar to frameworks like React, making them accessible to web developers.

Core Concepts and Setup

To start developing, download and install the WeChat Developer Tools. Upon launching, log in via QR code. While publishing requires an enterprise-verified account, you can create a test project with out an AppID. Select an empty local folder and enable the "quick start" option to generate a demo.

A Mini Program requires three essential files in the root directorry:

• app.js: Initialization script for lifecycle events, global variables, and API calls.
• app.json: Global configuration for pages, window styles, tab bars, and network timeouts.
• app.wxss: Global stylesheet, akin to a common CSS file.

Pages reside in the pages directory, each comprising four optional files with matching names: .js (logic), .json (page-specific config), .wxss (styles), and .wxml (structure). Pages inherit global settings from app.json and app.wxss if not overridden.

Framework Configuration

In app.json, define pages, window properties, tab bars, and debug modes. Page-level json files cascade over global settings.

{
  "pages": [
    "pages/forecast/forecast",
    "pages/settings/settings"
  ],
  "window": {
    "navigationBarBackgroundColor": "#1a1a1a",
    "navigationBarTitleText": "Weather App",
    "navigationBarTextStyle": "white"
  }
}

Logic and Lifecycle

Register the app in app.js using App(), which handles lifecycle hooks and global data.

App({
  onLaunch() {
    const storedCity = wx.getStorageSync('currentCity') || 'CN101010100';
    this.globalData.cityCode = storedCity;
  },
  globalData: {
    cityCode: 'CN101010100'
  }
});

Pages are registered with Page(), managing data, lifecycle, and custom methods.

Page({
  data: {
    temperature: null,
    condition: ''
  },
  onLoad() {
    this.fetchWeatherData();
  },
  fetchWeatherData() {
    const app = getApp();
    wx.request({
      url: 'https://api.weather.com/current',
      data: { location: app.globalData.cityCode },
      success: (res) => {
        this.setData({
          temperature: res.data.temp,
          condition: res.data.cond
        });
      }
    });
  }
});

Views and Data Binding

In .wxml files, bind data and events using Mustache syntax and directives.

<view class="container">
  <text class="city">{{cityName}}</text>
  <view wx:if="{{temperature}}">
    <text>{{temperature}}°C</text>
    <text>{{condition}}</text>
  </view>
  <button bindtap="refreshData">Update</button>
</view>

Styling with WXSS

Styles in .wxss support CSS features plus responsive units like rpx.

.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}
.city {
  font-size: 18px;
  color: #333;
}

Practical Example: Weather Forecast App

This app uses the HeWeather API to display forecasts across three pages: weather, city settings, and about.

1. Configure Pages and Tab Bar Update app.json to set pages and a bottom tab bar with icons.

{
  "pages": [
    "pages/forecast/forecast",
    "pages/cities/cities",
    "pages/info/info"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/forecast/forecast",
        "text": "Forecast",
        "iconPath": "icons/weather.png",
        "selectedIconPath": "icons/weather-active.png"
      }
    ]
  }
}

2. Global Logic and Styles In app.js, manage city selection with storage APIs.

App({
  globalData: {
    selectedCity: 'CN101010100'
  },
  saveCity(code) {
    wx.setStorageSync('cityCode', code);
    this.globalData.selectedCity = code;
  }
});

3. Page Implementation A weather page fetches and displays data via API calls.

forecast.wxml

<view class="weather-card">
  <view class="header">
    <text>{{location}}</text>
    <text>Updated: {{timestamp}}</text>
  </view>
  <image src="{{weatherIcon}}"></image>
  <text class="temp">{{currentTemp}}°C</text>
  <text>{{description}}</text>
</view>

forecast.js

const app = getApp();
Page({
  data: {
    location: '',
    currentTemp: null,
    weatherIcon: '',
    timestamp: ''
  },
  onShow() {
    this.loadForecast();
  },
  loadForecast() {
    wx.request({
      url: 'https://free-api.heweather.net/s6/weather/now',
      data: {
        location: app.globalData.selectedCity,
        key: 'YOUR_API_KEY'
      },
      success: (res) => {
        const weather = res.data.HeWeather6[0];
        this.setData({
          location: weather.basic.location,
          currentTemp: weather.now.tmp,
          weatherIcon: `https://cdn.heweather.com/cond_icon/${weather.now.cond_code}.png`,
          timestamp: weather.update.loc
        });
      }
    });
  }
});

Key Considerations

• Use onShow for logic that runs on each page visit, as onLoad triggers only once.
• Navigate between pages with wx.switchTab for tab bar pages or wx.navigateTo for others.
• Handle API keys securely and avoid exposing them in client-side code.