团队准备开一个新项目,需要开发Android和IOS两种平台App,但是我们团队的技术人员却很紧缺。于是我们便想到了跨平台开发,就目前来看,要么是小程序,要么就是Cordova、Weev、React Native,还有就是近段时间很火的Flutter了。但是,这几个,我们都没用过(毕竟,像我们这种半路出家的码农,很多东西基本上只是懂点皮毛,更深的就,,,😌)为了推广方便,我们用户端使用小程序开发,由一个学弟负责开发。服务端(服务人员用的)用Flutter开发,我负责。别问我为什么用Flutter,我不会写网站,没他玩得溜,我有点Java基础,转站Dart应该比较容易(额,我也没底)。那么,开始今天的教程吧。
获取Flutter SDK 并安装
-
下载最新的安装包
从Flutter官网下载,跳转到下载页面 。在中国大陆地区,要想正常下载安装包,可能需要科学上网,不过,我是直接访问的(似乎现在GFW对科技网站屏蔽没那么严了,大概是学术发展受重视了吧。)如果访问受阻,也可以试试去Flutter github项目下去下载安装包,跳转到下载页面 。 -
下载的安装包解压到你安装的目录
image
我打算安装在/Users/Shared
下
imageflutter
为Flutter根目录,什么意思呢?我们cd
进flutter
看看:
懂了吧,现在我们回到上一级目录,及
/Users/Shared
下,执行以下命令,将Flutter加入环境变量echo 'export PATH=/Users/Shared/flutter/bin:$PATH' >> ~/.bash_profile echo 'export PUB_HOSTED_URL=https://pub.flutter-io.cn' >> ~/.bash_profile echo 'export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn' >> ~/.bash_profile source ~/.bash_profile
以上命令中,第一条把Flutter加入环境变量,2、3条是将Flutter镜像源设置成中国的服务器(由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了镜像源)。第四条就不多说了吧,使配置生效。
安装其它依赖项
-
环境检查
接下来执行:flutter doctor
-
依赖安装
由于我下载的版本是前几天下载的,不是最新版,所以出现了下图的内容:
image这个时候我们需要安装提示执行红框内的命令来更新Flutter,然后就等着它更新完成。更新完成后,我们再次执行
imageflutter doctor
检查环境并在终端窗口中显示报告。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(需要执行的任务以粗体显示)
读者按照教程一直做可能会发现输出的内容和截图中不一样,比如没有图中Android Studio (version 3.2)
,IntelliJ IDEA Ultimate Edition (version 2018.3)
等,不要惊慌。这是由于我安装了Android Studio
和IntelliJ IDEA Ultimate Edition
而读者没安装,当然,你如果不用这两个软件去开发东西,自然也不需要安装。
例如:
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3) ✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
我们需要执行提示中的
imageflutter doctor --android-licenses
来解决这个问题。
执行这个命令后,终端会多次询问,均输入Y
然后回车
便是,命令执行完成后,你再次执行flutter doctor
便可发现刚刚那个问题已经解决了。
接下来,我们先把这几个问题解决掉,因为这几个解决起来很简单。
imageAndroid Studio (version 3.2)下的问题是因为我的Android Studio没有安装Flutter和Dart插件。我们打开Android Studio的插件中心安装Flutter和Dart插件便是,你先安装Flutter插件的话,它会提示你连同Dart插件一并安装
IntelliJ IDEA Ultimate Edition下的问题也是如此,在插件中心安装这两个插件便是。
Connected device这个不管它,就是因为你没连接手机设备而已。开发软件,调试时连接就是了。
重点我们讲讲这一部分
image我安装了Xcode,所以也需要解决一下:
✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
这段很好解决,按照提示执行
imagesudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
然后输入root密码便可。
从提示可以看出,iOS toolchain - develop for iOS devices 中后面这个3个叉都需要brew来安装东西。才能解决。如果你的电脑没安装brew的话,请前往这里根据文章安装brew。安装完成brew后,先根据提示把后面两个小问题解决了。
在解决这个问题时
✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run: brew update brew install --HEAD usbmuxd brew link usbmuxd brew install --HEAD libimobiledevice brew install ideviceinstaller
先按照提示安装,在执行
imagebrew install --HEAD libimobiledevice
后,它会先安装好几个libimobiledevice
需要的依赖,然后才安装libimobiledevice
,如果运气(网络)不好,可能会出现这个问题,一直卡在下图的位置。
这时,我们按
Ctrl+C
停止安装。然后执行:git clone https://github.com/libimobiledevice/libimobiledevice.git ~/Library/Caches/Homebrew/libimobiledevice--git
等待git克隆项目完成。
然后执行cd ~/Library/Caches/Homebrew/libimobiledevice--git
挂载到libimobiledevice--git
下
依次执行:./autogen.sh ./configure --disable-silent-rules --prefix=/usr/local/Cellar/libimobiledevice/HEAD-92c5462_3 --without-cython --enable-debug-code make install brew link libimobiledevice brew install ideviceinstaller
至于第二行中的
imageHEAD-92c5462_3
是怎么得来的。。请看这里,可能打开很慢。
这个命名是符合brew安装的规范的。
image
一系列骚操作完成后,再次执行flutter doctor
瞧瞧:
啊,好爽,强迫症的我终于满足了。
好了,Flutter 环境搭建基本Ok了。
睡觉觉😝
网友评论