Mobile first! Wijmo 5 + Ionic Framework之：Hello Wor

時間 2019-11-07

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

原文原文鏈接

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

Ionic是什麼？

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

Ionic包含3部分：git

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

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

系統必備

本教程會使用到下面的環境，請預先準備。瀏覽器

在本教程中，咱們使用Chrome用於開發、調試，同時，你也能夠在Android和IOS設備上用其餘瀏覽器來調試。

配置系統環境，請參考Cordova Platform Guide，按照嚮導便可完成。

快速入門

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

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

Windows

npm install --g ionic

Linux和Mac

sudo npm install --g ionic

下面經過命令建立工程

ionic start ExpenseTracker blank && cd ExpenseTracker

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

ionic serve

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

在Web服務啓動狀況下，所作的任何修改，刷新瀏覽器頁面便可而不用重啓Web服務，這個對於調試很是方便。

咱們會看到以下的頁面：

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

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

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

Iconic的目錄瀏覽截圖：

配置好文件目錄結構後，咱們就可以使用Inonic和Wijmo 5了。在www目錄下，建立一個index.html，用您習慣使用的IDE(Visual Studio、Web Storm)進行編輯，添加jQuery、Wijmo引用：

  
    
    
    Expense Tracker | Wijmo 5
    

    
    

    

    
    

    
    

    
    
    
    
    
    

    
    
    
    
  
  
    
      
        Ionic Blank Starter

咱們注意到，在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'
    
    (window.cordova &&

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>

運行工程，能夠看到Wijmo的InputNumber控件已經添加到頁面中，默認爲1，最大值爲5，最小值爲-5，增加步長爲1.