Home

Awesome

Alita

English

Alita,战斗天使阿丽塔,原型是《铳梦》中一位不断战斗和自我超越的生化改造少女。

npm Version npm Downloads npm License lerna

Alita是一款把React Native运行在小程序平台的工具引擎。与现有编译时方案不同,Alita对React语法有全新的处理方式,支持在运行时处理React语法,实现了React Native和微信小程序之间的主要组件对齐,可以用简洁、高效的方式把React Native代码转换成微信小程序代码。

Alita不是新的框架,也没有提出新的语法规则,她只做一件事,就是把你的React Native代码运行在微信小程序端。所以Alita的侵入性很低,选用与否,并不会对你的原有React Native开发方式造成太大影响。

ReactRepos展示:

<table> <tr> <td>React Native</td> <td>小程序(by Alita)</td> <td>Web(by react-native-web)</td> </tr> <tr> <td><img src="./docs/static/rnalita.gif"/></td> <td><img src="./docs/static/wxalita.gif"/></td> <td><img src="./docs/static/webalita.jpg"/></td> </tr> </table>

Alita 原理相关

  1. Alita使用运行时React语法处理方案,区别现有社区使用的编译时方案,对React语法的支持更加完备,具体请看:一种让小程序支持JSX语法的新思路

  2. 更进一步的Alita对JSX的处理可以抽象为对对声明式语法的处理,所以Flutter理论上也是可以处理的,详见flutter_mp

  3. 关于React和小程序的数据交互方式,请看:React与小程序的数据交换

Features

注意事项

由于不同平台的根本行差异,Alita对React Native应用有一些基本要求和限制。 除此以外,微信小程序本身就存在一些限制,比如包大小等。对这些限制,希望你有一个足够的了解。这样在使用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 [项目名]

项目初始化之后,小程序运行需要:

  1. cd [项目名]

  2. 执行alita转化命令

    alita 
    

    如果你需要边开发边看小程序效果可以添加--dev 参数,打开开发者模式:

    alita --dev
    
  3. 这样,你在RN目录的wx-dist目录下就得到了一份小程序源代码

  4. 微信开发者工具wx-dist目录导入项目

这样React Native应用就运行在了微信小程序,Have fun!!

命令行参数

alita命令有以下参数:

  1. -v alita 版本
  2. --dev 开发者模式,将监听RN源码修改,生成的文件较大,生产版本请禁用此参数
  3. --config 指定配置文件
  4. --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全流程方案。我们重名了,带来的困扰很抱歉:sweat_smile::sweat_smile::sweat_smile: 。 所以如果你需要的是Web全流程方案,请点击

使用案例

请在这里查找

开发交流

<table> <tr> <td>QQ群</td> <td>微信公众号</td> </tr> <tr> <td><img src="./docs/static/qqgroup.jpg"/></td> <td><img src="./docs/static/gzh.jpg"/></td> </tr> </table>

License

MIT License

Copyright (c) ARES Labs