摘要：在之前的文章中，我們已經(jīng)介紹了使用與三大框架結(jié)合搭建您的應(yīng)用程序。使用創(chuàng)建應(yīng)用程序。擴(kuò)展閱讀用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用近期活動(dòng)問卷調(diào)查揚(yáng)帆萬里，因您前行使用反饋意見征集

在本文中，我們將著重介紹如何將WijmoJS與Ionic一起使用，來創(chuàng)建一款移動(dòng)端支持優(yōu)先、快捷高效的應(yīng)用程序。在之前的文章中，我們已經(jīng)介紹了使用WijmoJS與Angular、React、Vue三大框架結(jié)合搭建您的Web應(yīng)用程序。這篇將是本系列的最后一篇文章。

Ionic是一個(gè)專注于用Web開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于手機(jī)平臺(tái)原生應(yīng)用的一個(gè)開發(fā)框架，它綁定了AngularJS和Sass。這個(gè)框架的目的是從web的角度開發(fā)手機(jī)應(yīng)用，基于PhoneGap的編譯平臺(tái)，可以實(shí)現(xiàn)編譯成各個(gè)平臺(tái)的應(yīng)用程序。
使用Ionic不但可以優(yōu)化html、css和js的性能，構(gòu)建高效的應(yīng)用程序，而且還可以用于構(gòu)建Sass和AngularJS的優(yōu)化。對(duì)于用以開發(fā)混合手機(jī)應(yīng)用的項(xiàng)目來說，ionic是一個(gè)值得信賴的框架。

Ionic專注于應(yīng)用程序的外觀和用戶界面交互。它基于Angular，并使用Cordova提供對(duì)特定設(shè)備本地功能的訪問，包括傳感器，數(shù)據(jù)，網(wǎng)絡(luò)狀態(tài)等。
作為同樣流行的前端框架之一，WijmoJS也同樣注重更靈活、更智能的用戶操作體驗(yàn)。秉承“快如閃電，觸控優(yōu)先”的設(shè)計(jì)理念，WijmoJS在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時(shí)，不斷優(yōu)化產(chǎn)品架構(gòu)，與時(shí)俱進(jìn)。憑借其先進(jìn)的觸控設(shè)計(jì)、全面的 AngularJS 支持、靈活的 API 接口、輕松的操作體驗(yàn)，WijmoJS可全面滿足企業(yè)開發(fā)所需。
那么，我們?nèi)绾螌⒍呓Y(jié)合，搭建出一款可完美融合全新一代移動(dòng)框架的Web應(yīng)用程序呢？本文會(huì)給你答案。

在所有框架中創(chuàng)建和維護(hù)應(yīng)用程序的基本步驟都是類似的：

? 安裝適當(dāng)?shù)腃LI（命令行界面實(shí)用程序）以生成，運(yùn)行，維護(hù)和部署應(yīng)用程序。

? 使用CLI創(chuàng)建應(yīng)用程序。

? 使用NPM將WijmoJS添加到應(yīng)用程序。

? 導(dǎo)入您要使用的組件并添加適當(dāng)?shù)臉?biāo)記。

第1步，創(chuàng)建一個(gè)新的Ionic應(yīng)用程序
按照以下步驟創(chuàng)建一個(gè)新的Ionic應(yīng)用程序，啟動(dòng)并運(yùn)行：

第2步，添加WijmoJS模塊
打開“src / app / app.module.ts”文件，為網(wǎng)格和圖表添加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 {}

本段代碼除了導(dǎo)入我們想要的WijmoJS模塊外，還會(huì)自動(dòng)匹配WijmoJS許可證密鑰，并從應(yīng)用程序中刪除水印。

第3步，向控件添加數(shù)據(jù)
首先打開“src / pages / home / home.ts”文件，并給“HomePage”組件一些控件數(shù)據(jù)：

    // 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返回一個(gè)CollectionView而不是一個(gè)常規(guī)數(shù)組。 CollectionView類支持排序，篩選，分組，貨幣和通知。 在這個(gè)例子中，我們將它用作網(wǎng)格和圖表的數(shù)據(jù)源。

第4步，將Ionic控件添加到應(yīng)用程序中
要將表格和圖表添加到應(yīng)用程序，請(qǐng)編輯“src / pages / home / home.html”文件，如下所示：

    
    
    
      
        Home
      
    
    
    
      
Welcome to Wijmo in Ionic!
      

        This starter project comes with simple tabs-based layout for apps
        that are going to primarily use a Tabbed UI.
      
      

        Take a look at the src/pages/ directory …
      
      
Here are some Wijmo controls to help you get started:
      

        
        
        
          
          
          
          
          
          
        
      
    

請(qǐng)注意，代碼中使用的wj-flex-grid，wj-flex-chart和wj-flex-chart-series指令，是從表格和圖表模塊導(dǎo)入的。

第5步，更新樣式表
首先，我們需要添加包含所有WijmoJS控件的CSS樣式文件 - “wijmo.css”。 有幾種方法可以將自定義css文件添加到Ionic構(gòu)建過程中。 在這個(gè)例子中，我們將使用最簡(jiǎn)單的一個(gè)：

將“node_modules wijmo styles wijmo.css”文件復(fù)制到應(yīng)用程序的“src / assets / css”文件夾中即可。

打開應(yīng)用程序的“src / index.html”文件并添加以下行：

除了WijmoJS的標(biāo)準(zhǔn)CSS，我們還可以添加其他樣式來使我們的應(yīng)用程序更美觀。 打開“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步,在瀏覽器中運(yùn)行
按ctrl + S保存所有文件中的更改并切換回瀏覽器以查看結(jié)果：

由于表格和圖表綁定到同一個(gè)CollectionView，因此對(duì)表格中的數(shù)據(jù)所做的任何更改都會(huì)自動(dòng)反映在圖表中。 例如，您可以單擊列標(biāo)題對(duì)數(shù)據(jù)進(jìn)行排序或使用鍵盤編輯一些值。

將WijmoJS集成到現(xiàn)代JavaScript應(yīng)用程序中只需要使用NPM進(jìn)行安裝并從庫中導(dǎo)入所需的組件即可。

使用WijmoJS能夠確保在不同的框架中使用完全相同的UI組件，讓您輕松地使用兩個(gè)或多個(gè)框架，或者在未來隨意切換框架。

《用 WijmoJS 玩轉(zhuǎn)您的 Web 應(yīng)用 — Angular6》
《用 WijmoJS 玩轉(zhuǎn)您的 Web 應(yīng)用 — React》
《用 WijmoJS 玩轉(zhuǎn)您的 Web 應(yīng)用 — Vue》

【問卷調(diào)查】揚(yáng)帆萬里，因您前行 --- ComponentOne 使用反饋意見征集