How to Build a WeChat Mini Program from Scratch Using the Native Framework

Mini Program File Types

WeChat Mini Programs consist of four core file types: .json configuration files (e.g., app.json, project.config.json, page‑specific JSON) define global settings, tool configuration, and page configuration. .wxml template files are markup similar to HTML, supporting WeChat‑specific directives such as wx:if and data binding with {{}}. .wxss style sheets extend standard CSS with the rpx responsive unit. .js script files contain the business logic, data handling, network requests, and storage operations.

Pages and custom components are built from these files and expose lifecycle callbacks such as onLoad, onShow, onPullDownRefresh, and onReachBottom.

Runtime Architecture

The Mini Program runtime is split into two threads:

Rendering layer : a WebView renders .wxml and .wxss.

Logic layer : JsCore executes JavaScript code.

Communication between the two layers is mediated by the native WeChat client.

Project Initialization

Open WeChat Developer Tools, create a new project, and select the Basic template with the TypeScript starter. The tool generates a default project structure including app.json, project.config.json, and an initial page.

Using npm in Mini Programs

In the DevTools terminal run npm init to create package.json. Install any needed package, for example: npm install dayjs --save This also creates package-lock.json. To place npm dependencies in a subdirectory, add the following configuration to project.config.json:

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

After saving the file, choose Tools → Build npm in the IDE to generate the miniprogram_npm folder.

If the default TypeScript typings are outdated, upgrade them with:

npm install miniprogram-api-typings

Integrating TDesign UI Library

Install the component library via npm: npm i tdesign-miniprogram -S --production Remove the "style": "v2" entry from app.json because it conflicts with TDesign's styling.

For TypeScript projects, add a path alias in tsconfig.json so the compiler can resolve the library:

{
  "paths": {
    "tdesign-miniprogram/*": ["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
  }
}

Register a component in a page’s JSON file:

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}

Use the component directly in WXML:

<t-button theme="primary">Button</t-button>

If the component does not render, enable ES6‑to‑ES5 conversion by adding the following to project.config.json:

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

Custom TabBar

Configuration

In app.json enable a custom TabBar and provide its appearance settings:

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      { "pagePath": "page/component/index", "text": "Component" },
      { "pagePath": "page/API/index", "text": "API" }
    ]
  },
  "usingComponents": {}
}

TabBar Component Files

Create the component files (adjust the directory according to the project template):

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

Activation in Pages

In any page that should display the custom TabBar, call this.getTabBar().init() inside the onShow lifecycle method:

Page({
  // ... other page options
  onShow() {
    this.getTabBar().init();
  }
  // ...
});

Reference documentation: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

Custom Navigation Bar Title

Set the title for each page by adding navigationBarTitleText to the page’s JSON file:

{
  "navigationBarTitleText": "Personal Center",
  "usingComponents": {}
}

Summary

Following the steps above yields a functional Mini Program skeleton. Add new pages under the pages directory, create the corresponding .wxml, .wxss, .json, and TypeScript files, and iteratively enhance the application’s logic, UI, and third‑party dependencies as needed.