关于混合开发,市面上的现在基本几种:webview+html、rn、weex、kotlin、flutter。
h5、rn之前都使用开发过多个产品,也很了解这两者的优劣,weex、kotlin只是大概了解过,而flutter之前看过,但感觉dart语法很不友好,当时也没有太接触。
最近看了一下关于rn、flutter的对比,于是想重新了解一下。
关于flutter
flutter是google推出的一款ui移动框架,可以快速在iOS和Android上构建高质量的原生用户界面,是基于dart语言,不需要像rn通过连接器与js通讯,性能比rn更胜一筹(未验证),在github的start数40000+,react-native的start数是70000+。
环境搭建
参考flutter中文网(https://flutterchina.club/get-started/install/)
1、下载flutter sdk
直接去官网下载可能下不下来,可以通过git下载
先设置镜像
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
***git clone -b beta https://github.com/flutter/flutter.git***
// 如果觉得这个下载下不下来或者太慢,可以通过下面这个国内码云地址
***git clone https://gitee.com/mirrors/Flutter.git***
2、设置环境变量
下下来flutter 后进入flutter目录可以看到bin目录。
将/flutter/bin设置到环境变量的path中。
在/flutter/bin目录下执行 flutter doctor命令。
3、android studio插件
下载android studio就不说了,打开android studio/file/setting/plugin/
plugin.png
输入 flutter查找并install。
第一次可能下不下来。我的电脑第一次就没下下来,是回家后打开电脑重新下载才下下来的,猜测可能是下载完flutter sdk、或者配置flutter环境变量后需要重启电脑。
在安装完插件并重新启动android studio就可以在 file/new/中看到一个新选项 New Flutter Project
flutter.png
hello word
按照惯例,接下来我们跑一个hello world。
照上面的new/new Flutter Project 然后 next、next、next一个新项目就建好了。
项目目录
flutterRun.png项目目录和rn目录类似,android、ios原生工程。lib放混合开发的dart文件,
pubspec.yaml项目的配置文件,类似于rn、react中的package.json,声明项目版本、依赖等。
在运行后如android,会在项目根目录的build(和android同目录)下生成构建之后的文件,这一点和rn以及之前的android项目很不一样,之前的androidbuild都是在/app/build/目录下。
运行
点击上面截图右上角绿三角run,第一次运行会比较慢。main.dart是主入口的混合文件。我们可以修改截图中间的文本内容,再运行
hello.png第一次运行结束,后面就需要熟悉dart语法,查看原生里的源码看实现原理。
网友评论