Flutter篇
环境安装(macOS)
参考Flutter
中文网的教程:https://flutterchina.club/setup-macos/
以上流程基本上是一把梭的就装好了,唯一需要注意的是PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL这俩得写进环境变量配置里,如下:
# 1,我直接加到了系统环境变量中,需要加到自己家目录下同理
vim /etc/profile
# 2,复制以下配置
# Flutter SDK https://flutterchina.club/setup-macos/
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
PATH=~/dev-lib/flutter/bin:$PATH
export PATH PUB_HOSTED_URL FLUTTER_STORAGE_BASE_URL
# 3,使环境变量生效
source /etc/profile
校验其他依赖
执行:flutter doctor
,该命令检查您的环境并在终端窗口中显示报告,所以缺什么,直接复制命名继续安装即可,直到我这样就行了:
开始撸代码,首先配置IDE(此处以VS Code为例)
配置方式如下
Visual Studio Code (VS Code) Dart安装
启动模拟器
这里用iOS模拟器演示,执行:flutter emulators --launch apple_ios_simulator
。然后模拟器就被正常启动
打开VS Code并创建Demo工程,按F5后
至此,Flutter
的Hello-World
工程就跑起来了,之后需要做的就是去学习语法开始撸代码
Rax篇
先来区分一下概念:Weex和Rax
前者是一个容器(运行时环境),后者是一个跨容器的渲染引擎。即:Rax可以跑在Weex里,但Weex不能跑在Rax中。
两者是相互独立的。Weex可以简单理解为:Vue-Native
。拿知乎段友的话概括就是:“看了一下好像是淘宝写 react-web 那几个人弄的,我猜他们是要用 weex 但是又喜欢 react 那套思想,所以整了个类 react 的东西,可以直接在 weex 里面渲染,也就是说可以用类似 react-native 的方式来写 weex 了”
具体也可以看看这里:Rax 系列教程(native 扫盲)
安装
# 1. 安装命令行
npm install -g rax-cli
# 2. 初始化项目
rax init hello-rax
# 3. 启动
npm run start
跑起来
Web端
通过控制台生成的二维码,直接访问
Native端
- 先安装Weex:
npm install -g weex-toolkit
再在Rax目录中创建Weex环境:
- 通过weex create创建的工程,没有iOS和Android工程模板,此时需要安装weex应用模板
// iOS (需要手动执行pod install)
weex platform add ios
// 安卓
weex platform add android
- 打开
WeexDemo.xcworkspace
,修改BUNDLE_URL
并运行playground
- 启动模拟器,就可以看到
Rax
跑起来了
总结
- 大腿方:Flutter抱Google,Rax抱Alibaba;
- 易用性:Flutter完爆Rax。Rax创建后只有编码环境,运行环境还得再装Weex,而Weex又是一个神奇的东西,对Native不熟的,可能会比较捉急;
- 通用性:Flutter目前主要用来做移动端,Web端不行。Rax则通吃,包括Web;
- Weex和RN对比:Weex和RN对比