Mobile first! Wijmo 5 + Ionic Framework之：Hello World！

時間 2019-11-29

標籤 mobile wijmo ionic framework hello world 欄目無線简体版

原文原文鏈接

本教程中，咱們用Wijmo 5 和 Ionic Framework實現一個Mobile的project:Hello World。css

Ionic是什麼？

Ionic是一個HTML5框架、免費、開源，用於幫助生成hybird mobile Apps (混合移動應用)。html

Ionic包括3部分：node

CSS 樣式：用於渲染Web頁面。使得頁面更接近原生移動應用 (Native App)。
AngularJS：Ionic使用AngularJs的擴展指令做爲核心框架庫。同一時候AngularJs也加快了開發過程。
Apache Cordova：Ionic使用Apache Cordova編譯爲mobile App，並提供了ngCordova庫--使用AngularJs擴展的Cordova API庫。

Ionic框架眼下依舊是beta階段(截止本文完稿時間，最新版：v1.0.0-beta.12 "krypton-koala" · 2014-09-10 · MIT Licensed )，當前版本號支持iOS6+ 和 Android 4.1+版本號，且有計劃會支持Windows設備。對其它較老的設備無版本號支持計劃。jquery

系統必備

本教程會使用到如下的環境，請預先準備。git

在本教程中。咱們使用Chrome用於開發、調試。同一時候，你也可以在Android和IOS設備上用其它瀏覽器來調試。angularjs

配置系統環境，請參考Cordova Platform Guide，依照嚮導就能夠完畢。github

高速入門

基於上面的系統環境安裝的NodeJs。咱們先安裝Ionic CLI。apache

如下分別區分Windows、Linux、Mac的命令行代碼來安裝：npm

Windows瀏覽器

npm install --g ionic

Linux和Mac

sudo npm install --g ionic

如下經過命令建立project

ionic start ExpenseTracker blank && cd ExpenseTracker

上面的命令使用了Ionic的空模板」blank」, 建立了一個名爲「ExpenseTracker」Ionicproject; 建立成功後，咱們進入新建的ExpenseTracker文件夾。而後咱們經過Ionic命令啓動Web網站

ionic serve

該命令會啓動Web服務，同一時候會使用默認瀏覽器啓動頁面。

在Web服務啓動狀況下，所作的不論什麼改動，刷新瀏覽器頁面就能夠而不用從新啓動Web服務，這個對於調試很方便。

咱們會看到例如如下的頁面：

要中止服務。可在命令行下經過結束服務。

如下開始加入Wijmo 5的源代碼到咱們建立的project中。Wijmo5源代碼下載地址。先在project的www/lib 文件夾下，建立一個Wijmo文件夾。並拷貝Wijmo源代碼下Dist的3個文件夾controls、interop、styles到新建立的Wijmo文件夾下。project文件夾中的www/lib文件夾。包括了該app所要依賴的庫文件。

Wijmo 5下載後的源代碼路徑概圖：

Iconic的文件夾瀏覽截圖：

配置好文件文件夾結構後，咱們就可以使用Inonic和Wijmo 5了。

在www文件夾下，建立一個index.html。用您習慣使用的IDE(Visual Studio、Web Storm)進行編輯，加入jQuery、Wijmo引用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Expense Tracker | Wijmo 5</title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <!-- Wijmo CSS -->
    <link href="lib/wijmo/styles/wijmo.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">

    <!-- jQuery - load this script before Angular -->
    <script src="lib/jQuery/dist/jquery.min.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Wijmo Scripts -->
    <script src="lib/wijmo/controls/wijmo.min.js"></script>
    <script src="lib/wijmo/controls/wijmo.input.min.js"></script>
    <script src="lib/wijmo/controls/wijmo.grid.min.js"></script>
    <script src="lib/wijmo/controls/wijmo.chart.min.js"></script>
    <script src="lib/wijmo/interop/angular/wijmo.angular.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content class="padding">
      </ion-content>
    </ion-pane>
  </body>
</html>

咱們注意到，在index.html 文件裏。並未直接引用AngularJs文件，這個是因爲Ionic（ionic.bundle.js文件）已經包括了AngularJs和其依賴，如UI-Router。故不需要直接引用了。

使用Wijmo 5

如下給Index.HTML文件里加入Wijmo 5控件，先需要在www/js/app.js文件里加入Wijmo的模塊依賴——‘wj’。

app.js完整代碼例如如下：

angular.module('starter', ['ionic', 'wj'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.js中。已經完畢對ionic和wijmo模塊引入，如下則可直接使用Wijmo 5本身定義的AngularJs指令了。

在index.html文件的<body> 元素中，共引入了3個Icon的AngularJS 指令：<ion-pane>, <ion-header-bar>, 和<ion-content>。

<ion-pane>: 該指令是一個容器用於填充內容。
<ion-header-bar>: 該指令用於給頁面加入一個header。
<ion-content>: 該指令建立內容區域，並會用Ionic的本身定義滾動視圖取代瀏覽器默認的。

在<ion-content>內，咱們加入<wj-input-number （Wijmo InputNumber控件）。完整代碼例如如下：

<ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content class="padding" ng-init="myValue=1">
      <wj-input-number value="myValue" step="1" min="-5" max="5"></wj-input-number>
      </ion-content>
    </ion-pane>

執行project，可以看到Wijmo的InputNumber控件已經加入到頁面中，默以爲1，最大值爲5，最小值爲-5，增加步長爲1.