Alita,战斗天使阿丽塔,原型是《铳梦》中一位不断战斗和自我超越的生化改造少女。
Alita是一套React Native代码转换引擎工具。它对React语法有全新的处理方式,支持在运行时处理React语法,实现了React Native和微信小程序之间的主要组件对齐,可以用简洁、高效的方式把React Native代码转换成微信小程序代码。
Alita不是新的框架,也没有提出新的语法规则,她只做一件事,就是把你的React Native代码运行在微信小程序端。所以Alita的侵入性很低,选用与否,并不会对你的原有React Native开发方式造成太大影响。
React Native | 微信小程序 |
- 完备的React语法支持。runtime阶段处理JSX语法,对JSX支持更加完善,可以在组件内任何地方出现JSX片段,包括属性传递JSX片段,render方法之外的JSX片段等等,
- React生命周期
- React Native组件/API
- 动画
- 支持Redux
- 支持Mobx
- 支持第三方/自定义组件库扩展, 扩展方式详见
Alita使用运行时React语法处理方案,区别现有社区使用的编译时方案,对React语法的支持更加完备,具体请看:一种让小程序支持JSX语法的新思路
通过npm安装即可
npm install -g @areslabs/alita
若-g
有权限问题,需要sudo
我们在examples目录提供了丰富的样例代码,包括HelloWorld(Expo命令创建的HelloWorldExpo, 和react-native命令创建的HelloWorldRN), Todo, ReactRepos。 强烈建议你clone出一份,然后使用Alita转化,你可以在这些样例代码上尝试任何你想要的功能。
当然你也可以建立自己的RN应用:
react-native init myproject
注意 应用的路由需要使用@areslabs/router组件
下面以myproject
项目说明Alita的使用
-
调用alita命令将其转化为微信小程序应用
alita -i myproject -o myprojectwp
-
这样,你在
myprojectwp
目录就得到了一份小程序源代码。 进入myprojectwp
目录, 安装相关依赖cd myprojectwp npm install
-
在微信开发者工具上运行
myprojectwp
代码。参考微信小程序文档,导入myprojectwp
目录, 运行。Alita生成的小程序使用了小程序的npm功能, 所以需要在微信开发者工具下构建npm, 工具 --> 构建npm。如下图
(如果开发者工具报:
module "xxx" is not defined"
,说明npm模块没有构建好,需要点击上图构建。)
这样React Native应用就运行在了微信小程序
注意一般我们有两种方式创建React Native应用,一种是使用react-native命令, 另一种是使用expo。 这两种方式Alita都可以转化,但是不管是哪一种方式 创建的项目,都会在项目根目录创建App.js, App.json文件。但是这两个文件在微信小程序平台有特别的意义,所以必须对这两个文件重新命名。 react-native 命令创建的项目只需要把App.js 重命名比如RNApp.js即可, 而expo的方式需要参考
另外, React Native命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论坛中提供了这些库的国内下载链接
alita命令有以下参数:
- -v 打印alita 版本
- -i React Native 源代码目录
- -o 转化生成的小程序源代码目录
- --config 指定配置文件
- --watch 监听模式
- --comp 转化RN组件,而不是整个项目
以下提供了一些样例代码以及他们转化出来的小程序代码。 当然你完全可以选择其他小程序源码输出目录,自行转化。
运行转化生成的微信小程序:
- 安装
微信开发者工具
- 进入生成的小程序目录:
npm install
- 用
开发者工具
打开生成的小程序目录(老版本的开发者工具
,在目录上新建小程序
即可,新版本的开发者工具
,需要导入项目
) - 在
开发者工具
上 点击:工具 --> 构建npm
。
HelloWorldExpo, Expo命令创建的项目,转化出来的小程序在HelloWorldWP。
HelloWorldRN, react-native 命令创建的项目。 代码逻辑同HelloWorldExpo
Todo(redux实现),react-native 命令创建的项目,转化出来的小程序在TodoWP
ReactRepos,react-native 命令创建的项目,转化出来的小程序在ReactReposWP
RoomMobx Mobx项目,转化出来的小程序在RoomMobxWP
SubpackagesDemo, 通过小程序分包集成的方式,集成的小程序包
主要有3个方面的要求和限制
-
转化之后的小程序,必须符合小程序的规范, 比如最终压缩的代码小于4m,分包8m, 路由深度不大于5层等。
-
如果使用了第三方React Native组件,需要使用自定义组件库扩展 方式进行扩展
Alita并不能直接转化第三方库组件库,RN原生扩展组件。需要你预先在微信小程序平台对齐好相应组件,这一点很像你在原生平台上扩展RN组件,这很好理解,比如你在RN上扩展了一个原生平台组件MyComp
,小程序并不知道这个MyComp
为何物,需要你预先对齐好小程序版的MyComp
,第三方组件库也是一样,也是需要手动的对齐处理。我们提供两种对齐方式,具体请参考。另外,我们还会发布alita-ui
,她会处理好RN社区常用的一些组件,是直接被Alita支持的。
微信小程序对npm包有特殊的要求,你需要确定你的包是否可以直接在小程序端使用,我们在配置文件的dependenciesMap
字段对npm包的使用做了详细的说明。
Alita可以通过参数--config
指定一个配置文件。当你的项目只使用了React Native官方组件和API的时候,这个配置文件是可以忽略的,使用系统默认配置就可以,但是当你的React Native应用足够复杂的,就需要使用配置文件了。
虽然Alita支持了大部分的React语法,但是还是有一些情况Alita无法处理,比如原生RN动画库。另外Alita在转化代码的过程中,使用了一些保留字。我们希望这些来自Alita的限制可以近早的被发现,所以我们提供了一个eslint plugin。通过配置此plugin,可以让你在使用Alita转化代码之前,对你的代码进行静态的检查。
Alita的设计目标是要尽可能无损的转换RN应用,即使是已经存在的RN应用。但是不可避免的,已有项目会更多的触及到Alita的限制,包括路由组件,动画组件。当你需要转化已有RN项目时,我们梳理了需要注意和必要的修改点
在项目开发中,仅仅使用 RN 基本组件和 API,是很难满足需要的。我们在内部使用 Alita 的过程中,积累了很多常用的三端组件,包括ScrollTabView,ViewPager,SegmentedControl等等,我们正在剥离和梳理这些组件,很快会发布兼容三端的 Alita 组件库。此组件库也是我们日后的工作重点之一,我们将会不断优化和扩展新组件。
本项目遵从 Angular Style Commit Message Conventions,更新日志由 conventional-changelog
自动生成。完整日志请点击 CHANGELOG.md。
社区另有一个alitajs/alita,那是一个专注业务的Web全流程方案。我们重名了,带来的困扰很抱歉:sweat_smile::sweat_smile::sweat_smile: 。 所以如果你需要的是Web全流程方案,请点击
QQ群 | 微信公众号 |
MIT License
Copyright (c) ARES Labs