Understanding WeChat Mini Programs: Runtime, Promise Wrapping, Componentization, and Redux Integration

Mini Program vs H5

WeChat Mini Programs run in a custom runtime rather than a standard browser, using separate view (WXML/WXSS) and logic (JavaScriptCore) layers that communicate via evaluateJavascript, which can cause latency and blocking compared to browser environments.

Runtime Characteristics

The view layer uses a WebView for rendering, while the logic layer runs on an independent JavaScriptCore instance. Data transfer requires serializing to a string and executing as a script, leading to potential delays when the JS thread is busy.

A simple 2‑billion‑iteration loop runs differently in a browser console (blocking UI) versus a Mini Program console (UI remains responsive, callbacks fire after the loop).

Mini Program Execution Process

Open the Mini Program in WeChat; the entire code package is downloaded locally.

WeChat server delivers the package (max 2 MB) to ensure performance.

Parse app.json to initialize navigation, window style, and page list.

Load and run app.js to create the app instance.

Load the first page according to app.json.

Page navigation is managed as a stack with up to five pages.

Wrapping Mini Program APIs with Promise

Mini Program APIs use callback patterns, which limit the use of return and throw. By decorating the APIs, they can be used with Promise for cleaner async handling.

wx.request2 = (option = {}) => {
  return new Promise((resolve, reject) => {
    option.success = res => resolve(res);
    option.fail = res => reject(res);
    wx.request(option);
  });
};

For multiple APIs, an array of method names is iterated and each is redefined using Object.defineProperty to return a Promise.

let wxKeys = ["showModal", "request"];
wxKeys.forEach(key => {
  const original = wx[key];
  if (original && typeof original === "function") {
    Object.defineProperty(wx, key, {
      get() {
        return (option = {}) => {
          return new Promise((resolve, reject) => {
            option.success = res => resolve(res);
            option.fail = res => reject(res);
            original(option);
          });
        };
      }
    });
  }
});

Component‑Based Development

Since version 1.6.3, Mini Programs support a concise component model. Components are defined with Component({ ... }), specifying properties, data, and methods, and can be used in pages via custom tags.

Component({
  properties: {
    innerText: { type: String, value: "default value" }
  },
  data: { someData: {} },
  methods: {
    customMethod: function() {}
  }
});

Integrating Redux for State Management

Redux provides a single source of truth, immutable state updates via actions, and reducers to describe state changes. By importing redux.min.js and creating a store, Mini Programs can subscribe to state changes and synchronize view data with setData.

// reducers/index.js
import { createStore, combineReducers } from './redux.min.js';
import counter from './counter';
export default createStore(combineReducers({ counter }));

// reducers/counter.js
const INITIAL_STATE = { count: 0, rest: 0 };
const Counter = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "COUNTER_ADD_1":
      return Object.assign({}, state, { count: state.count + 1 });
    case "COUNTER_CLEAR":
      return Object.assign({}, state, { count: 0, rest: state.rest + 1 });
    default:
      return state;
  }
};
export default Counter;

In app.js, the store is injected globally:

import Store from './reducers/index';
App({ Store });

A higher‑order function decorates page configurations to subscribe to the store, map state to page data, and update the view only when relevant data changes (using shallow equality checks).

export default (mapState = () => {}) => options => {
  const config = Object.assign({}, baseObj, options);
  Object.setPrototypeOf(config, baseObj);
  return config;
};

Pages then connect to the store:

import connect from '../../utils/connect';
const mapStateToProps = state => ({ counter: state.counter });
Page(connect(mapStateToProps)({
  data: { innerText: "Hello 点我加1哦" },
  bindBtn() { this.__dispatch({ type: "COUNTER_ADD_1" }); }
}));

Conclusion

The article demonstrates how Mini Programs differ from traditional web apps, how to improve asynchronous handling with Promises, how to structure UI with components, and how to manage complex state using Redux, providing complete code snippets for each step.