一份代碼構建移動、桌面、Web全平臺應用

Web自己就是跨平臺的，這意味着這中間存在着無限的可能性。

我是一名Web Developer，對於我來能用Web開發的事情就用Web來完成就行了——不須要編譯，不須要等它編譯完。我想到哪我就能夠寫到哪，我改到哪我就能夠發生哪發生了變化。

最近我在寫Growth——一個幫助開發人員成長的應用，在近一個月的業餘時間裏，完成了這個應用的：

• 移動應用版：Android、Windows Phone、iOS（等帳號和上線）

• Web版

• 桌面版：Mac OS、Windows、GNU/Linux

截圖合併以下：

而更重要的是它們使用了同一份代碼——除了對特定設備進行一些處理就沒有其餘修改。相信全棧的你已經看出來了：

Web = Chrome + Angular.js + Ionic

Desktop = Electron + Angular.js + Ionic

Mobile = Cordova + Angular.js + Ionic

除了前面的WebView不同，後面都是Angular.js + Ionic。

從Web到混合應用，再到桌面應用

在最打開的時候它只是一個單純的混合應用，我想總結一下個人學習經驗，分享一下學習的心得，如：

• 完整的Web開發,運維,部署,維護介紹

• 如何寫好代碼——重構、測試、模式

• 遺留代碼、遺留系統的造成

• 不一樣階段所需的技能

• 書籍推薦

• 技術棧推薦

• Web應用解決方案

接着我用Ionic建立了這個應用，這是一個再普通不過的過程。在這個過程裏，我一直使用Chrome在調度個人代碼。由於我是Android用戶，我有Google Play的帳號，便發佈了Android版本。這時候遇到了一個問題，我並無Apple Developer帳號(如今在申請ing。。)，而主要的用戶對象程序員，這是一羣不土的土豪。

偶然間我纔想到，我只要上傳Web版本的代碼就能夠暫時性實現這個需求了。接着找了個AWS S3的插件，直接上傳到了AWS S3上託管成靜態文件服務。

幾天前在Github上收到一個issue——關於創造桌面版， 我便想着這也是可能的，我只須要寫一個啓動腳本和編譯腳本便可。

因此，最後咱們的流程圖就以下所示：

除了顯示到VR設備上，好像什麼也不缺了。而且在我以前的文章《Oculus + Node.js + Three.js 打造VR世界》，也展現了Web在VR世界的可能性。

在這實現期間有幾個點能夠分享一下：

1. 響應式設計

2. 平臺/設備特定代碼

響應式設計

響應式設計能夠主要依賴於Media Query，而響應式設計主要要追隨的一點是不一樣的設備不一樣的顯示，如：

這也意味着，咱們須要對不一樣的設備進行一些處理，如在大的屏幕下，咱們須要展現菜單：

而這能夠依賴於Ionic的expose-aside-when="large"，而並不是全部的情形都是這麼簡單的。如我最近遇到的問題就是圖片縮放的問題，以前的圖片針對的都是手機版——通過了必定的縮放。

這時在桌面應用上就會出現問題，就須要限定大小等等。

而這個問題相比於平臺特定問題則更容易解決。

平臺特定代碼

對於特定平臺纔有的問題就不是一件容易解決的事，分享一下：

存儲

我遇到的第一個問題是數據存儲的問題。最開始的時候，我只須要開始混合應用。所以我能夠用Preferences、或者SQLite來存儲數據。

後來，我擴展到了Web版，我只好用LocalStoarge。因而，我就開始抽象出一個$storageServices來作相應的事。接着遇到一系列的問題，我捨棄了原有的方案，直接使用LocalStoarge。

數據分析

爲了開發方便，我使用Google Analytics來分析用戶的行爲——畢竟數據對我來講也不是特別重要，只要能夠看到有人使用就能夠了。

這時候遇到的一個問題是，我不須要記錄Web用戶的行爲，可是我但願能夠看到有這樣的請求發出。因而對於Web用戶來講，只須要：

trackView: function (view) {
          console.log(view);
        }

而對於手機用戶則是:

trackView: function (view) {
        $window.analytics.startTrackerWithId('UA-71907748-1');
        $window.analytics.trackView(view)
      }

這樣在我調試的時候我只須要打個Log，在產品環境時就會Track。

更新

一樣的，對於Android用戶來講，他們能夠選擇自行下載更新，因此我須要針對Android用戶有一個自動更新：

var isAndroid = ionic.Platform.isAndroid();
if(isAndroid) {
  $updateServices.check('main');
}

桌面應用

對於桌面應用來講也會有相似的問題，我遇到的第一個問題是Electron默認開啓了AMD。因而，直接刪之：

<script>
//remove module for electron
if(typeof module !== 'undefined' && module && module.exports){
  delete module;
}
</script>

相似的問題還有許多，不過因爲應用內容的限制，這些問題就沒有那麼嚴重了。

若是有一天，我有錢開放這個應用的應用號，那麼我就會再次獻上這個圖：

將來

我就開始思索這個問題，將來的趨勢是合併到一塊兒，而這一個趨勢在如今就已是完成時了。

那麼將來呢？你以爲會是怎樣的？

項目源碼: https://github.com/phodal/growth

更多內容請關注個人微信公衆號：phodal