欢迎来到本网站

全国统一咨询热线:166-2870-3070

新闻中心

新闻中心News Center

联系方式

联系方式Contact infoemation

电话:166-2870-3070

邮箱:support@0707app.com

地址:上海市徐汇区569号数字化创意园1号楼606-607室

当前位置:明翔网络 > 新闻中心 > 全新的小程序开发体验,真正的使用React构建小程序——Remax

全新的小程序开发体验,真正的使用React构建小程序——Remax

文章出处:http://www.ucunicom.com/a/823.html 阅读量:25 发表时间:08-30 16:07
新闻中心

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


全新的小程序开发体验,真正的使用React构建小程序——Remax



Github坐标

https://github.com/remaxjs/remax

相关特性

下面是来自官方文档的介绍:

Remax 将 React 运行在小程序环境中,让你可以使用完整的 React 进行开发。

  • 真正的 React - 不同于静态编译的方案,在 Remax 中使用 React 没有任何限制,包括 React Hooks。你可以把 Remax 理解为针对小程序的 React Native。

  • 多端支持 - 使用 Remax 把代码转换到多个小程序平台。

  • TypeScript - 完整的 TypeScript 支持,给你满满的安全感。

同时在文档中也提到了为什么要用React来构建小程序,感兴趣的可以移步官网文档!


全新的小程序开发体验,真正的使用React构建小程序——Remax



快速开始

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

  • 支付宝小程序

1、创建项目

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

2、运行项目

npm run dev

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


全新的小程序开发体验,真正的使用React构建小程序——Remax



4、项目结构

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


全新的小程序开发体验,真正的使用React构建小程序——Remax



全新的小程序开发体验,真正的使用React构建小程序——Remax



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


全新的小程序开发体验,真正的使用React构建小程序——Remax



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

  • 微信小程序

微信小程序是类似的,再次就不再赘述!


组件

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

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

  • Props

Remax 遵循 React 规范来命名小程序属性,如: Remax

<View className="view" style={{ display: 'flex' }} onClick={handleClick} />

对应微信小程序:

<view class="view" style="display: flex;" bindtap="handleClick"></view>

对应支付宝小程序:

<view class="view" style="display: flex;" onTap="handleClick"></view>

全新的小程序开发体验,真正的使用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


全新的小程序开发体验,真正的使用React构建小程序——Remax



生命周期

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>view</View>;
};

全新的小程序开发体验,真正的使用React构建小程序——Remax



小程序 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);
});

全新的小程序开发体验,真正的使用React构建小程序——Remax



页面参数

Remax 将页面参数通过 props 传递给页面组件,如:

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

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

平台

Remax 目前支持的平台

  • 微信小程序: wechat

  • 支付宝小程序: alipay

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


全新的小程序开发体验,真正的使用React构建小程序——Remax



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

全新的小程序开发体验,真正的使用React构建小程序——Remax



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

全国咨询热线:166-2870-3070

二维码

地址:上海市徐汇区569号数字化创意园1号楼606-607室

版权所有 © 1999-2017 Copyright © 1999-2017 All Rights Reserved

no cache
Processed in 0.594895 Second.