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

Stella981
• 阅读 725

本教程中,我们用Wijmo 5Ionic Framework实现一个Mobile的工程:Hello World。

Ionic是什么?

Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。

Ionic包含3部分:

  • 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设备。对其他较老的设备无版本支持计划。

系统必备

本教程会使用到下面的环境,请预先准备。

在本教程中,我们使用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服务,这个对于调试非常方便。

我们会看到如下的页面:

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

要停止服务,可在命令行下通过 Mobile first! Wijmo 5 + Ionic Framework之:Hello Wor 结束服务。

下面开始添加Wijmo 5的源码到我们创建的工程中,Wijmo5源码下载地址。先在工程的www/lib 文件夹下,创建一个Wijmo文件夹,并拷贝Wijmo源码下Dist的3个文件夹controls、interop、styles到新创建的Wijmo文件夹下。工程文件夹中的www/lib目录,包含了该app所要依赖的库文件。

Wijmo 5下载后的源码路径概图:

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

Iconic的目录浏览截图:

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

配置好文件目录结构后,我们就可使用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.

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

总结

本文,我们创建了Ionic工程并添加Wijmo 5的InputNumber控件,即完成了一个Hello World!

工程压缩包下载地址

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这