wechat-miniprogram/miniprogram-demo

★ 7,166JavaScriptAudience · developerComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((miniprogram-demo))
    What it is
      Official WeChat demo
      Component examples
      API examples
    Features
      Cloud functions
      Data storage
      Built-in components
    How to run
      WeChat Developer Tools
      npm run init
      QR code preview
    Audience
      WeChat developers
      Mini program builders

mindmap root((miniprogram-demo)) What it is Official WeChat demo Component examples API examples Features Cloud functions Data storage Built-in components How to run WeChat Developer Tools npm run init QR code preview Audience WeChat developers Mini program builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Look up a working code example for any WeChat built-in component before using it in your own mini program.

USE CASE 2

Learn how WeChat cloud development works by running the demo's cloud functions and data storage examples.

USE CASE 3

Try the full demo on your phone by scanning the QR code in the README, without writing any code first.

USE CASE 4

Test a bug fix against the official lint rules before opening a pull request.

Tech stack

JavaScriptWeChat Mini Programnpm

Getting it running

Difficulty · moderate Time to first run · 30min

Requires WeChat Developer Tools (official IDE) and a WeChat developer account to run or preview locally.

In plain English

This repository is the official demo project for WeChat Mini Programs, published by the WeChat Mini Program team at Tencent. WeChat Mini Programs are lightweight apps that run inside the WeChat messaging app, without requiring a separate installation from an app store. They are widely used across China and support a broad range of use cases, from payments and e-commerce to local services and tools. The demo collects working source code examples for WeChat Mini Program components, platform APIs, and cloud development features. It is designed as a reference for developers building their own mini programs, showing how the various built-in pieces fit together in real code. A scannable QR code in the README lets you try the demo directly on a phone by opening it through the WeChat app. Running the project requires the WeChat Developer Tools, which is the official development environment provided by WeChat for building and previewing mini programs. To get started, you run npm run init to initialize the project, then use the Developer Tools to build the npm dependencies. The cloud development portions of the demo, which cover server-side cloud functions and data storage, have their own README with additional setup instructions. The project accepts contributions through pull requests. Contributors are asked to install dependencies in the miniprogram directory and confirm that their code passes the built-in lint check before submitting. The README is written in Chinese, as the project is aimed at the WeChat developer community.

Copy-paste prompts

Prompt 1

I'm building a WeChat Mini Program and want to add a payment button. Show me which component in miniprogram-demo handles payments and what the minimal code looks like.

Prompt 2

I want to use WeChat cloud development to store user data without a backend server. Walk me through the cloud setup steps in the miniprogram-demo project.

Prompt 3

How do I set up the miniprogram-demo project locally: run npm run init, open it in WeChat Developer Tools, and build the npm dependencies?

Prompt 4

I found a bug in one of the demo's API examples. How do I run the lint check to verify my fix before opening a pull request?

Open on GitHub → Explain another repo

← wechat-miniprogram on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.