Alita
Alita,战斗天使阿丽塔,原型是《铳梦》中一位不断战斗和自我超越的生化改造少女。
Alita是一款把React Native运行在小程序平台的工具引擎。与现有编译时方案不同,Alita对React语法有全新的处理方式,支持在运行时处理React语法,实现了React Native和微信小程序之间的主要组件对齐,可以用简洁、高效的方式把React Native代码转换成微信小程序代码。
Alita不是新的框架,也没有提出新的语法规则,她只做一件事,就是把你的React Native代码运行在微信小程序端。所以Alita的侵入性很低,选用与否,并不会对你的原有React Native开发方式造成太大影响。
ReactRepos展示:
React Native | 小程序(by Alita) | Web(by react-native-web) |
![]() |
![]() |
![]() |
Alita 原理相关
-
Alita使用运行时React语法处理方案,区别现有社区使用的编译时方案,对React语法的支持更加完备,具体请看:一种让小程序支持JSX语法的新思路
-
更进一步的Alita对JSX的处理可以抽象为对
对声明式语法的处理
,所以Flutter理论上也是可以处理的,详见flutter_mp -
关于React和小程序的数据交互方式,请看:React与小程序的数据交换
Features
- 完备的React语法支持。runtime阶段处理JSX语法,对JSX支持更加完善,可以在组件内任何地方出现JSX片段,包括属性传递JSX片段,render方法之外的JSX片段等等,
- 基于webpack打包构建,完善小程序npm能力,支持对小程序包体积分析,一键自动小程序分包等
React
生命周期,React Native
组件/API- 支持小程序内置组件/自定义组件直接使用
- 动画
- 支持Redux,支持Mobx
- 支持
typescript
- 不符合Alita语法限制的第三方库,需要手动扩展,扩展方式请查看
注意事项
由于不同平台的根本行差异,Alita对React Native应用有一些基本要求和限制。 除此以外,微信小程序本身就存在一些限制,比如包大小等。对这些限制,希望你有一个足够的了解。这样在使用Alita的过程中就不会出现莫名其妙的错误。
- 详细的说明了Alita转化的限制以及这些限制产生的原因限制&限制说明
- 一些尚未实现的组件,主要是平台相关组件,详见, 最终我们会提供
alita-ui
3端UI库,来补充这方面的不足。 - 当你的应用使用了第三方组件 且 此组件Alita不能直接转化,那么需要手动处理
Install
通过npm安装即可
npm install -g @areslabs/alita
若-g
有权限问题,需要sudo
Getting Started
我们在examples目录提供了丰富的样例代码, 强烈建议你clone出一份,然后使用Alita转化,你可以在这些样例代码上尝试任何你想要的功能。
当然你也可以使用如下的方式建立新的RN应用:
react-native init [项目名] && alita init [项目名]
alita init
命令 会对rn项目做一些调整,并且安装alita转化所必须的库。
如果需要初始化typescript
项目,请添加--typescript
参数
react-native init [项目名] && alita init [项目名] --typescript
注意: RN 0.60 以后的项目,IOS需要依赖CocoaPods
,导致初始化项目极其缓慢,可以使用其他版本的RN
react-native init [项目名] --version 0.59.9 && alita init [项目名]
项目初始化之后,小程序运行需要:
-
cd [项目名]
-
执行alita转化命令
alita
如果你需要边开发边看小程序效果可以添加
--dev
参数,打开开发者模式:alita --dev
-
这样,你在RN目录的
wx-dist
目录下就得到了一份小程序源代码 -
微信开发者工具从
wx-dist
目录导入项目
这样React Native应用就运行在了微信小程序,Have fun!!
命令行参数
alita命令有以下参数:
- -v alita 版本
- --dev 开发者模式,将监听RN源码修改,生成的文件较大,生产版本请禁用此参数
- --config 指定配置文件
- --analyzer 输出小程序js大小分布 (以后将会添加完整小程序代码分布)
Examples
下面是官方提供的RN项目案例,查看小程序效果,请进入相应目录执行alita --dev
HelloWorldRN, react-native 命令创建的项目,集成了alita所有特性,包括对小程序组件的直接使用。
ReactRepos,集成react-native-web
,支持RN, 小程序,H5
Todo(redux实现),Rudex Todo 项目
RoomMobx(mobx实现) Mobx项目案例
HelloWorldExpo, Expo命令创建的项目
配置文件
Alita可以通过参数--config
指定一个配置文件。当你的项目只使用了React Native官方组件和API的时候,这个配置文件是可以忽略的,使用系统默认配置就可以,但是当你的React Native应用足够复杂的,就需要使用配置文件了。
已有RN项目集成
Alita的设计目标是要尽可能无损的转换RN应用,即使是已经存在的RN应用。但是不可避免的,已有项目会更多的触及到Alita的限制,包括路由组件,动画组件。当你需要转化已有RN项目时,我们梳理了需要注意和必要的修改点
Alita组件库
在项目开发中,仅仅使用 RN 基本组件和 API,是很难满足需要的。我们在内部使用 Alita 的过程中,积累了很多常用的三端组件,包括ScrollTabView,ViewPager,SegmentedControl等等,我们正在剥离和梳理这些组件,很快会发布兼容三端的 Alita 组件库。此组件库也是我们日后的工作重点之一,我们将会不断优化和扩展新组件。
更新日志
本项目遵从 Angular Style Commit Message Conventions,更新日志由 conventional-changelog
自动生成。完整日志请点击 CHANGELOG.md。
alitajs
社区另有一个alitajs/alita,那是一个专注业务的Web全流程方案。我们重名了,带来的困扰很抱歉
使用案例
请在这里查找
开发交流
QQ群 | 微信公众号 |
![]() |
![]() |
License
MIT License
Copyright (c) ARES Labs