remax 将 react 运行在小程序环境中，让你可以使用完整的 react 进行开发。类似于之前介绍过的antmove，可以使用remax把代码转换到多个小程序平台，提供完整的typescript支持，无限制的使用react，可以当成是小程序的react native！
https://github.com/remaxjs/remax
下面是来自官方文档的介绍：
remax 将 react 运行在小程序环境中，让你可以使用完整的 react 进行开发。
- 真正的 react – 不同于静态编译的方案，在 remax 中使用 react 没有任何限制，包括 react hooks。你可以把 remax 理解为针对小程序的 react native。
- 多端支持 – 使用 remax 把代码转换到多个小程序平台。
- typescript – 完整的 typescript 支持，给你满满的安全感。
同时在文档中也提到了为什么要用react来构建小程序，感兴趣的可以移步凯发体育官方app官网文档！
官方文档提供了微信和支付宝的入门小程序项目，我们一起来看一看：
- 支付宝小程序
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 组件就是当前的页面，关于生命周期的使用方式参考凯发体育官方app官网文档中的生命周期指南！
- 微信小程序
微信小程序是类似的，再次就不再赘述！
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
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
关于跨平台相关的可以参照凯发体育官方app官网文档的高级指南部分
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的开发者，也有一些类似于原生的，对于热爱学习的小伙伴可以选择不同的凯发体育官方app的解决方案来学习！
凯发体育官方app的版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。