App跨平臺方案
Hybrid框架
Hybrid App而克，其實就是原生應(yīng)用和Web應(yīng)用相結(jié)合惊科，一般做法就是項目中的某一部分是原生界面，一部分是Web頁面馆截，通過原生平臺的WebView去調(diào)用Web頁面蜡娶。
由于原生WebView存在一定的局限性，和Web交互起來有些問題不好處理窖张，于是出現(xiàn)了一些基于原生WebView封裝的Hybrid框架，這些框架有一個共同特點：封裝了移動端設(shè)備上最常用的本地API調(diào)用赘淮，然后以統(tǒng)一的Javascript API形式提供給Web開發(fā)者調(diào)用睦霎。這樣一來原生不能解決的問題可以用Web去處理，同時你也可以自己封裝原生API副女，做成一些插件使用。比較熱門的Hybrid框架有Ionic戴陡、Cordova沟涨、DCloud：
響應(yīng)式視圖
像ReactJS或其他的響應(yīng)式編程框架已經(jīng)變得很流行了，主要是因為他們通過使用從響應(yīng)式編程中借用的編程模式來簡化 Web 視圖的創(chuàng)建過程开皿。2015 年， React Native 將響應(yīng)式視圖的許多優(yōu)勢帶給了移動應(yīng)用程序赋荆。React Native 是非常受歡迎的（這是它應(yīng)得的）懊昨，但是因為 JavaScript 訪問了原生 UI 組件，所以它也必須經(jīng)過這些“橋接器”嫉你，界面上的 UI 控件通常被頻繁地訪問（在動畫、轉(zhuǎn)化或者用戶用手指“滑動”屏幕上的某些東西時幽污，每秒被訪問高達 60 次）簿姨，因此這很可能會導致性能問題簸搞。
Flutter
和 React Native 一樣趁俊，F(xiàn)lutter 也提供響應(yīng)式的視圖，F(xiàn)lutter 采用不同的方法避免由 JavaScript 橋接器引起的性能問題寺擂，即用名為 Dart 的程序語言來編譯泼掠。Dart 是用預(yù)編譯的方式編譯多個平臺的原生代碼，這允許 Flutter 直接與平臺通信择镇，而不需要通過執(zhí)行上下文切換的 JavaScript 橋接器。編譯為原生代碼也可以加快應(yīng)用程序的啟動時間沐鼠。
Flutter簡介
Flutter是谷歌的移動UI框架饲梭，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作憔涉。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用穿扳，并且Flutter是完全免費、開源的矛物。簡單來說跪但，F(xiàn)lutter是一款移動應(yīng)用程序SDK，包含框架屡久、控件和一些工具，可以用一套代碼同時構(gòu)建Android和iOS應(yīng)用被环，并且性能可以達到原生應(yīng)用一樣的性能。詳情請參考Flutter簡介 筛欢。
- 快速開發(fā)：毫秒級的熱重載唇聘，修改后雳灾，您的應(yīng)用界面會立即更新漠酿。使用豐富的、完全可定制的widget在幾分鐘內(nèi)構(gòu)建原生界面宇姚。
- 富有表現(xiàn)力和靈活的UI：快速發(fā)布聚焦于原生體驗的功能夫凸。分層的架構(gòu)允許您完全自定義，從而實現(xiàn)難以置信的快速渲染和富有表現(xiàn)力夭拌、靈活的設(shè)計。
- 原生性能：Flutter包含了許多核心的widget蒜绽，如滾動、導航躲雅、圖標和字體等骡和，這些都可以在iOS和Android上達到原生應(yīng)用一樣的性能。
環(huán)境搭建
這里僅以在Mac下搭建為例慰于，在其它系統(tǒng)上配置環(huán)境請參考flutter 官網(wǎng)
獲取Flutter SDK
-
去flutter官網(wǎng)下載其最新可用的安裝包，轉(zhuǎn)到下載頁 绵脯。
注意页藻，F(xiàn)lutter的渠道版本會不停變動，請以Flutter官網(wǎng)為準份帐。另外，在中國大陸地區(qū)畜挨，要想正常獲取安裝包列表或下載安裝包筒繁，可能需要翻墻毡咏，讀者也可以去Flutter github項目下去下載安裝包逮刨，轉(zhuǎn)到下載頁 。
-
解壓安裝包到你想安裝的目錄修己，如：
cd ~/development unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip -
添加
flutter相關(guān)工具到path中：export PATH=`pwd`/flutter/bin:$PATH
由于一些
flutter命令需要聯(lián)網(wǎng)獲取數(shù)據(jù)，如果您是在國內(nèi)訪問片仿，直接訪問很可能不會成功尤辱。可以使用以下鏡像export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn注意： 此鏡像為臨時鏡像光督，并不能保證一直可用，可以參考詳情請參考 Using Flutter in China 以獲得有關(guān)鏡像服務(wù)器的最新動態(tài)娄涩。
更新環(huán)境變量
您在命令行只能更新當前會話的PATH變量，如Clone Flutter repo所示凭需。 但是亿鲜，您可能需要的是永久更新此變量，以便您可以運行flutter命令在任何終端會話中歼争。
對于所有終端會話永久修改此變量的步驟是和特定計算機系統(tǒng)相關(guān)的阅束。通常，您會在打開新窗口時將設(shè)置環(huán)境變量的命令添加到執(zhí)行的文件中张惹。例如
- 確定您Flutter SDK的目錄岭洲，您將在步驟3中用到。
- 打開(或創(chuàng)建)
$HOME/.bash_profile. 文件路徑和文件名可能在您的機器上不同. - 添加以下行并更改
[PATH_TO_FLUTTER_GIT_DIRECTORY]為克隆Flutter的git repo的路徑:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
注意：
PATH_TO_FLUTTER_GIT_DIRECTORY為你flutter的路徑雷激，比如“~/document/code”
export PATH=~/document/code/flutter/bin:$PATH
- 運行
source $HOME/.bash_profile刷新當前終端窗口.
注意: 如果你使用的是zsh替蔬，終端啟動時
~/.bash_profile將不會被加載承桥，解決辦法就是修改~/.zshrc，在其中添加：source ~/.bash_profile
- 通過運行
flutter/bin命令驗證目錄是否在已經(jīng)在PATH中:
echo $PATH
安裝iOS環(huán)境以及Android環(huán)境
安裝Xcode以及Android Studio凶异，詳情參考平臺配置
檢查flutter環(huán)境
以上步驟完成之后，運行flutter doctor檢查環(huán)境是否配置成功
遇到任何的錯誤唠帝，請按照命令行提示執(zhí)行
運行flutter
通過flutter create myapp命令創(chuàng)建一個flutter 初始項目玄柏，通過命令行進入該項目cd myapp贴铜，連接好手機設(shè)備之后，通過flutter run命令運行app
flutter create myapp
cd myapp
flutter run
運行成功之后徘意，可以在app中看到如下頁面，通過修改lib/main.dart文件來創(chuàng)建自己的應(yīng)用
