areslabs / alita Goto Github PK
View Code? Open in Web Editor NEW一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子,不发明新框架,只是提供工具把RN扩展到微信小程序端。
Home Page: https://areslabs.github.io/alita
License: MIT License
一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子,不发明新框架,只是提供工具把RN扩展到微信小程序端。
Home Page: https://areslabs.github.io/alita
License: MIT License
当我如下时候,微信开发者工具将会报错 ,工具转化路径解析有误。
未找到 app.json 中的定义的 pages "src/components/component-d/index" 对应的 WXML 文件
.
├── components
│ ├── component-d.jsx
│ └── component-d.tsx
├── index.jsx
├── index.tsx
├── index.web.jsx
├── index.web.tsx
├── react-app-env.d.ts
├── serviceWorker.js
├── serviceWorker.ts
└── types.d.ts
index.jsx
中的代码如下:
import React, { PureComponent } from "react";
import { Router, Route, TabRouter } from "@areslabs/router";
import D from './components/component-d';
export default class App extends PureComponent {
render() {
return (<Router>
<TabRouter text="常见动画">
<Route key={"D"} component={D}/>
</TabRouter>
</Router>);
}
}
生成的 app.json 文件内容为:
{
"pages": [
"src/components/component-d/index"
],
"window": {
"backgroundTextStyle": "light",
"backgroundColor": "#E9E9E9",
"enablePullDownRefresh": false
},
"tabBar": {
"list": [
{
"pagePath": "src/components/component-d/index",
"text": "常见动画"
}
]
},
"sitemapLocation": "sitemap.json"
}
在 pages
字段中自动帮我添加上了index,此处转化的时候应该判断下是否为文件夹?还是说我文档看漏啦
Alita尚无计划在短期内支持Hook, 不得不承认React Hook是很棒的API,但是由于Alita在内部使用的RN版本是0.55.4, React版本是16.3, 对Hook的需要尚不强烈,所以Hook短期应该不会支持。
<TouchableOpacity
onPress={() => {
this.props.onPress()
}}>
{this.props.disabled
? <View style={{opacity: 0.3}}>{this.props.children}</View>
: this.props.children}
</TouchableOpacity>
组件内写了类似的三目运算后,模板不会生成,编译也不会有报错
衷心感谢你们提供了这个将RN转化为小程序的工具,这给我们的业务带来了帮助。
但是想问一下的是,在官方example里面,我看到了flow的配置文件,但是最终在通过Alita转化我们自己项目的flow风格的JS代码的时候,却出现了错误。
所以我的问题是:你们有什么办法可以在Alita中加入flow转换的功能吗? 或者有什么现有的功能可以使用呢
(示例中的flow的痕迹)
(实际使用中Alita转化flow风格代码时候报错了)
同时说一下,我现在的一个替代方法是,自己通过编写shell脚本复制一个新的APP项目出来,然后通过flow-remove-type这个cli去移除flow的风格,变成普通的JS代码,然后再使用Alita转化。
要是Alita有直接的可以做就更好了
最后,不管怎样,谢谢你们
`import { Provider } from 'react-redux'
render() {
return {getRouter()}
}
构建的时候出现 错误 **搜索路径失败!**
TypeError: Cannot read property 'Provider' of undefined`
惊雷
alita路由多Tab和无Tab如何混用,比如登录跳转到Tab页
用微信开发工具打开HelloWordRNWP报错:
Page is not constructed because it is not found.
console.error @ VM26:1
E @ WAService.js:18
Kt @ WAService.js:19
Qt @ WAService.js:19
nn @ WAService.js:19
(anonymous) @ WAService.js:19
(anonymous) @ WAService.js:18
X.emit @ WAService.js:7
emit @ WAService.js:6
(anonymous) @ WAService.js:8
(anonymous) @ WAService.js:5
n @ appservice?t=1564994525751:5100
(anonymous) @ appservice?t=1564994525751:5100
(anonymous) @ appservice?t=1564994525751:5100
_ws.onmessage @ appservice?t=1564994525751:5100
重要的地图组件怎么处理?
为啥京东没有自己的github仓库? 还有单打独斗,这两个轮子(另一个jd的)都连一点jd的标记真的好吗?
微信小程序开发助手,1.02.1907300版本
上个版本,转化后,运行正常,当前版本会报错,显示
miniprogram_npm/@areslabs/wx-react-native/component/WXFlatList/index:
pageJSON["componentGenerics"]["renderItemCPT"] 字段需为 boolean/object
pageJSON["componentGenerics"]["ListFooterComponentCPT"] 字段需为 boolean/object
pageJSON["componentGenerics"]["ListHeaderComponentCPT"] 字段需为 boolean/object
pageJSON["componentGenerics"]["ListEmptyComponentCPT"] 字段需为 boolean/object
并且 examples 中 HelloWorldRNWP 显示同样的错误
是否支持ts、tsx写的RN代码转义?
alita -i myproject -o myprojectwp 每次修改必须要手动输出,求支持文件监听,自动重新构建出新的输出⽂件
给大佬点赞
如题,为什么技术选型的时候要使用React native而不是React?
我们项目有很多地方用到 React.createContext 这个特性,请问 alita 可否支持下?
flutter的思路来源于react。它通过一次编写支持开发app(安卓、ios)、桌面、web程序。但是它缺乏国内小程序的支持
5月flutter web发布了,转译为标准的javascript、css、html和canvas成为了现实(dart2js)。
另外,从技术角度上看flutter转译为taro,进而通过taro支持所有平台是可行的
这样前端开发人员只要学习flutter就可以了,然后通过你们的工具转译到其他全平台
这将是伟大的创新,京东的全球首创!可以大大减轻程序员的负担,解放程序员,减少996.icu
A跳转到B页面,B页面setWxInstByUUID一个名为a000000Q的对象,B返回A页面时,B页面调用removeUUID移除了a000000Q对象,单移除后又调用了getWxInstByUUID(a000000Q),因为innerMap[key]为undefined所以报错,这里可以innerMap[key] || {} 做一下保护。为何在移除该uuid后还会get一次
我在examples的基础上加上了elements,转换后,小程序里会报找不到module。
当使用Button时, 编译正常, 在小程序端运行时报错;
import React from 'react';
import {View, Text, Button, TouchableOpacity} from 'react-native';
import {history} from '@areslabs/router';
const MainPage: React.FC<{}> = ({}) => {
return (
<View>
<Text>Hello World</Text>
<View>
<TouchableOpacity onPress={()=>{
history.push("SecondPage")
}}>
<Text>Click Me</Text>
</TouchableOpacity>
<Button
title="Click Me"
onPress={() => {
history.push("SecondPage")
}}
/>
</View>
</View>
);
}
export default MainPage;
异常:
VM2318:1 TypeError: inst.render is not a function
at updateClassComponent (index.js:1888)
at render (index.js:1303)
at renderPage (index.js:2451)
at index.js:2951
console.error @ VM2318:1
render @ index.js:1311
renderPage @ index.js:2451
(anonymous) @ index.js:2951
Promise.then (async)
WxNormalComp.o.methods.onLoad @ index.js:2950
(anonymous) @ VM2324 WAService.js:2
p.__callPageLifeTime__ @ VM2324 WAService.js:2
jt @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
Mt @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
i.emit @ VM2324 WAService.js:2
emit @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
i.emit @ VM2324 WAService.js:2
emit @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
n @ VM2322 asdebug.js:1
(anonymous) @ VM2322 asdebug.js:1
(anonymous) @ VM2322 asdebug.js:1
_ws.onmessage @ VM2322 asdebug.js:1
VM2318:1 (in promise) MiniProgramError
inst.getWxInst is not a function
TypeError: inst.getWxInst is not a function
at Ge.<anonymous> (http://127.0.0.1:32560/appservice/_rn_.js:3984:29)
at Ge.<anonymous> (http://127.0.0.1:32560/appservice/__dev__/WAService.js:2:1897073)
at commitWork (http://127.0.0.1:32560/appservice/_rn_.js:3942:15)
at renderPage (http://127.0.0.1:32560/appservice/_rn_.js:3898:3)
at http://127.0.0.1:32560/appservice/_rn_.js:4390:9
在Todo demo中引入 hello-rn,在alita.config.js中添加
include:[
path.resolve('node_modules', '@areslabs', 'hello-rn')
],
运行后报错
./RNApp.js 32:12
Module parse failed: Unexpected token (32:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
RT
<ScrollView
ref={ref => this.scrollView = ref}
style={ styles.container }
alwaysBounceVertical={ true }
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true})
}}
>
如果 您有上线的使用Alita的业务, 可以在这里留言,我们定期更新到首页README,最好能够提供App或者小程序名,以及App图标或者小程序二维码 😄 😄 😄
比如: a/myFunc.js
export default function XX(props) {}
会报错,但是把 XX改为 myFunc就不报错了,或者用匿名函数也不报错
热忱的开发者您好
现在Alita在一键转化的时候
对于那些仅仅因为包含原生平台组件而不符合要求的文件(注意是仅仅),是一律选择不转化的,就是转化后没有生成那个文件
那么能否支持这样一种特性呢:
对于包含原生平台组件(如DatePickerAndroid,ToastAndroid)等组件或API,选择忽略掉这部分组件的转化,但是文件中的其他代码还是允许转化成功的。
也就是说,把转化的粒度要求降低为“组件” 而不是“文件”
现在我们项目耦合了比较多的原生平台的代码,要直接去除成本有点高。
请问这个需求是否合理呢?想听听您的理由
有些部分比较难适配alita的转换,如何在转换后的项目中添加原生小程序文件?在文档中没有找到答案,望解答谢谢~
现在Alita的每一个React组件,都会在小程序底层存在一个同等的小程序组件映射。这带来了很多好处
同时,也带来一些限制:
如果把所有节点渲染在一个Page,让组件的概念只保留在React层面,可以让Alita支持其他小程序节省很多工作。 但是上面提到的好处也就没有了。
我在做一些测试,看是否值得
首先感谢贵司的软件工程师在小程序框架上所做的贡献。╭( ̄▽ ̄)╯
我对Alita和Taro都保持着关注,学习和了解,同时也有一些自己的问题
Taro对于生成小程序项目的限制是比较宽的,而相对之下Alita则严格一些。以下的两个限制在贵司的Taro框架中是不需要考虑的,但在目前版本的Alita中则存在
请问它们是否也会从未来的Alita的转化限制中解除呢?
看了一下,当前的issue,目前只是小部分页面直接使用alita转换;我这边如果将已有的 全部转化...坐着这边是否有相关的demo呀...目前使用示例好少...(我司目前有好多自定义的rn组件)...看了一下介绍,还处于半懵逼的状态0.0
RN中使用了react-nagation,报错Uncaught Error: module "app/pages/Main/react-navigation" is not defined
例如 HelloWorldRN 中将src/a/MyChildComp.js
名称改为 =>src/a/MyChildComp.jsx
程序 alita -i HelloWorldRN -o HelloWorldRN-out
将会转化出
MyChildComp.jsx
MyChildComp.wxmlx
MyChildComp.wxssx
MyChildCompTemplate.wxmlx
所有文件都多了个 x
,小程序无法正常识别。
我是这样想的
1.如果支持对TypeScript转化为Javascript的话就更好了
2.如果不支持的话,那么我这边用tsc编译工具转化一下也可以
请问知不支持呢
可以告知下对应的小程序名和APP路径吗。
社区有 react-native-web 方案,支持把 RN 转成 web,你们有没有考虑过集成进来或者自己开发一套用来支持 web 端?
组件SafeAreaView 没有在react-native指定
HOC 组件看起来是无法在小程序中使用
TypeError: func.body.body is not iterable
这个有点让人摸不着头脑
TypeError: Cannot read property '0' of null
目前alita已经只支持Redux,请问是否有计划支持Mobx ?
alita是否有和微信小程序一样的switchTab可用?做非Tab页跳转
npx react-native init WemallApp && alita init WemallApp --typescript
初始化完成后, 运行android, app打开时报错
AppContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:67605:22
[Thu Jul 09 2020 16:50:55.257] ERROR TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')
[Thu Jul 09 2020 16:50:55.258] ERROR TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')
This error is located at:
in SafeView (at withOrientation.js:54)
in withOrientation (at Header.js:433)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Header.js:430)
in Header (at withOrientation.js:30)
in withOrientation (at StackViewLayout.js:129)
in RCTView (at View.js:34)
in View (at StackViewLayout.js:476)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at screens.native.js:71)
in Screen (at StackViewCard.js:42)
in Card (at createPointerEventsContainer.js:26)
in Container (at StackViewLayout.js:507)
in RCTView (at View.js:34)
in View (at screens.native.js:101)
in ScreenContainer (at StackViewLayout.js:401)
in RCTView (at View.js:34)
in View (at StackViewLayout.js:400)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:49)
in RCTView (at View.js:34)
in View (at Transitioner.js:141)
in Transitioner (at StackView.js:19)
in StackView (at createNavigator.js:57)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:376)
in NavigationContainer (at Router.js:151)
in Router (at src/index.tsx:23)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
[Thu Jul 09 2020 16:50:55.259] ERROR TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')
This error is located at:
in NavigationContainer (at Router.js:151)
in Router (at src/index.tsx:23)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
[Thu Jul 09 2020 16:50:55.260] ERROR TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')
This error is located at:
in NavigationContainer (at Router.js:151)
in Router (at src/index.tsx:23)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.