Skip to content
一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子,不发明新框架,只是提供工具把RN扩展到微信小程序端。
Branch: master
Clone or download
ykforerlang refactor(alita): 简化main文件
(cherry picked from commit d87ccf9)
Latest commit 15c3428 Jul 18, 2019

README.md

Alita

English

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

npm Version npm Downloads npm License

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

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

React Native 微信小程序

Features

  • 完备的React语法支持。runtime阶段处理JSX语法,对JSX支持更加完善,可以在组件内任何地方出现JSX片段,包括属性传递JSX片段,render方法之外的JSX片段等等,
  • React生命周期
  • React Native组件/API
  • 动画
  • 支持Redux
  • 支持Mobx
  • 支持第三方/自定义组件库扩展, 扩展方式详见

Alita 原理相关

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

Install

通过npm安装即可

npm install -g @areslabs/alita

-g有权限问题,需要sudo

Getting Started

我们在examples目录提供了丰富的样例代码,包括HelloWorld(Expo命令创建的HelloWorldExpo, 和react-native命令创建的HelloWorldRN), Todo, ReactRepos。 强烈建议你clone出一份,然后使用Alita转化,你可以在这些样例代码上尝试任何你想要的功能。

当然你也可以建立自己的RN应用:

    react-native init myproject

注意 应用的路由需要使用@areslabs/router组件

下面以myproject项目说明Alita的使用

  1. 调用alita命令将其转化为微信小程序应用

    alita -i myproject -o myprojectwp
    
  2. 这样,你在myprojectwp目录就得到了一份小程序源代码。 进入myprojectwp 目录, 安装相关依赖

    cd myprojectwp
    npm install
    
  3. 微信开发者工具上运行myprojectwp代码。参考微信小程序文档,导入myprojectwp 目录, 运行。

    Alita生成的小程序使用了小程序的npm功能, 所以需要在微信开发者工具下构建npm, 工具 --> 构建npm。如下图

    buildnpm

    (如果开发者工具报: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命令有以下参数:

  1. -v 打印alita 版本
  2. -i React Native 源代码目录
  3. -o 转化生成的小程序源代码目录
  4. --config 指定配置文件
  5. --watch 监听模式
  6. --comp 转化RN组件,而不是整个项目

Examples

以下提供了一些样例代码以及他们转化出来的小程序代码。 当然你完全可以选择其他小程序源码输出目录,自行转化。

运行转化生成的微信小程序:

  1. 安装微信开发者工具
  2. 进入生成的小程序目录:npm install
  3. 开发者工具打开生成的小程序目录(老版本的开发者工具,在目录上新建小程序即可,新版本的开发者工具,需要导入项目
  4. 开发者工具上 点击:工具 --> 构建npm

HelloWorldExpo, Expo命令创建的项目,转化出来的小程序在HelloWorldWP

HelloWorldRN, react-native 命令创建的项目。 代码逻辑同HelloWorldExpo

Todo(redux实现),react-native 命令创建的项目,转化出来的小程序在TodoWP

ReactRepos,react-native 命令创建的项目,转化出来的小程序在ReactReposWP

RoomMobx Mobx项目,转化出来的小程序在RoomMobxWP

SubpackagesDemo, 通过小程序分包集成的方式,集成的小程序包

要求与限制

主要有3个方面的要求和限制

  1. 转化之后的小程序,必须符合小程序的规范, 比如最终压缩的代码小于4m,分包8m, 路由深度不大于5层等。

  2. Alita本身的一些限制 详见要求与限制静态限制

  3. 如果使用了第三方React Native组件,需要使用自定义组件库扩展 方式进行扩展

关于第三方包/组件库,原生组件

Alita并不能直接转化第三方库组件库,RN原生扩展组件。需要你预先在微信小程序平台对齐好相应组件,这一点很像你在原生平台上扩展RN组件,这很好理解,比如你在RN上扩展了一个原生平台组件MyComp,小程序并不知道这个MyComp为何物,需要你预先对齐好小程序版的MyComp,第三方组件库也是一样,也是需要手动的对齐处理。我们提供两种对齐方式,具体请参考。另外,我们还会发布alita-ui,她会处理好RN社区常用的一些组件,是直接被Alita支持的。

微信小程序对npm包有特殊的要求,你需要确定你的包是否可以直接在小程序端使用,我们在配置文件dependenciesMap字段对npm包的使用做了详细的说明。

配置文件

Alita可以通过参数--config指定一个配置文件。当你的项目只使用了React Native官方组件和API的时候,这个配置文件是可以忽略的,使用系统默认配置就可以,但是当你的React Native应用足够复杂的,就需要使用配置文件了。

详细介绍

eslint检查

虽然Alita支持了大部分的React语法,但是还是有一些情况Alita无法处理,比如原生RN动画库。另外Alita在转化代码的过程中,使用了一些保留字。我们希望这些来自Alita的限制可以近早的被发现,所以我们提供了一个eslint plugin。通过配置此plugin,可以让你在使用Alita转化代码之前,对你的代码进行静态的检查。

详细介绍

已有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全流程方案。我们重名了,带来的困扰很抱歉😅😅😅 。 所以如果你需要的是Web全流程方案,请点击

开发交流

QQ群 微信公众号

License

MIT License

Copyright (c) ARES Labs

You can’t perform that action at this time.