现在的位置: 首页 > web前端 > 正文

Remax小程序开发

2020年07月03日 web前端 ⁄ 共 1181字 ⁄ 字号 评论关闭

  Remax将React运行在小程序环境中,让你可以使用完整的React进行开发。真正的React-不同于静态编译的方案,在Remax中使用React没有任何限制,包括ReactHooks。你可以把Remax理解为针对小程序的ReactNative。


  Remax怎样


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


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


  Remax使用小程序提供的组件来构建应用,而且你的代码是运行在小程序环境中。开发者在Remax中使用React没有任何特殊限制,同时也支持ES6语法,ESModule,async/await等等。


  跨平台开发的挑战


  小程序作为一项非标准的技术,各个小程序平台之间虽然大体上相似,但依然有非常多的差异。“一次开发多端运行”当然是非常美好的愿望,但我们在设计Remax之初就意识到各个小程序平台之间的差异是无法被抹平的,每家小程序平台有太多的私货,更没有一个标准来指导我们该如何抹平这些差异。


  所以我们在最开始,为每个小程序平台提供了独立的基础组件。开发者如果要做跨平台开发,需要自己去封装基础组件。但很快,我们也意识到这对开发者来说是一件很麻烦的事情,特别是后面我们要支持更多平台的话。


  RemaxOne好吗


  受CSS属性名前缀的启发,我们重新设计了Remax的跨平台方案。我们非常克制地选取了9个基础组件,统一了他们之间非平台私有的属性,并且以属性名前缀的方式来支持各个平台私有的特性。我们希望开发者在做跨平台开发时能清楚地意识到你写下的这行代码只会在特定的平台上生效。


  介绍-Remax-全新的小程序开发体验


  ​


  remaxjs.org


  RemaxOne就是我们提供的跨平台解决方案。通过remax/one提供跨平台的组件。


  import*asReactfrom'react';


  import{View,Button}from'remax/one';


  exportdefault()=>{


  const[count,setCount]=React.useState(0);


  return(


  <Viewalipay-onAppear={()=>console.log('Aha!')}>


  <View>{count}</View>


  <ButtononTap={()=>setCount(count+1)}>+1</Button>


  </View>


  );


  };


  可以看到,对于onTap这样通用的属性我们进行了统一,而支付宝独有的onAppear属性,则需要加上alipay-的前缀。


  总之,在使用Remax前你需要有对React有基本的了解。如果你有React的开发经验,那么也要注意Remax不同于ReactDOM。

抱歉!评论已关闭.