renren-fast 完整开发文档_全新的小程序开发体验，真正的使用React构建小程序—

本文链接：https://blog.csdn.net/weixin_39588445/article/details/111614908

Remax是一个让React运行在小程序环境的框架，提供多端支持和完整TypeScript体验。它允许开发者以无限制的React语法，包括Hooks，开发小程序。本文概述了Remax的主要特性，如组件、样式、生命周期和API，并介绍了快速入门及支持的平台。

摘要由CSDN通过智能技术生成

介绍

Remax 将 React 运行在小程序环境中，让你可以使用完整的 React 进行开发。类似于之前介绍过的AntMove，可以使用Remax把代码转换到多个小程序平台，提供完整的typeScript支持，无限制的使用React，可以当成是小程序的React Native！

Github坐标

https://github.com/remaxjs/remax

快速开始

官方文档提供了微信和支付宝的入门小程序项目，我们一起来看一看：

支付宝小程序

1、创建项目

$ npx degit remaxjs/template-alipay my-app$ cd my-app && npm install

2、运行项目

npm run dev

3、打开支付宝小程序开发者工具，选中项目 dist 目录，你将看到

4、项目结构

dist 为编译后的文件目录。src 为源文件目录。app.js 即小程序 App 方法，可以在 class 内定义对应的属性

app.css 全局样式文件，app.config.js 为小程序全局配置文件，对应 app.json，pages 存放项目页面，pages/index/index.js 页面文件，对应小程序 Page 方法

默认导出的的 React 组件就是当前的页面，关于生命周期的使用方式参考官网文档中的生命周期指南！

微信小程序

微信小程序是类似的，再次就不再赘述！

组件

Remax 用驼峰的方式来命令小程序组件，如：

import { View, Text, Image, ... } from 'remax/wechat'

Props

Remax 遵循 React 规范来命名小程序属性，如： Remax

对应微信小程序：

对应支付宝小程序：

样式

Remax 默认支持 css/less/sass/stylus，安装你需要的样式，即可使用。如：

 npm install less # less 用户 npm install node-sass # sass 用户

import './index.css';import './index.less';import './index.scss';

Remax 会自动把 px 转换成小程序 rpx：

.view { height: 16px;}.view { height: 16rpx;}

如果你不想转换 px ，就写成 PX，如：

.view { height: 16PX:}

Remax 同时也支持 Css Modules

生命周期

Remax 在 component class 中增加了对生命周期的支持，如：

export default class Page extends React.Component { onShow() { console.log('on show'); } onHide() { console.log('on hide'); } ...}

同样也支持 React Hooks

import { useShow, useHide } from 'remax';import { View } from 'remax/wechat';export default () => { useShow(() => { console.log('onShow'); }); useHide(() => { console.log('onHide'); }); return view;};

小程序 API

Remax 提供原生小程序 API 支持，如；

import { navigateTo, requestPayment, ... } from 'remax/wechat'

拥有事件回调(success，fail)的 API，Remax 还提供 Promise 支持，如：

import { requestPayment } from 'remax/wechat';requestPayment(params).then(res => { console.log(res);});

页面参数

Remax 将页面参数通过 props 传递给页面组件，如：

export default (props) => { // 页面参数 console.log(props.location.query); ...}

你也可以通过小程序原生的方式获取参数(通常在 onLoad 方法里获取)，包括场景值也是。

平台

Remax 目前支持的平台

微信小程序: wechat
支付宝小程序: alipay

关于跨平台相关的可以参照官网文档的高级指南部分

Typescript

Remax 默认支持用 TypeScript 开发。作者亦提供了 TypeScript 模板帮助你快速创建项目。

微信

$ npx degit remaxjs/template-wechat-typescript my-app$ cd my-app

支付宝

$ npx degit remaxjs/template-alipay-typescript my-app$ cd my-app

跨平台

$ npx degit remaxjs/template-universe-typescript my-app$ cd my-app

以上都只是依据文档对其进行简单的介绍，具体的还包括跨平台开发配置、状态共享以及原生混合开发等，感兴趣的同学可以尝试上手！

总结

当下软件开发包括很多种类，小程序也是其中重要的一环，目前有很多类似于Remax的框架供我们选择，不同的框架解决的问题大致类似，但是编写代码的方式可能每一个框架适合不同的人来写，像Remax和Taro这样的就比较适合熟悉React的开发者使用，而向uni-app或者还有其他的框架或许更适合Vue的开发者，也有一些类似于原生的，对于热爱学习的小伙伴可以选择不同的解决方案来学习！

renren-fast 完整开发文档_全新的小程序开发体验，真正的使用React构建小程序——Remax...

介绍