如何快速開發多端應用?

01-09

現在一個應用需要有IOS，Android，webapp(通過phonegap等打包工具可變成app),這個是最基本的，有可能還需要微信端等等。現在國內有一些工具，比如：wex5,appcan,apicloud,HBuilder等等這些工具說是可以開發多端應用，在這麼多工具之中我們應該如何選擇呢？如果不使用這些工具用h5開發多端應用是否有更好的選擇呢？比如：react native，可能後續vue也會出一個類似react native的解決方案。請了解的童鞋分析一下各種方案利弊或者你們有更好的選擇求分享。

上周寫了一篇文章：

著作權歸作者所有。

商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

作者：phodal

鏈接：http://zhuanlan.zhihu.com/phodal/20548041

來源：知乎

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世界的可能性。

在這實現期間有幾個點可以分享一下：

響應式設計
平台/設備特定代碼

響應式設計

響應式設計可以主要依賴於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。於是，直接刪之：

& //remove module for electron if(typeof module !== "undefined" amp;amp; module amp;amp; module.exports){ delete module; } &

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

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

未來

我就開始思索這個問題，未來的趨勢是合併到一起，而這一個趨勢在現在就已經是完成時了。

那麼未來呢？你覺得會是怎樣的？

源碼：phodal/growth · GitHub

更多內容請關注我的微信公眾號：phodal

http://weixin.qq.com/r/mnVYQHrEVicprT4j9yCI (二維碼自動識別)

wex5,appcan,apicloud,HBuilder等等這些工具確實是都在推廣一次開發多端運行,不過宣傳是宣傳，具體操作也都有自己非常明顯的優缺點，在這裡簡單的說一下（謹代表個人觀點，不喜勿噴）

wex5的界面比較賞心悅目一些，開發過程比較爽，數據和視圖是分離的，當然這個東西是錦上添花並非關鍵，混合開發最受質疑的是性能問題，運行卡頓，在這幾款工具中，能夠把這個問題處理的最好的應該是wex5,唯一一個用單頁載入的開發工具，頁面載入極速，這個想必也是他鐵杆粉絲大愛的原因之一吧，雖然開發中會遇到一些問題，不過還好都不是重點。

appcan是這個行業中最古老的了，宣傳也一直以領導者倡導者自居，在互聯網世界中歷史悠久難道是好事么，這個總覺著有點奇怪，不過話說產品是王道，各方面來說總的還可以，不過比較致命的是打包好的app會加入他們的一些代碼，這些代碼會做一些伺服器請求，然後呢，由於他們的伺服器非常不穩定，經常導致無法請求成功，其結果就是app沒法打開或者直接崩潰，這點讓人很無語，就我個人的觀察來看，基本上可以保證每個月都出問題，官方的響應也非常慢經常一兩天搞不定（要是周六周末就更慘，肯定找不到人-_-）。基本上你喊破喉嚨也沒人理你。總之，就我個人的使用經驗來看，appcan對免費版的支持相當差（你可以認為是沒支持-，-），至於企業版，我沒買，所以不知道是個什麼程度。所以如果你做的東西不是什麼要緊的東西，那麼用它就無所謂，如果是打算開發靠譜的東西，建議你繞道

apicloud是以前appcan里的一位核心技術人員，後來走了，就自己創辦的apicloud，這個是背景，也不能說因為此就斷定apicloud肯定是沒有appcan有實力的，我只發表我個人使用過的觀點，所謂的組件化（UzModule）開發，對Android的生命周期支持非常不到位，常見的onPause,onResume都無法實現；onCreate也沒有使用，在社區里逛了之後，感覺很多東西都是二手的，抄襲無疑是apicloud讓開發者最反感的一點，2015年5月， APICloud因抄襲、反編譯DCloud產品代碼而被DCloud起訴侵權。

HBuilder主打雲+端為優勢，倡導像國外軟體一樣能夠聯網開發，但是開發者不接受這一套，我就開發個軟體還需要註冊登錄，感覺像是被偷窺了代碼一樣的感覺，讓人費解，HBuilder團隊終於在2015年夏季推出了可離線編輯，但是依然每天會有建議強制聯網提示，其他的倒是還可以接受的。

總的來說，各有各的優勢，樓主要是想深入了解的話可以下載下來大體看一下，如果比較著急開發東西的話，建議用wex5吧，我現在常用的也是wex5，雖然也有小缺憾，不過相比較而言，是用起來比較爽的國內開發工具了。

目前能多端開發且體驗優良的，應該只有mui了。

mui在微信下使用普通瀏覽器api，在app下使用增強api，可以做到app模式下窗體切換、下拉刷新、ajax跨域這些效果都達到原生體驗，並且是一套代碼兼容。

單頁是不靠譜的，div的渲染效果比不上原生view的渲染。

以窗體切換為例，使用mui.openWindow，在app模式下是自動走原生的view動畫切換，而web下則走網頁切換，但代碼還是一套代碼，框架自動兼容處理了。

另外回下 @陽光下的我們 HBuilder不強調聯網開發，開發者寫的代碼根本沒有辦法存在DCloud的伺服器。但是HBuilder的開發者有社區的概念，有賬戶、提問回答、積分威望，所以DCloud鼓勵開發者註冊賬戶。話說現在vs、dreamweaver這些軟體也都有賬戶概念。

沒有人提Xamarin嗎。。。

GitHub - benoitvallon/react-native-nw-react-calculator: Mobile, desktop and website Apps with the same code

雖然build流程有點複雜，但是對於react的生態圈來說，成熟的跨平台pipeline應該會慢慢出現。至少我打算試驗一下。

我推薦使用Qt

http://www.qt.io/developers/

提供一個思路：

後端：不論用哪一種技術，Rails也好，Node.js也好，後端只作為一個數據存取、許可權管理和API的提供者，不進行任何的頁面渲染工作，一切數據以JSON的方式接收與發送。

前端：以PC、手機、平板電腦和Web為例。

以React和一種Flux框架為班底，盡量將頁面元素做成React組件。這樣一來，首先解決了Web端。

然後對於React組件稍加改造，結合React Native，解決iOS和Android系統。具體參見該項目：GitHub - benoitvallon/react-native-nw-react-calculator: Mobile, desktop and website Apps with the same code

最後，用Electron對於項目進行打包，運行在PC端。

以上方法的好處是在保證產品在各端上的基本體驗的前提下，開發和管理成本可以做到相對較低，且主要運用一種技術。不好的主要在於手機和平板電腦上，React Native還有相當多的問題——比如對於手勢的支持——有待解決。

越是多端的應用，最核心的越是數據結構和API的交互設計。

核心的業務邏輯清晰了，搭建好API之後，不管有多少端，加一個端只是多加一套界面而已。。。

Ionic: Advanced HTML5 Hybrid Mobile App Framework

CSS Components

ngCordova - Simple extensions for common Cordova Plugins

有沒有什麼開源的交友IOS， Android 類 APP ，並且可以提供個性定製服務。

說到快，那麼你試試meteor吧