Getting Started

Register a Mini Program accounnt and download the stable version of the WeChat DevTools. Obtain the AppID from the development console under "Development" -> "Development Settings".

Quick Start

Create a new project and launch it using the preview or real-device debugging features.

Directory Structure

A Mini Program consists of four primary file types: .json, .wxml, .wxss, and .js.

File Types

.json Files

Configuration files. Includes app.json for global settings, project.config.json for project-specific preferences, and page.json for individual page configurations.

.wxml Files

Template files. They define the page structure using built-in components and an event system.

.wxss Files

Styling files. Introduces the rpx unit for responsive design. Supports global styles via app.wxss and local styles via page.wxss.

.js Files

Script files. Handle user interacsions and manipulate data.

Configuration Details

app.json

Global configuration for the Mini Program. Defines page paths, window appearance, network timeouts, and tab bars.

{
  "pages": [
    "views/home/main",
    "views/log/main"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "Demo App",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eeeeee"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "views/home/main",
        "text": "Home"
      },
      {
        "pagePath": "views/log/main",
        "text": "Log"
      }
    ]
  }
}

project.config.json

Project-specific settings, including editor prefreences and compilation options. Ensures consistent environment setup across different machines.

{
  "description": "Project configuration",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "projectname": "mini-demo",
  "appid": "your-app-id",
  "compileType": "miniprogram"
}

page.json

Per-page window configuration. Overrides settings from app.json for a specific page.

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTitleText": "Home Page",
  "usingComponents": {}
}

WXML Template

Data Binding

<view>{{greeting}}</view>

Page({
  data: {
    greeting: "Welcome to the Mini Program"
  }
});

List Rendering

<view wx:for="{{numberList}}" wx:key="*">{{item}}</view>

Page({
  data: {
    numberList: [5, 10, 15]
  }
});

Conditional Rendering

<view wx:if="{{isVisible}}">Content is shown</view>
<view wx:else>Content is hidden</view>

Page({
  data: {
    isVisible: true
  }
});

Event Handling

Events like bindtap for taps, bindinput for inputs, and bindchange for value changes are used to handle user actions.

Built-in Components

View Container

• view: Fundamental visual container.
• scroll-view: Enables scrolling in a designated area.
• swiper: Creates a swipeable carousel of items.

Form Elements

• button: Triggers actions. Can have types like primary or default.
• input: Single-line text input feild.
• picker: Provides a selection menu.

Media

• image: Displays images with various scaling modes.
• video: Embeds a video player.

JavaScript Logic

App Instance (app.js)

Defines global lifecycle methods and data.

App({
  onLaunch() {
    // Initialize app
  },
  globalData: {
    apiBaseUrl: "https://api.example.com"
  }
});

Page Logic (page.js)

Manages page-specific data, lifecycle, and event handlers. Use setData to update the view.

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

Custom Components

Define reusable UI elements with their own logic and styling.

Component({
  properties: {
    itemData: Object
  },
  methods: {
    onTap() {
      this.triggerEvent('itemTap', { id: this.data.itemData.id });
    }
  }
});

Navigation

Use methods like wx.navigateTo to move between pages, wx.redirectTo to redirect, and wx.switchTab to switch tabs.

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