A React framework based on umi.
Home Page: https://alitajs.com
License: MIT License
A mobile React framework based on umi.
yarn create alitacreate pc app, use
yarn create alita --pc
Please refer to the official website for details.
| Github Issue | 钉钉群 | 微信群 |
|---|---|---|
| alitajs/alita/issues |  |
 |
React Native Util areslabs/alita
Thanks goes to these wonderful people (emoji key):
 小虎oni 💻 📖 🎨 |
 Ashoka 💻 |
 陈书航 💻 🔌 |
 精武陈真 💡 |
 yuhang 🔌 |
 chencheng (云谦) 🎨 |
 Yingci 🚇 |
 阿平 💻 |
 damon.chen 💻 |
 修行 💻 |
 红尘炼心 📖 |
 tangbzai 💻 |
 Hexi 💻 |
 Damon Wong 💻 |
 Alioth 💻 |
 Penguin-Lin 💻 |
增加约定文件src/Authority.j|ts
默认约定，存在这个文件的时候，会对所有的路由使用该文件进行鉴权
现在编译之后，在生产环境中，用不到 vendors.js
alita/packages/micro/src/index.ts
Lines 109 to 112 in 2c78bef
但是在编译的时候，还是一样生成了。
alita/packages/micro/src/index.ts
Lines 90 to 95 in 2c78bef
只是在编译成功之后，又用脚本删除了
alita/packages/micro/src/index.ts
Lines 136 to 140 in 2c78bef
不知道能不能直接不生成 vendors.js 文件。但是不影响其他文件的生成情况。
在umi中tabs中用umi-plugin-cache-route时，切换tab页并伴随route更新，会不定时报如下错误，同一个tab项有时报错有时又不报：
index.js:1 Warning: Failed prop type: The prop matchis marked as required inCacheSwitch, but its value is null. in CacheSwitch (created by Context.Consumer) in withRouter(CacheSwitch) (created by Updatable) in Updatable (created by CacheComponent) in div (created by CacheComponent) in CacheComponent (created by Context.Consumer) in Route (created by CacheRoute) in CacheRoute (created by RouteWithProps) in RouteWithProps (created by Updatable) in SwitchFragment (created by Updatable) in Updatable (created by CacheSwitch)
很不想做的一个需求
有点偏向跨平台方案了。
就看到一个微信小程序出的 https://github.com/Tencent/kbone
感觉应该会是当前 umi 支持小程序的最简实践方案。
A clear and concise description of what the bug is.
Provide a mini GitHub repository which can reproduce the issue. Use
yarn create alitathen upload to your GitHub
Steps to reproduce the behavior: 1. 2.
Expected behavior 1. 2.
完整方案见 #150
期望的效果是，用户打开网页的时候，就能看到骨架屏，但是这时候，react相关环境可能还没有启动。
<body><div id="root"><这里自动写骨架></div></body>
这样用户刚打开网页就以为项目启动了，体验极好。事实上还是一样的启动时间。
我按照官方文档配置@alitajs/native插件，
`
import { defineConfig } from 'alita';
export default defineConfig({
appType: 'cordova',
mobileLayout: false,
packageId: 'com.biad.parkgame',
displayName: 'biad.parkgame',
plugins: ['@alitajs/native'],
native: ['device'],
});
`
然后执行alita dev时报错
cordova platform use android cordova serve(pid:6268) Invalid config key: native Error: Invalid config key: native at Config.getConfig (D:\projects\biad.park.game.mobile\node_modules\@umijs\core\lib\Config\Config.js:178:13) at D:\projects\biad.park.game.mobile\node_modules\@umijs\core\lib\Service\Service.js:279:44 at Generator.next (<anonymous>) at asyncGeneratorStep (D:\projects\biad.park.game.mobile\node_modules\@umijs\core\lib\Service\Service.js:108:103) at _next (D:\projects\biad.park.game.mobile\node_modules\@umijs\core\lib\Service\Service.js:110:194) at processTicksAndRejections (internal/process/task_queues.js:93:5)
我想知道原生能力像camera之类的该怎么配置，万分感谢
需要做判断过滤
比如执行 alita -v 也会运行cordova热更新服务器
项目紧急需求，umi 一直没进展，先在alita中实现使用。
如果可以写成插件。
umijs/umi#3084
给一个按钮，点击一下换成其他颜色的。需要在build之后有效。
动态获取端口号 需要umi这个PR 收录才行
动态获取IP，当前方法是获取第一个网卡，当用户没有开启wifi时，会报错。
os.networkInterfaces().en0.filter比如演示版本的时候，希望发布的代码包含mock数据
开发完成之后，能够一件部署，现在还需要一个容器才能启动
build之后的请求代理
甚至需要ssr，看看是放到umi合适还是放这。
Describe the solution you'd like, better to provide some pseudo code.
Add any other context or screenshots about the feature request here.
当项目中带有 '-' ，执行 init失败
$alita cordova --init需要给出错误提示，在执行命令的时候先判断项目名称，判断带有'-'
直接给出错误提示，不执行 cordova create
在执行alita g app 的时候，判断项目名称带有 '-'
需要给出提示，"项目名称带有'-'，会导致后续cordova等功能不可用，建议修改"
public里面的文件，会经常引入第三方的js文件，
常规写法都是暴露到全局对象，而且基本上都是编译压缩过的代码
没有代码检测的必要
@all-contributors please add @xiaohuoni for code,doc,design
umi.js中引入@alitajs/hd插件做高清适配，ant mobile组件内的字体变小并且模糊。
config.js配置如下：
plugins: ['@alitajs/hd'],
hd: {
// same as config.theme, default set @hd: 2px
"theme": {},
"px2rem": {
"rootValue": 100,
"unitPrecision": 5,
"propWhiteList": [],
"propBlackList": [],
"exclude": false,
"selectorBlackList": [],
"ignoreIdentifier": false,
"replace": true,
"mediaQuery": false,
"minPixelValue": 3
}
}
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like, better to provide some pseudo code.
Add any other context or screenshots about the feature request here.
Hi, @xiaohuoni
According to npm’s installation rule, it parses the package.json based on the libraries’s declaration order, to construct the node_modules tree. For the libraries that have not been installed in the project, node_modules tree can share them by putting them at the top level of the tree. For the libraries that have been installed, it checks whether their specified version constraints are compatible with the installed ones. If yes, npm ignores them, otherwise, npm will put such duplicated libraries in the subfolders (npm’s sandboxes).
We installed and analyzed the alita, and found that it is large in size. alita’s node_modules tree has installed 2134 libraries. 1249 out of 2134 libraries are shared at the top level of the tree, while 885 libraries are the duplicated in the sandboxes. We further checked the duplicated libraries, and listed the them as follows (format: library name, version number, the number of installations on the node_modules tree). For example, “source-map, 0.6.1, 85” denotes that library source-map 0.6.1 has been installed 85 times in this project.
So many duplicated libraries could cause potential problems, such as: slower installs, exploding bundle sizes, and so on.
Based on npm’s installation rules, we comprehensively analyzed the compatibilities of all the transitive dependencies’ version ranges and the topological structure of your node_modules tree. We suggested alita add the following duplicated libraries with their compatible versions into the package.json file (as shown in the attachment), which help to refactor the project’s node_modules tree.
After cleaning the local installation environment and re-installing alita based on the revised package.json file, we found that the node_modules tree totally installs 1674 libraries, including the 1249 ones at the top level, 425 ones in the sandboxes. As such, the revised package.json file reduces 460 duplicated libraries for alita. In this manner, alita’s size is shrunk from 500MB to 357MB, reducing 7745files (from 58189 to 50444) and 1511 folders (from 7534 to 6023) in total. Note that, all the added directed dependencies in package.json file are deduced based on the original node_modules tree, which will not miss any required dependencies.
Before refactoring dependency tree——
After refactoring dependency tree——
package.json.txt
package-lock.json.txt
Would you like to adopt this suggestion to shrink the project’s size?
Thank you for your attention.
Best regards.
$ alita g app需要先手动新建一个空文件夹。
$ alita g app [name]先判断是否存在参数 name
如果存在，新建一个目录，再执行项目初始化
如果参数name不存在
判断当前文件夹是否为空文件夹
如果为空，执行项目初始化
如果不为空，给出提示，需要空文件夹，或者需要参数name
1.0 时是通过配置 uglifyJSOptions 实现的，umi@3 移除了 uglifyJSOptions 配置
保留 1.0 的特性和用法，默认移除，通过设置 retainLog 保留。
font-size: 36px;钉钉dingtalk
微信wechat
微信群失效的话，请添加下面机器人，回复alita进群。
alita layout 强绑定了umi，需要更新umi@3，最好是能够移除依赖关系。
但是router现在是从umi的runtime导出的。
Describe the solution you'd like, better to provide some pseudo code.
Add any other context or screenshots about the feature request here.
弹出软键盘会挤压页面
设置android:windowSoftInputMode="adjustPan|stateHidden"
- <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
+ <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustPan|stateHidden">至少需要简要的介绍一下什么是alita
这里是我se设置有误还是计算有误, 750的设计稿 计算出 font-size 是100, 导致在phone6 无法正常展示
cordova webview 需要手动设置
WebView webView = (WebView) this.appView.getView();
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
需要添加到脚本中。
platforms/android/app/src/main/java/com/alitaexample/xxxxx/MainActivity.java
loadUrl(launchUrl);
之后编写
使用动态路由，类似 /books/:id时
alivePathName为[/books/1234]
KeepAliveViewMap只有key /books/:id
DropByCacheKey执行到keepAliveViewMap[pathname].recreateTimes += 1;时会出现错误
是做一个移动版本的 pro-layout 吗？
开始操作，切换同级路由不会报错，一旦切换嵌套的路由就报出这样的一个警告！，请问这个是什么原因？是路由的版本关系？
想学习一下大神keep-alive的操作，
包中的代码都编译过了，读着实在难受，哪里有源码
记录一些坑位，简单的想法和demo
| 产品 | 项目 | 备注 |
|---|---|---|
| web-components | https://github.com/alitajs/components | |
| blocks | 充分用上抽象语法树 https://github.com/angular/angular-cli 感觉可以归到umi ui里面 | |
| alitax | https://github.com/refect/refect | |
| kiwi | https://github.com/alitajs/umi-plugin-kiwi | https://github.com/alibaba/kiwi |
| ice | https://github.com/alibaba/ice/ | |
| landing | 可视化编辑页面 https://github.com/ant-design/ant-design-landing | |
| static mock | 将mock数据解析成静态json，去掉参数，保留正确响应。是的，umi build 之后，不需要部署服务器就可以预览页面，用于项目演示 |
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
**/node_modules
# production
/dist
/.vscode
# misc
.DS_Store
npm-debug.log*
yarn-error.log
/coverage
.idea
yarn.lock
package-lock.json
*bak
.vscode
# visual studio code
.history
*.log
functions/*
lambda/mock/index.js
.temp/**
# umi
.umi
.umi-production我参照umi的issues对hd的解决方案，新构建了umi3的项目，然后yarn add @alitajs/hd --save了这个插件，按照实例在umirc.js里面配置了
plugins: ['@alitajs/hd'], hd:{},
启动的时候报错
node_modules/@alitajs/hd/lib/index.js: Cannot read property 'getFile' of undefined (47, 29)
请问该怎么处理啊
现在的项目中默认开启了umi-plugin-menus
会自动生成src/menus.json，在项目中一直没有使用
还存在不同的开发人员，生成的文件不太一致的代码冲突问题
https://umijs.org/zh-CN/docs/convention-routing#动态路由
试过在config中配置
keepalive: [
'/goods/search/:type',
'/goods/search/2',
'/goods/search/',
],
均无法命中动态的约定式路由
goods/search/[type].tsx
页面访问路径 http://localhost:8000/#/goods/search/2
调试可以看到被包裹到了rumtime-keep-alive-layout-no中
在对接 cordova 的时候，有一些常用的原生能力，对于不太熟悉 cordova 的同学很难选择。
比如选择文件，文件预览这些。
看到 ionic 收集了一些社区上比较好的库，并且构建了 ionic native
可惜包里还有 ng 的代码。
alita native 至少要做3件事
1、h5 开发环境的兼容，类似。
if (!(window as any).Fingerprint) {
(window as any).Fingerprint = {
isAvailable: (success) => { success && success() },
show: ({ }, success, error) => {
success && success()
}
}
}
2、调用方式改成 Promise
export const filePreView = meta => {
return new Promise((resolve, reject) => {
cordova.plugins.fileOpener2.open(meta.localURL, meta.type, {
error: function (e) {
reject('Error status: ' + e.status + ' - Error message: ' + e.message);
},
success: function () {
resolve('file opened successfully');
},
});
});
};
3、统一使用方式
import { filePreView } from '@alitajs/native'
or
import filePreView from '@alita-native/filePreView'
现在的使用现状
window.cordova.plugins.xxx
window.xxx
window.cordova.xxx
keek-alive未生效。
同时希望能够提供一个方法用于关闭某一个标签页。
由于umi改了一个路由获取，导致很多项目都挂了。
建议在alita中锁定umi版本，有更新跟随alita更新。
这样比较可控。
在umijs 3.x 配置
// .umirc.ts
export default {
plugins: ['@alitajs/hd'],
hd: true,
};
编译报错
Validate config "hd" failed, "value" must be of type object
ValidationError: "value" must be of type object
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body,
#root {
width: 100%;
height: 100%;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-overflow-scrolling: touch;
}
input {
border: none;
outline: none;
}
#root {
position: relative;
overflow: scroll;
}
textarea:disabled,
input:disabled {
background-color: transparent;
}A clear and concise description of what the bug is.
Provide a mini GitHub repository which can reproduce the issue. Use
yarn create alitathen upload to your GitHub
Steps to reproduce the behavior: 1. 2.
Expected behavior 1. 2.
去年的定位比较模糊，umi 有的能力都暴露出来了，对 umi 未提供的能力，写了简单插件支撑。做到后面，alita 可以说是一个简化配置的 umi 脚手架。今后 umi 生态会有更多的简化配置方案，umi@3 也会往“强约定”的方向发展。参加 SEE Conf 和阅读了最近 umijs 团队新增的几个项目，都是我们去年完成的，或者还未投入资源进行的，所以这部分的需求可以直接用 umi 和 antd 官方的，比自研靠谱。
今年 alita 的 slogan 应该还是 “让开发人员专注于业务本身”，会从去年的全 web 方向，转移到专注移动端App方向。 基本的发力点会聚焦在 “改善开发人员体验上”。
先看 umi 和 antd 官方有没有，有的方案，做一个集成。没有的方案，再自研。
约定 [] 包裹的文件或文件夹为动态路由。
比如：
+ pages
+ [post]
- index.js
- comments.js
+ users
- [id].js
- index.js会生成路由配置，
[
{ path: '/', exact: true, component: '@/pages/index' },
{ path: '/users/:id', exact: true, component: '@/pages/users/[id]' },
{ path: '/:post/', exact: true, component: '@/pages/[post]/index' },
{
path: '/:post/comments',
exact: true,
component: '@/pages/[post]/comments',
},
];直接使用 https://github.com/umijs/plugin-request
不再维护 https://github.com/alitajs/alita/blob/master/packages/alita/src/request.ts
实际应用中，发现，alitajs更多的被用于移动端开发。
在做可视化展示的时候，需要配套的图表库或者图表组件使用。
发现一个https://github.com/antvis/f2 ，但似乎图表库比较少
需要更丰富的图表库，或者自己补充组件。
多标签能否支持带有参数的链接？
场景：
页面中有两标签TabA、TabB
标签TabA对应href为： http://localhost:8000/detail?id=2&type=4
当点击标签TabB，然后再切回TabA，则上面参数?id=2&type=4丢失了
一、应用开发（包含扩展能力）
支持所有的web方案，不强制使用框架，最终产物也更贴近于web资源，只是在需要原生能力的时候调用平台SDK。但是依旧推荐使用alita 开发，因为可以通过框架层支持，把产物包拆的更小，可以使打开微应用的时候加载的web资源更少。可以解决web应用要么首屏打开慢，要么切换页面需要再次加载资源的问题。
二、平台SDK对接（应用API和服务端API）
1、应用API
① 基础能力（设备系统信息、更新微应用）
② 网络能力（请求、上传、下载、WebSocket）
③ 媒体（地图、图片的选择和保存、相机、音视频）
④ 位置（定位、选择地址）
⑤ 文件（保存、删除、选择）
⑥ 开放能力（登录、授权信息、支付、指纹和人脸识别、活体检测、数据统计）
⑦ 设备（NFC、剪切板、屏幕信息、扫码）
2、服务端API
① 登录
② 获取用户信息
③ 接口调用token
三、平台实现方案（这里只描述现已知的技术难点）
1、原生端（无特指的话均为ios和安卓）
① 走 web 资源下载的方式，类似cordova的形式，然后做文件管理，不同的微应用定向到不同的文件夹。
② 提供sdk相对应的原生函数方法。
③ 提供alita需要的环境，比如在全局变量中有 react 等基本库。
④ 提供开发调试的环境，未上架之前如何调试原生能力
2、web端
① 编译时抽离一些基本库，只打包业务需要的代码。基本剥离了所有的第三方库。
② 提供 sdk 的对接文件
③ 提供开发调试环境，未在原生场景时，调用原生方法应给出正确的说明等
④ 编译产物是否需要加密，涉及到原生端下载web资源的方式。
3、服务端
① OAuth2.0 认证
② 大数据分析
③ 数据统计
4、后台管理端
① 数据统计报表
② 数据分析平台
③ 基本的功能对应《平台接入流程》
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.