Remax：使用 React 构建微信小程序框架安装指南

Remax 是一个让你用真正的 React 构建小程序的框架。它把 React 运行在小程序环境中，不同于静态编译的方案，Remax 中使用 React 没有任何限制，包括 React Hooks，可以理解为针对小程序的 React Native。支持多端小程序，并提供完整的 TypeScript 支持。

一、项目官方信息

二、官方图片

Remax 官方 Banner：

三、环境要求

• Node.js 12+（推荐 LTS）。
• yarn 或 npm。
• 微信开发者工具。
• React 16+。

四、完整部署/接入步骤

1. 创建项目

使用 Rucksack（Remax 官方脚手架）：

npx create-remax-app my-app

或手动：

yarn init
yarn add remax react react-dom

2. 进入目录并安装依赖

cd my-app
yarn install

3. 开发模式（微信小程序）

yarn dev

默认编译到微信小程序，产物输出到 dist/。

4. 用微信开发者工具打开

打开微信开发者工具，导入 dist/ 目录，填入 AppID 预览。

5. 生产构建

yarn build

五、使用方法

目录结构

my-app/
├── src/
│   ├── pages/
│   │   └── index/
│   │       ├── index.tsx
│   │       └── index.config.js
│   ├── app.ts
│   └── app.config.js
└── package.json

编写页面

src/pages/index/index.tsx：

import * as React from 'react';
import { View, Text } from 'remax/wechat';

export default () => {
  return (
    <View>
      <Text>Hello Remax</Text>
    </View>
  );
};

src/pages/index/index.config.js：

export default {
  navigationBarTitleText: '首页'
};

注册路由

src/app.config.js：

export default {
  pages: [
    'pages/index/index'
  ]
};

特性

• 真正的 React：支持 Hooks、生命周期、Context 等；
• 多端支持：微信/支付宝/字节跳动等；
• 完整 TypeScript 支持；
• 示例：https://github.com/remaxjs/examples 。

六、常见问题 FAQ

1. 创建项目失败？ 确保 Node 版本 12+，网络能访问 npm；或用 yarn create remax-app。

2. yarn dev 后产物在哪？ 默认在 dist/ 目录，微信开发者工具导入这里。

3. 支持 React Hooks 吗？ 支持，Remax 是真 React 运行，Hooks、Context、ErrorBoundary 等都可用。

4. 怎么切换到支付宝/字节小程序？ 在配置中指定目标平台，或用对应的 CLI 命令。

5. 示例代码在哪？ 官方示例仓库：https://github.com/remaxjs/examples 。

6. 与 Taro 有何区别？ Remax 强调「真 React 运行时」，不做静态编译；Taro 是多端编译方案，支持 React/Vue/Nerv 等。

七、跳转链接

• GitHub 仓库：https://github.com/remaxjs/remax
• 官方文档：https://remaxjs.github.io/remax/
• 快速开始：https://remaxjs.github.io/remax/guide/quick-start
• 示例：https://github.com/remaxjs/examples