Using the ANU Mini‑Program Framework for React‑Style Development in WeChat Mini Programs

Since the launch of WeChat mini‑programs, they have become extremely popular because the platform provides massive user reach and handles many backend concerns, allowing individuals and small teams to create apps that can attract millions of users. However, the native API is primitive, lacking class inheritance, npm support, and CSS preprocessors, which has led to the emergence of transpilation frameworks that convert modern JavaScript/React/Vue code into the wxml/wxss format required by mini‑programs.

Transpilation frameworks aim to unify a company’s technology stack so that teams using React do not need to learn Vue and vice‑versa, simplifying recruitment and maintenance. Popular options include wepy , mpvue (both Vue‑style) and taro (React‑style, still unstable).

The ANU mini‑program is an extension of the ANU mini‑React framework, offering a CLI that compiles JSX to wxml and a runtime renderer that enables the code to run inside WeChat. Because of mini‑program restrictions, DOM‑related APIs such as findDOMNode , dangerouslySetInnerHTML , and refs.dom are unavailable, and render props cannot be used, but most other React features work, including lifecycle hooks, HTML tags, component nesting, ES6/ES7 syntax, and automatic mapping of onClick to bindtap .

Key features of ANU mini‑program include:

Lifecycle hooks like componentDidShow and componentDidHide .

Support for standard HTML tags such as div , h1 , span , b .

Ability to import and use custom components written for mini‑programs.

Event binding with parameter passing and multiple bind this calls.

Multi‑level loops, ES6/ES7 syntax sugar, component‑in‑component tags, stateless components, and Promise‑based wrappers for all WeChat APIs.

Convenient aliases @components and @react for imports.

Below is a typical workflow to get started with ANU:

Clone the repository: git clone https://github.com/RubyLouvre/anu.git

Navigate to anu/packages/cli and run npm link (or npm unlink if previously linked).

Return to the project root and create a mini‑program project using the provided CLI.

Run npm start to build the project.

Open the generated dist folder in the WeChat Developer Tools.

The following code snippet shows a simple component definition and its compilation output:

import React from '@react';
import Dog from '@components/Dog/index';

class P extends React.Component {
    render() {
        return (
类继承的演示
);
    }
}
export default P;

The compiled output (simplified) includes the strict mode directive, module exports, and a call to miniCreateClass that registers the component with the mini‑program runtime:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _ReactWX = require("../../../../ReactWX");
var _ReactWX2 = _interopRequireDefault(_ReactWX);
var _index = require("../../../../components/Dog/index");
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function P() {}
P = _ReactWX2.default.miniCreateClass(P, {
    render: function() {
        var h = _ReactWX2.default.createElement;
        return h("view", null,
            h("view", null, "类继承的演示"),
            h(_ReactWX2.default.template, { age: 12, templatedata: "data09558693", is: _index2.default }));
    },
    classUid: "c70258"
});
Page(_ReactWX2.default.createPage(P, "pages/demo/syntax/extend/index"));
exports.default = P;

The corresponding WXML template demonstrates how the component is imported and rendered with a wx:for loop:

<import src="../../../../components/Dog/index.wxml"/>
<view>
    <view>类继承的演示</view>
    <template is="Dog" data="...data" wx:for="{{data09558693}}" wx:for-item="data" wx:for-index="index" wx:key="*this"></template>
</view>

Two additional examples are shown: a Pinduoduo mall template that uses SASS as a pre‑processor and requires enabling HTTPS request settings in the WeChat developer console. These examples illustrate that ANU can handle complex applications.

For more details, progress updates, and issues, refer to the GitHub issue page https://github.com/RubyLouvre/anu/issues/133 . Contributions and pull requests are welcome.