Building a Simple WeChat Mini Program: From Zero to First Page

1 Background

When WeChat Mini Programs first appeared, the author, a front‑end developer, wanted to try them as an individual developer.

2 Account related

Registering an account follows the official documentation (https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html). The documentation is well written and worth studying.

3 Understanding the documentation

The author treats the Mini Program as a framework because its basic syntax is front‑end, not a completely new language.

Key takeaways after reading the official docs are listed below.

3.1 Complete & independent development experience

Although it uses front‑end syntax, it is not fully front‑end:

WXML uses its own tag components.

WXSS is a subset of CSS.

The JavaScript environment lacks a window object and other browser globals.

Nevertheless, as a new language it provides everything needed:

Documentation

Editor

Debugger

Compiler

Base library

Developers can start without any prior knowledge, though front‑end experience speeds up onboarding.

3.2 Complete framework

A Mini Program consists of:

App (singleton)

Pages (multiple pages, each App contains many Pages)

Components (each Page is composed of components; WeChat provides its own component library)

Both App and Page have lifecycle methods.

3.3 Vue‑like syntax

The framework feels very similar to Vue, offering data binding and template syntax.

3.4 React‑Native‑like development experience

Like React Native, Mini Programs rely on a built‑in component library that abstracts underlying mobile OSes, resulting in many overlapping components.

3.5 Drawbacks

Strict permission limits, similar to WeChat Official Accounts.

Cannot customize or extend the framework.

There are likely more drawbacks, but the author has not encountered them yet.

4 Simple example

The author, a front‑end developer at Tencent Classroom, builds a simple category homepage Mini Program.

4.1 Create project

Start from an empty project instead of the quick‑start template.

4.2 Register App

In the root directory create app.js and app.json. The files contain minimal content because no App lifecycle methods or global data are needed.

4.3 Register homepage (index)

Create a pages folder, then an index folder, and add pages/index/index to the pages array in app.json. Saving generates the basic files:

index.js

index.json

index.wxml

index.wxss

Write the page structure in index.wxml:

The page contains two modules: a hot‑courses section and a latest‑courses section, each displaying a card with a cover image and course name.

In a real project you could use component syntax here; the author kept it simple for the example.

Style the page with index.wxss (standard CSS syntax):

Implement page logic in index.js:

The logic follows a familiar Vue pattern: showLoading → request data → render → hideLoading. Clicking a course card navigates to the detail page with the course name as a parameter.

4.4 Register course detail page (detail)

Create the page folder, add its path to app.json, and view the result:

The detail page simply displays the course name.

4.5 Result

Press Ctrl + B to build and preview the Mini Program. The screenshots show the final output.

That’s it – a very simple Mini Program.

5 Development experience summary

Feels a lot like Vue.

Code is concise and documentation is clear.

The built‑in editor provides code hints and formatting, though it feels different from typical IDEs.

Using rpx for responsive CSS works well.