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.

总结

本文。咱们建立了Ionicproject并加入Wijmo 5的InputNumber控件，即完毕了一个Hello World！

project压缩包下载地址