onic是開源的移動應用開發框架，便于構建高質量的本地和網絡技術先進的web應用程序。Ionic是基于Angular，有許多顯著的性能提升，可用性和功能都在不斷的進行改進。只需要會一點前端知識就能玩轉Ionic。

Ionic的應用程序創建開發主要通過Ionic命令行實用工具(“CLI—命令行界面”)，并使用cordova構建和部署本地應用。建立Ionic項目，您需要安裝最新版本的CLI和cordova。在你這樣做之前，你需要一個node.js的最新版本。這些在我之前的文章有安裝教程。

• 官網地址：

  http://ionicframework.com/

• 版本更新說明：

  https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

學習ionic需要了解的知識：

• HTML5

• CSS3

• TypeScript（JavaScript）

• Angular2+

下面是一些組件的示例，不同系統有不同的樣式，下面展示iOS上的。

動作表單-Action Sheets

時間選擇器-DateTime

浮動的按鈕-Floating Action Buttons

分割按鈕-Segment

Inputs-輸入框

表格布局-Grid

小芯片-Chip

彈窗對話框1-Alert

彈窗對話框2-Popover

想要查看更多的ionic組件示例，可以在App Store和Google Play下載Ionic2Components應用，該APP即為官方所有組件的展示。

• 組件在線演示地址：

  http://ionicframework.com/docs/api/

組件只能作用在用戶與界面交互上，想要調用原生設備功能就需要cordova，他提供了一組設備相關的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風、GPS等。在應用商店下載Ionic Native即可體驗部分插件。

• 離子原生包裝插件：

  http://ionicframework.com/docs/native/

通過以上組件配合使用，即使只懂css3一點皮毛也能做出一個漂亮簡單的HTML5 APP，想要了解更多ionic，可以關注我或者在官網查看最新消息。

/ Luiu

最近跟的一款項目是HTML5手游，在這個項目中遇到并解決了諸多問題，也學習到了很多項目開發過程中需要注意的事情。這個項目自立項到現在已經過了5個多月，如今項目研發已經過了早期的忙亂階段，于是借此機會梳理下思緒，為了能夠更好的完成以后的工作。如果能給想進入HTML5這個領域的新團隊一些參考，那也是一件極好的事情。

這款項目是我們團隊接到的第一款HTML5類型的游戲合約，在此前團隊一致在致力于傳統回合制手游研發。因此團隊可以說在這個領域幾乎是從零開始（當然一開始的時候我們不這么覺得），所以在研發進行到中期的時候遇到了很多影響效率的問題。

其中影響最大的問題之一就是——界面適配

HTML5手游這個品類說白了就是把頁游裝進一個殼里，本質上他還是一個頁游，擁有很多頁游的特性。它是在頁游框架的基礎上，將UE對移動設備做了優化。因此該類游戲在后期將會根據渠道需求發行多個版本，包括直接在網頁運行（電腦網頁和手機網頁）、在手機端運行、在平板電腦設備上運行。這樣就會帶來一個嚴重的問題——兼容性問題。由于HTML5跨平臺的特性，很容易產生兼容問題。最明顯的一個就是界面適配問題，最基本的要做到UI在不同長寬比的屏幕下均能完全展示，在這個基礎上再考慮對主流長寬比的屏幕進行特殊處理，優化用戶體驗。

一、適配方案

界面適配的方案一：約束比例縮放（主流方案）

方案描述：該是保持界面中元素的相對位置不變，在不同長寬比的屏幕中進行整體縮放。

這種方案會將界面分為上中下3個區域，將中間的主要區域視作一個窗口根據屏幕比例進行縮放。在縮放的過程中保證窗口長寬比不變，保持長或者寬任意一個維度占滿屏幕就可，不強求整體鋪滿屏幕。

方案優勢：處理簡單，且最終效果還可以。可以保證UI在不同長寬比的屏幕下均能完全展示，并且UI布局不變。

最終效果如圖：

圖中黑色部分為空白區域，雖然對界面的美觀有一定影響，但是影響不大。如果把中間的區域設計為窗口的樣式，會使界面看起來更自然。

界面適配方案二：全屏鋪滿

方案描述：該方案同樣要將界面分為上中下3個區域，只是對中間那塊主要區域采用了不同的處理方式。這種方案會要求中間區域底板鋪滿屏幕，所有處于該底板上的元素坐標需要根據界面的長寬比進行計算，并且界面中的列表，底框等元素的大小也要根據屏幕的長寬比進行計算。

方案優勢：該方案可以解決方案一種空白區域的問題，在移動設備上顯示更加美觀。

該方案的最終效果如圖：

這個方案實現較方案一來說更加復雜，并且最終效果不好把控。容易造成不同比例屏幕下UI出現重疊，超出邊界等問題。如果處理不好，最終效果反而不如方案一。

從目前市面上的HTML5游戲來看，基本采用方案一就可滿足當前用戶需求。采用方案二會增加項目研發時長，并且增加人力成本。

二、元素布局方式

我們這個項目使用的是白鷺引擎，在該引擎的UI編輯器中有個約束坐標的功能。使用該功能，可以將元素的坐標相對屏幕四邊或者中心進行約束，確保縮放后界面布局隨之改變。建議界面中的元素更多的采用約束的形式，而不是絕對坐標。

白鷺引擎中的約束功能：

為什么建議使用約束的形式呢？這是因為約束的方案更有利于保證界面中元素的邊距，居中，四邊對齊等布局。這樣當用戶在兩個相似界面之間切換時，相同的元素位置也相同。不會出現切換時由于相同元素坐標的微小差異造成的晃動感。并且該方案更方便約定團隊成員在拼界面時的規范，只需要約定相同元素的邊距，元素互相之間的間距等。再者，如果采用界面適配方案一時使用約束功能的話，后期若要改為方案二，也會更加方便一些。

三、UI標準

規定UI標準對于保證UI的最終效果十分重要。在項目開始之初，就需要設計好界面中的通用控件的樣式和規格，包括通用按鈕、列表、標簽等。并且不同功能標簽的字體大小、色值、樣式（加粗、描邊）等也要有統一的標準。除了以上這些控件的規格和樣式，還需要規定游戲中各種彈窗的樣式和規格，否則必然會出現彈框大小參差不齊，影響UI美觀。

UI就是游戲的臉面，是給用戶留下第一印象最直觀的內容。因此UI中的各個細節必須保證統一美觀，這樣才能給用戶留下好印象。