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

介绍

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


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


Github坐标

https://github.com/remaxjs/remax

相关特性

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

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

  • 真正的 React – 不同于静态编译的方案,在 Remax 中使用 React 没有任何限制,包括 React Hooks。你可以把 Remax 理解为针对小程序的 React Native。
  • 多端支持 – 使用 Remax 把代码转换到多个小程序平台。
  • TypeScript – 完整的 TypeScript 支持,给你满满的安全感。

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


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


快速开始

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

  • 支付宝小程序

1、创建项目

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


2、运行项目

npm run dev


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


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


4、项目结构

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


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


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


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


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


默认导出的的 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(react 小程序开发)


样式

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(react 小程序开发)


生命周期

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(react 小程序开发)


小程序 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(react 小程序开发)


页面参数

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

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

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

平台

Remax 目前支持的平台

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

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


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


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(react 小程序开发)


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

总结

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月9日 上午8:38
下一篇 2024年5月9日 上午8:50

相关推荐