Getting Started with WePY: Build WeChat Mini‑Programs Faster

WePY is a framework that wraps native WeChat mini‑program development with a Vue‑like syntax and MVVM architecture, supporting ES6/7 features.

Official documentation: https://tencent.github.io/wepy/

Installation and Project Setup

Install the CLI:

npm install -g wepy-cli

Create a demo project:

wepy init standard my-project

Enter the project folder, install dependencies (

npm install

) and start the development server (

npm run dev

).

Open the WeChat Developer Tools, point the project to the

dist

folder, and disable the three default checks in the settings.

The demo runs successfully; the

dist

folder contains the native mini‑program files.

Do not edit files directly in

dist

. Instead, modify source files under

src

in your editor; the WeChat tool is only for preview.

.wpy File Structure

A .wpy file consists of three sections:

Style :

<style>...</style>

(maps to wxss).

Template :

<template>...</template>

(maps to wxml).

Script :

<script>...</script>

(maps to js).

Demo Walkthrough

Data binding uses setData in native mini‑programs. When updating data inside async functions, you must manually call $apply to trigger dirty‑checking.

Component usage includes third‑party components (e.g., wepy-com-toast ) and communication methods $invoke and $broadcast . Mixins allow reusable logic; note that event execution order differs from Vue (component methods run before mixin methods in WePY).

The framework also supports concurrent requests; testing ten simultaneous requests shows WePY can handle more than the native limit of five.

Project Directory

Configuration File (wepy.config.js)

The root

wepy.config.js

defines build options. Key fields include:

wpyExt : default

.wpy

; change to

.vue

for IDE highlighting.

compilers : supports

wepy-compiler-less

,

wepy-compiler-postcss

,

wepy-compiler-sass

,

wepy-compiler-babel

,

wepy-compiler-pug

(available from version 1.3.1).

Compilation Process

App Entry (app.wpy)

Extends

wepy.app

, contains a

config

property that generates

app.json

during compilation.

Page Entry (page.wpy)

Extends

wepy.page

. Important properties:

Property

Description

config

Page config, equivalent to

index.json

.

components

List of components used by the page.

data

Data rendered by the page.

methods

Event handlers such as

bindtap

,

bindchange

.

events

Inter‑component communication via

broadcast

and

emit

.

others

Lifecycle hooks like

onLoad

,

onReady

, and custom methods.

Component (com.wpy)

Extends

wepy.component

; shares most page properties but without

config

and page‑specific lifecycle events.

Using a component involves three steps, illustrated below:

Component Communication

Components communicate via

$invoke

,

$broadcast

, and event listeners, enabling isolated and reusable logic across the mini‑program.

— End of guide —