媒介：
在本文中，我們將偏重引見如何將WijmoJS與Ionic一同運用，來建立一款挪動端支撐優先、快速高效的運用程序。在之前的文章中，我們已引見了運用WijmoJS與Angular、React、Vue三大框架連繫搭建您的Web運用程序。這篇將是本系列的末了一篇文章。
什麼是Ionic？
Ionic是一個專註於用Web開闢手藝，基於HTML5建立相似於手機平台原生運用的一個開闢框架，它綁定了AngularJS和Sass。這個框架的目標是從web的角度開闢手機運用，基於PhoneGap的編譯平台，可以完成編譯成各個平台的運用程序。
運用Ionic不只可以優化html、css和js的機能，構建高效的運用程序，而且還可以用於構建Sass和AngularJS的優化。關於用以開闢夾雜手機運用的項目來講，ionic是一個值得信任的框架。
WijmoJS VS Ionic
Ionic專註於運用程序的表面和用戶界面交互。它基於Angular，並運用Cordova供應對特定裝備當地功用的接見，包括傳感器，數據，收集狀況等。
作為一樣盛行的前端框架之一，WijmoJS也一樣注重更天真、更智能的用戶操縱體驗。秉持“快如閃電，觸控優先”的設想理念，WijmoJS在供應優質服務和產物的同時，不停優化產物架構，與時俱進。依附其先進的觸控設想、周全的 AngularJS 支撐、天真的 API 接口、輕鬆的操縱體驗，WijmoJS可周全滿足企業開闢所需。
那末，我們如何將兩者連繫，搭建出一款可圓滿融會全新一代挪動框架的Web運用程序呢？本文會給你答案。
在一切框架中建立和保護運用程序的基礎步驟都是相似的：
裝置恰當的CLI（命令行界面實用程序）以天生，運轉，保護和布置運用程序。
運用CLI建立運用程序。
運用NPM將WijmoJS增加到運用程序。
導入您要運用的組件並增加恰當的標記。
具體步驟以下：
第1步，建立一個新的Ionic運用程序
根據以下步驟建立一個新的Ionic運用程序，啟動並運轉：
第2步，增加WijmoJS模塊
翻開“src / app / app.module.ts”文件，為網格和圖表增加WijmoJS模塊：
// src/app/app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
// import Wijmo modules
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
// apply Wijmo license key
import { setLicenseKey } from 'wijmo/wijmo';
setLicenseKey('your license goes here');
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
WjGridModule,
WjChartModule
],
…
})
export class AppModule {}
本段代碼除了導入我們想要的WijmoJS模塊外，還會自動婚配WijmoJS許可證密鑰，並從運用程序中刪除水印。
第3步，向控件增加數據
起首翻開“src / pages / home / home.ts”文件，並給“HomePage”組件一些控件數據：
// src/pages/home/home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// import Wijmo components
import { CollectionView } from 'wijmo/wijmo';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
data = this.getData();
getData() {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
downloads: Math.round(Math.random() * 20000),
});
}
return new CollectionView(data);
}
}
注重getData返回一個CollectionView而不是一個通例數組。 CollectionView類支撐排序，挑選，分組，錢銀和關照。 在這個例子中，我們將它用作網格和圖表的數據源。
第4步，將Ionic控件增加到運用程序中
要將表格和圖表增加到運用程序，請編輯“src / pages / home / home.html”文件，以下所示：
<!-- src/pages/page/home.hmtl -->
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Wijmo in Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory …
</p>
<h4>Here are some Wijmo controls to help you get started:</h4>
<div class="App-panel">
<wj-flex-grid [itemsSource]="data">
</wj-flex-grid>
<wj-flex-chart [itemsSource]="data" [bindingX]="'country'">
<wj-flex-chart-series [binding]="'sales'" [name]="'Sales'">
</wj-flex-chart-series>
<wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'">
</wj-flex-chart-series>
<wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'">
</wj-flex-chart-series>
</wj-flex-chart>
</div>
</ion-content>
請注重，代碼中運用的wj-flex-grid，wj-flex-chart和wj-flex-chart-series指令，是從表格和圖表模塊導入的。
第5步，更新款式表
起首，我們須要增加包括一切WijmoJS控件的CSS款式文件 – “wijmo.css”。 有幾種要領可以將自定義css文件增加到Ionic構建過程當中。 在這個例子中，我們將運用最簡樸的一個：
將“node_modules wijmo styles wijmo.css”文件複製到運用程序的“src / assets / css”文件夾中即可。
翻開運用程序的“src / index.html”文件並增加以下行：
<!-- src/index.hmtl -->
<link href="build/main.css" rel="stylesheet">
<link href="assets/css/wijmo.css" rel="stylesheet">
除了WijmoJS的規範CSS，我們還可以增加其他款式來使我們的運用程序更雅觀。 翻開“app / app.scss”文件並增加以下代碼：
// app/app.scss
// http://ionicframework.com/docs/theming/
// App Global Sass
// --------------------------------------------------
// …
//
.App-panel {
margin: 0 48pt;
text-align: center;
.wj-control {
display: inline-block;
width: 400px;
height: 300px;
vertical-align: top;
}
}
.wj-flexgrid .wj-cell {
padding: 8px;
text-align: left;
}
第6步,在瀏覽器中運轉
按ctrl + S保留一切文件中的變動並切換回瀏覽器以檢察效果：
因為表格和圖表綁定到同一個CollectionView，因而對錶格中的數據所做的任何變動都邑自動反映在圖表中。 比方，您可以單擊列題目對數據舉行排序或運用鍵盤編輯一些值。
總結
- 將WijmoJS集成到當代JavaScript運用程序中只須要運用NPM舉行裝置並從庫中導入所需的組件即可。
- 運用WijmoJS可以確保在差別的框架中運用完全相同的UI組件，讓您輕鬆地運用兩個或多個框架，或許在將來隨便切換框架。
擴大瀏覽
《用 WijmoJS 玩轉您的 Web 運用 — Angular6》
《用 WijmoJS 玩轉您的 Web 運用 — React》
《用 WijmoJS 玩轉您的 Web 運用 — Vue》
