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 —