混合移動應用開發初級例項

本文由碼農網 – Sandbox Wang原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

在B2C應用開發領域裡，我們應該多多關注技術變革。終端使用者都期望得到最簡潔好用的使用者體驗，因此作為開發者的你應該把關注點多放在使用者體驗上面，比如效能、易用性、一致性等等。今天給大家介紹一下混合移動應用（Hybrid Mobile App）開發的特點及使用入門。

什麼是混合移動應用？

混合移動應用通常和你從著名的App Store上面下載的App用起來差不多，然而他們和原生應用的開發方式卻是不一樣的。

混合移動應用更像是個嵌入在App中網站，它使用的技術是常見的諸如HTML, CSS,和JavaScript。所以說，那些精通Web開發的JavaScript研發人員也能很容易地進行這類移動應用開發。和傳統網站開發最關鍵的不同點在於，混合移動應用是嵌入在一個原生的APP裡，載體通常是移動平臺的WebView元件。這使得混合移動應用中的網頁也能夠方便使用裝置中的各種感測器，比如重力感測器、攝像頭等等，也可以方便呼叫其他一些系統API。反過來講，如果你通過手機的瀏覽器來訪問網頁的話，被訪問的網頁通常是沒辦法呼叫這些裝置感測器的，也無法訪問系統呼叫。

現在，此種方式開發的應用的操作性更強了。現在微軟移動平臺上有了新的瀏覽器引擎：Microsoft Edge’s EdgeHTML,所以在微軟平臺上也可以獲得與Android和Apple幾乎不差的應用體驗。如果你以前不考慮混合應用方案的話，現在估計得好好再重新評估一下了。

混合移動App因何而來？

上圖清楚地表明，現在移動終端使用者已經超過了桌面使用者，因此商務公司的運營者也對迎合移動使用者更加重視了。大多數的商務公司在因特網上都已經有了自己的網站，那麼，最簡單的選擇就是採用混合移動應用的方式，來將網站移植到各個移動手機平臺。這種方案可以使公司原有的Web開發人員直接投入到移動App的研發之中，而不必專門去再聘請iOS,Android,Windows Mobile等平臺的原生應用開發人員。所以，這種方案具有很高的價效比，下面讓我們更詳細瞭解一下。

在移動APP中使用HTML5, CSS3和ES6

最近，HTML標準離我們越來越近了，我們越來越難看到那種專門為相容IE6而寫的META標記了。這意味著，現在web變得越來越“乾淨”了，同樣的程式碼在不同的瀏覽器中執行幾乎不必修改程式碼。實事上，這也是人們開發HTML5,CSS3和ES6這些規範的目的所在。你可以從這裡提供的服務來檢查自己網站上的網頁在不同瀏覽器中的相容性如何，這麼做對開發混合式移動APP當然也有很大的幫助。

1、 通過檢查，我們可以更好地利用規範之中提供的特性來保證移動應用中網頁的相容性。這樣可以幫助我們習慣寫更簡潔的程式碼。在JSFiddle上有個很好的例子，可以實現出在iOS, Android和Windows Phone平臺上面跟原生應用看起來一模一樣的導航條。

2， 通過使用新的HTML5和CSS元素，我們做出的網頁可以兼顧所有尺寸和解析度的螢幕，讓混合移動APP更好地執行。為了讓你的圖片在任何人看來都比較合適，你通常在網頁上包含一個預設尺寸的圖片，然後再傳送一個真正適合的圖片。在響應式網頁開發中，如何為不同解析度的螢幕顯示合適尺寸的圖片是一個很難纏的問題。現在有一些不同的解決方法，然後每一種都有它自己的優點以及和頻寬、程式碼可維護性及瀏覽器支援方面相關的一些缺陷。讓我們快速預覽一下那些最流行的方式：

1) 在伺服器端對圖片的尺寸進行修改以適應使用者螢幕；

2) 在客戶端用JavaScript對尺寸進行檢測，然後替換；

3) 使用HTML5的picture元素；

4) 使用HTML的srcset屬性；

5) 使用CSS的image-set；

6) 使用CSS的Media Query；

7) 使用與畫素無關格式的圖片，如SVG。

3， 對於不同尺寸的裝置來說，用CSS3的Media Query來載入合適的logo圖示是非常合適的，如下：

/* Normal-resolution CSS */
.logo {
   width: 120px;
   background: url(logo.png) no-repeat 0 0;
}

/* HD and Retina CSS */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
	.logo {
      background: url(logo@2x.png) no-repeat 0 0;
      background-size: 120px; /* Equal to normal logo width */
   }
}

