想一個好的工具型應用的點子非常不容易，有了點子以后會發(fā)現(xiàn)启搂，在各個平臺實現(xiàn)，滿足各個平臺的用戶更是意見困難的事情刘陶「於模可能需要在Android設備上小試牛刀，發(fā)覺反響不錯匙隔，再接入iOS設備和PC平臺疑苫。這樣帶來巨大的移植成本和用戶體驗的不一致。懶惰而又聰明的程序員們不斷的思考，通過框架的使用捍掺，使得開發(fā)一次撼短，全平臺運行成為可能。本文介紹兩種常用的跨平臺研發(fā)框架Cordova和Electron挺勿，全部基于HTML曲横、CSS和JS進行研發(fā)。
當下最流行的莫過于移動App不瓶，而移動App又可分為三種：原生應用禾嫉、Web應用和混合型應用。
原生應用
通過各種應用市場安裝蚊丐，采用平臺特定語言開發(fā)熙参；
提供最佳的用戶體驗、最優(yōu)質(zhì)的用戶界面和最華麗的交互麦备，節(jié)省網(wǎng)絡成本孽椰。
但是移植麻煩，維護成本高凛篙，需要通過應用市場發(fā)布黍匾；
Web應用
通過瀏覽器訪問，采用Web技術開發(fā)呛梆。
開發(fā)適配成本低膀捷，可跨平臺和終端，迭代無需重復安裝App削彬。
但是體驗不及原生，尤其是斷網(wǎng)的情況下不能離線秀仲，處理本地文件系統(tǒng)的能力比較弱融痛；
混合型應用
通過各種應用市場安裝，部分使用WebView讀取網(wǎng)頁展示神僵。它雖然看上去是一個原生應用雁刷，但里面訪問的實際上是一個Web應用。
混合型應用是以上兩者混合的產(chǎn)物保礼，彌補了上面兩種應用開發(fā)模式的缺陷而生沛励，并且盡可能繼承了雙方的優(yōu)勢。
Web前端工程師可以接入移動客戶端炮障、桌面應用的研發(fā)目派，模糊了工程師分工的界限。
移植性好胁赢，一次開發(fā)企蹭，多平臺可用，提升研發(fā)效率，降低維護成本谅摄⊥胶樱可通過JS調(diào)用本地方法，彌補Web應用體驗上的不足送漠；
如此看來顽照，前端工程師的前途一片大好，可以跨入應用開發(fā)領域闽寡，而且是企業(yè)降低成本代兵，提升效率的不錯選擇。下面我們就來看看兩種當下流行的跨平臺框架吧下隧。
Cordova簡介
Cordova的前身就是PhoneGap奢人，PhoneGap將核心代碼抽出，作為開源項目淆院，貢獻給了Apache何乎。
Cordova（工具）將html, css, js變成app，它不會把前端頁面變成native的Obj-C或者Java代碼土辩，生成原生的App支救，而是以網(wǎng)頁形式呈現(xiàn)，在Android的WebView或iOS的UIWebView中渲染的拷淘。Cordova提供眾多API各墨，在網(wǎng)頁中使用js去訪問應用原生的方法∑粞模可以用一套代碼贬堵，在Android和iOS設備，以及Web上運行结洼。
Cordova安裝及使用
官方地址：https://cordova.apache.org/
Installing Cordova
需要安裝Node.js黎做，https://nodejs.org/，里面附帶npm松忍。
安裝完Node.js以后蒸殿，運行命令行：
$sudo npm install -g cordova
Create a project
$ cordova create MyFirstApp
- hooks：存放自定義cordova命令的腳本文件。每個project命令都可以定義before和after的Hook鸣峭，比如：before_build宏所、after_build
- platforms：平臺目錄，各自的平臺代碼就放在這里摊溶，可以放一下平臺專屬的代碼
- plugins：Cordova插件目錄爬骤，安裝的插件會放在這里，cordova提供的原生API也是以插件的形式提供的
- www：源代碼目錄莫换。在cordova prepare的時候會被copy到各個平臺工程的assets\www目錄中
- config.xml：主要是cordova的一些配置盖腕，比如：項目使用了哪些插件赫冬、應用圖標icon和啟動頁面
Add a platform
$ cd MyFirstApp
$ cordova platform
$ cordova platform add android
$ cordova platform add broswer
$ cordova platform add ios
Add plugins
用于訪問OS的Native方法，操作硬件溃列，如照相機劲厌、陀螺儀、照片文檔和設備位置等听隐，可以按需添加补鼻，Cordova官網(wǎng)有插件庫，可自行查閱雅任，這里舉幾個常用的：
獲取設備基本信息
$ cordova plugin add org.apache.cordova.device
獲取相機和媒體文件
$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media
獲取網(wǎng)絡連接狀態(tài)
$ cordova plugin add org.apache.cordova.network-information
獲取設備電池狀態(tài)
$ cordova plugin add org.apache.cordova.battery-status
Run your app
$ cordova run <platform name>
Web APP
是各個平臺的運行框架风范，提供相應平臺的入口，通過啟動類似WebView的控件沪么，將入口文件index.html渲染出來硼婿，可以打包成對應的App，在各大應用市場分發(fā)禽车。
WebView
Cordova啟用的WebView可以給應用提供完整用戶訪問界面寇漫。在一些平臺中，他也可以作為一個組件給大的殉摔、混合應用州胳，這些應用混合和Webview和原生的應用組件。
Cordova Plugins
插件是Cordova生態(tài)系統(tǒng)的重要組成部分逸月，提供了Cordova和原生組件相互通信的接口并綁定到了標準的設備API上栓撞，開發(fā)者可以通過JavaScript調(diào)用原生代碼。
Electron簡介
Electron也是一款使用JS碗硬、HTML瓤湘、CSS做為編寫言的應用開發(fā)框架，相比Cordova恩尾，Electron更側重于Windows岭粤、MacOS和Linux系統(tǒng)，在這三個系統(tǒng)之上特笋，一般稱之為桌面應用，一次研發(fā)巾兆，各平臺運用猎物；將“Chromium”和“Node.js”做了非常好的集成，把網(wǎng)頁包裝成一個桌面端角塑；
Electron安裝及使用
官方網(wǎng)站：https://electronjs.org/
Github：https://github.com/electron/electron
好多常見應用蔫磨，都是使用Electron進行跨平臺研發(fā)的；
使用npm安裝Electron庫
感覺Electron官網(wǎng)適合有一定開發(fā)基礎的工程師看圃伶，這里提供一個quick start的源碼：
https://github.com/electron/electron-quick-start
這就初始化好了一個Electron的基本純凈項目堤如，可以在上邊修改蒲列，實現(xiàn)自己的項目；
克隆到本地以后搀罢，在工程目錄下運行命令：
$ npm install
$ npm start
剩下的就交給前端工程師們自由發(fā)揮了蝗岖。
Electron 應用結構
主要分為主進程和渲染進程
Electron 運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳本通過創(chuàng)建web頁面來展示用戶界面榔至。 一個 Electron 應用總是有且只有一個主進程抵赢。
由于 Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多進程架構也被使用到唧取。 每個 Electron 中的 web 頁面運行在它自己的渲染進程中铅鲤。
在普通的瀏覽器中，web頁面通常在一個沙盒環(huán)境中運行枫弟，不能去接觸原生的資源邢享。 然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁面中和操作系統(tǒng)進行一些底層交互。
主進程使用 BrowserWindow 實例創(chuàng)建頁面淡诗。 每個 BrowserWindow 實例都在自己的渲染進程里運行頁面骇塘。 當一個 BrowserWindow 實例被銷毀后，相應的渲染進程也會被終止袜漩。
主進程管理所有的web頁面和它們對應的渲染進程绪爸。 每個渲染進程都是獨立的，它只關心它所運行的 web 頁面宙攻。
在頁面中調(diào)用與 GUI 相關的原生 API 是不被允許的奠货，因為在 web 頁面里操作原生的 GUI 資源是非常危險的，而且容易造成資源泄露座掘。 如果你想在 web 頁面里使用 GUI 操作递惋，其對應的渲染進程必須與主進程進行通訊，請求主進程進行相關的 GUI 操作溢陪。
使用Electron的API
Electron在主進程和渲染進程中提供了大量API去幫助開發(fā)桌面應用程序萍虽， 在主進程和渲染進程中，你可以通過require的方式將其包含在模塊中以此形真，獲取Electron的API
const electron = require('electron')
所有Electron的API都被指派給一種進程類型杉编。 許多API只能在主進程中調(diào)用，有些API又只能在渲染進程中調(diào)用咆霜，又有一些主進程和渲染進程中都可以使用邓馒。 每一個API的文檔都將說明可以在哪種進程中使用該API。
Electron中的窗口是使用BrowserWindow類型創(chuàng)建的一個實例蛾坯， 它只能在主進程中使用光酣。
// 這樣寫在主進程會有用，但是在渲染進程中會提示'未定義'
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
因為進程之間的通信是被允許的, 所以渲染進程可以調(diào)用主進程來執(zhí)行任務脉课。 Electron通過remote模塊暴露一些通常只能在主進程中獲取到的API救军。 為了在渲染進程中創(chuàng)建一個BrowserWindow的實例财异，我們通常使用remote模塊為中間件：
//這樣寫在渲染進程中時行得通的，但是在主進程中是'未定義'
const { remote } = require('electron')
const { BrowserWindow } = remote
const win = new BrowserWindow()
使用Node.js的API
Electron同時在主進程和渲染進程中對Node.js 暴露了所有的接口唱遭。 這里有兩個重要的定義：
1)所有在Node.js可以使用的API戳寸，在Electron中同樣可以使用。 在Electron中調(diào)用如下代碼是有用的：
const fs = require('fs')
const root = fs.readdirSync('/')
// 這會打印出磁盤根級別的所有文件
// 同時包含'/'和'C:\'胆萧。
console.log(root)
注意庆揩，嘗試加載遠程內(nèi)容， 這會帶來重要的安全隱患跌穗。
2)你可以在你的應用程序中使用Node.js的模塊订晌。 選擇您最喜歡的npm模塊。npm提供了目前世界上最大的開源代碼庫蚌吸，那里包含良好的維護锈拨、經(jīng)過測試的代碼，提供給服務器應用程序的特色功能也提供給Electron羹唠。
例如奕枢，在你的應用程序中要使用官方的AWS SDK，你需要首先安裝它的依賴：
npm install --save aws-sdk
然后在你的Electron應用中佩微，通過require引入并使用該模塊缝彬，就像構建Node.js應用程序那樣：
// 準備好被使用的S3 client模塊
const S3 = require('aws-sdk/clients/s3')
注意：原生Node.js模塊 需要在編譯后才能和Electron一起使用。
應對AppStore的審核策略
使用跨平臺工具研發(fā)的App哺眯，不是很容易通過蘋果公司AppStore的審核谷浅，但是只要使用得當，上線是不成問題的奶卓，注意一下幾點：
- 1一疯、要給用戶帶來流暢的體驗，不要明顯感覺出來在加載網(wǎng)頁夺姑，要感覺在App中墩邀；
- 2、符合蘋果的UI要求盏浙，界面要簡潔美觀眉睹；
- 3、不要大面積废膘、多功能的使用混合開發(fā)竹海，比如不能除了入口，都是Web殖卑，這樣審核員會認為內(nèi)容不可控而不通過；
- 4坊萝、運氣孵稽！你懂的许起！
