全新的小程序开发体验,真正的使用react构建小程序——remax-凯发备用官网

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


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


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


对应微信小程序:

对应支付宝小程序:


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


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


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


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


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

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

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

(0)
上一篇 2023年4月3日 上午11:47
下一篇 2023年4月3日 上午11:57

相关推荐

  • 软件推荐(第47期): 电脑好不好用,除了硬件的加持,还有软件的选择。下面给大家推荐6个超实用的windows软件,让你的电脑使用效率和体验大大提升。 01&rolan 地…

    科研百科 2023年8月25日
    143
  • 以南科大清华联培博士为标题,以南科大清华联培博士为开头字数在2000左右的中文文章 以南科大清华联培博士为标题,以南科大清华联培博士为开头字数在2000左右的中文文章 摘要:本文介…

    科研百科 2024年10月31日
    0
  • 设计进度管理:有效管理项目进度的关键技术 设计进度管理是指在设计过程中,通过有效的管理和控制来确保项目按时完成,并达到预定的质量标准。这是一项非常重要的工作,因为设计阶段是项目成功…

    科研百科 2024年9月1日
    31
  • 深能高邮东部风电场荣获中国电力优质工程奖。 从深圳起步,经过三十几年的发展,深圳能源集团的产业已遍布全国25个省、市以及海外加纳、越南、巴新等国家,产业类别主要为清洁电力、生态环保…

    科研百科 2024年6月25日
    88
  • 钉钉低代码管理平台开发教程 钉钉作为一款广受欢迎的企业通讯工具,为企业内部的沟通和协作提供了便利。而钉钉低代码管理平台的开发则进一步提升了企业的工作效率和管理水平。本文将为大家介绍…

    科研百科 2024年2月27日
    65
  • 企业内部控制180套管理制度 138套流程手册 150套细则手册(企业内部控制实施细则手册)

    这是一套 【180个企业内部控制管理制度汇编】 【138条企业内部控制流程手册】 【150份企业内部控制实施细则手册】。 三套手册整理完毕,需要的到文末领取 如何领取?? 领取方式…

    科研百科 2024年1月25日
    167
  • 科研项目报价表如何做

    科研项目报价表如何做 科研项目报价表是一份非常重要的文件,记录了整个项目的成本、时间和进度。一份好的科研项目报价表不仅可以帮助项目经理和研究人员更好地控制成本,还可以确保项目按时完…

    科研百科 2024年4月10日
    76
  • 脱贫攻坚岂能“借牛充数”

      脱贫攻坚主战场,也是政绩观的大考场。在脱贫攻坚的实践中,千千万万扶贫干部从实际出发,积极探索脱贫攻坚的新模式、新平台、新机制。通过产业扶贫、就业扶贫、健康扶贫、控辍保学、易地搬…

    科研百科 2022年5月12日
    283
  • 科技项目撤销和终止的区别在于:前者可能导致长期影响,而后者通常只涉及短期影响。 科技项目撤销通常是指项目由于某些原因而被迫停止或取消。这种情况可能会对项目所在的组织、客户、投资者和…

    科研百科 2024年10月25日
    0
  • 进度计划软件是用于管理项目或任务进度的工具,能够帮助用户追踪项目的进度, 并制定计划以确保项目按时完成。现在有许多进度计划软件可供选择, 哪些软件最好用取决于项目的性质, 需求和用…

    科研百科 2024年8月12日
    48
网站地图