4， 同樣地，我們也可以通過Media Query來設定一些針對特定平臺所使用的字型：

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;
/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

5， 單網頁應用（SPA），指的是在單個頁面上完成的應用，使用者進行這種動作的時候頁面不進行跳轉和重新整理，從而得到不亞於桌面應用程式的使用者體驗。現在一些相關的框架有：

1) AngularJS

2) EmberJS

3) BackboneJS等等

開始混合移動應用開發

在今天，大多數的混合移動應用程式的開發都是在Apache Cordova平臺上實現的。這個平臺提供了一系列設計一致的JavaScript API可以幫助我們通過外掛來訪問裝置的底層功能，而這些外掛是通過原生程式碼來實現的。John Bristowe在他的部落格上有一篇文章很好地解釋了這種機制是如何執行的。在開始的時候，Apache Cordova被稱作PhoneGap，那時PhoneGap是Adobe的一個發行版，提供了一些額外的工具，對於兩者的歷史，請參閱這裡。

通過Cordova提供的這些外掛，我們可以很方便地使用API來訪問裝置的加速感測器、通訊錄等等。同時，開源社群裡也有很多外掛可供使用，我們可以在這裡瀏覽。

那些諸如HTML, CSS, JavaScript這樣的程式資原始檔可以通過Cordova提供的工具來打包成為平臺所使用的安裝包。一旦打包完成，這些安裝包就可以像其他任何原生應用程式一樣被安裝使用了。Cordova提供的打包工具基本都是採用命令列的方式呼叫，所以開發者可以利用Visual Studio這樣的IDE來簡化操作。

開始使用Visual Studio 2015來構建混合移動APP

當安裝Visual Studio 2015的時候，請確保勾選了“Tools for Apache Cordova”這個安裝選項。

在Visual Studio裡選擇“新建工程”，再選擇JavaScript類別下面的“空白APP(Apache Cordova)”模板。

你可以任意選擇AngularJS等自己所喜歡的JavaScript框架，並且在Visual Studio裡都有相應的程式碼提示功能，因此使用Visual Studio可以極大提高開發效率。不僅如此，除錯功能也非常的棒。Visual Studio還自帶一個Android模擬器，啟動速度比Android SDK裡自帶的快得太多了。

採用網路託管的方案

我們可以選擇將網頁檔案託管到網路中的伺服器上，這是一種更加節省開銷的方案，因為可以使用一個已經存在的響應式網站。開源工具manifold.JS使得這個過程變得更加方便，你僅僅需要寫一個manifest檔案清單，上傳logo圖片，然後就可以將應用釋出到各平臺的應用商店了。有一些諸如Universal Windows Platform的平臺允許你使用訊息提醒、付費等原生的API，這看起來很酷吧？！你可以通過下面這個連結來快速嘗試建立一個網路託管的應用程式，數分鐘之內就可以執行在Windows 10的手機上了。

優點：

1) 對於那些已經有了響應式網站的開發者來說，直接使用UWP API這樣的服務就可以方便建立出移動APP來，而不用從頭開發；

2) 應用程式的更新很方便，直接替換伺服器上的檔案即可，不用麻煩地等待應用商店的稽核；

3) 通過應用商店來呼叫付費API；

4) 通過一些框架也完全可以呼叫作業系統級的服務，完全沒有障礙。

缺點：

1) 它要求應用的客戶擁有穩定的因特網連線，因為應用的內容來自網站，所以一旦連線不可用，客戶便無法繼續使用應用。

什麼時候該只使用原生程式碼開發？

在以前，Facebook是使用混合方式來開發APP的，這樣可以很方便實現多平臺的一致體驗。但是後來Facebook卻將之替換成了原生程式碼開發的應用，而他們官方宣稱這樣做是為了獲得更流暢的速度。我在這裡可絕不是在暗示混合移動APP的開發已經不流行了，絕對不是！當你做選擇的時候，要更多地去考慮你客戶的需求、期望的體驗、要使用的裝置API等等，再做出決定。畢竟，你當然期望你的使用者在使用應用的時候能儘可能地獲得完善的功能和良好的體驗，兩者都需同時兼顧。

總結

從我的經驗看來，很多B2B型別的APP都使用混合APP的模式來滿足自己的業務需求，相對於使用者體驗來說，更加註重業務過程，並且他們也有能力來培訓自己的使用者來使用APP。

而在B2C領域，重點就有點不一樣了，終端使用者更期望簡單而優良的使用者體驗。因此，你應該更加註重介面、效能、響應性、易操作性等。如果你的應用能夠很方便地呼叫原生平臺特有的一些功能的話，那對使用者來說當然是極好的。（結束）