前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Mobile first! Wijmo 5 + Ionic Framework之:Hello World!

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

作者头像
葡萄城控件
发布于 2018-01-10 09:57:42
发布于 2018-01-10 09:57:42
2.3K00
代码可运行
举报
运行总次数:0
代码可运行

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

我们会看到如下的页面:

要停止服务,可在命令行下通过

结束服务。

下面开始添加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引用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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完整代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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控件),完整代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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.

总结

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

工程压缩包下载地址

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-10-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
用 C# 写脚本 如何输出文件夹内所有文件名
大部分在 Windows 下的脚本都是使用 bat 或 cmd 写的,这部分的脚本对我来说可读性不好。这个可读性也是很主观的,对我来说用 C# 写脚本的可读性很强,但是换个小伙伴就不是了。在 .NET Core 下的 C# 可以通过 dotnet run 运行代码起来,此时特别适合用来写脚本
林德熙
2020/05/09
8250
【转】vscode调试运行c#详细操作过程
//用于发布exe <RuntimeIdentifier>win10-x64</RuntimeIdentifier> 
landv
2018/12/28
8.8K1
VisualStudio 通过外部调试方法快速调试库代码
在开发的时候,我有一个很大的项目,里面包含了 1000 个项目,但是我需要调试里面的一个库,如果直接修改这个库,会让 VisualStudio 重新编译 90 个项目,于是这样的调试的速度就太慢 本文告诉大家如何通过外部调试的方法,每次调试只需要编译这个库不需要编译其他的项目
林德熙
2019/03/13
1.2K0
VisualStudio 通过外部调试方法快速调试库代码
如何创建一个基于命令行工具的跨平台的 NuGet 工具包
发布于 2018-05-12 01:09 更新于 2018-09-01 00:16
walterlv
2018/09/18
1.1K0
如何创建一个基于命令行工具的跨平台的 NuGet 工具包
GitHub Action 新上线 WPF .NET Core 自动构建模板
在很土豪的微软免费给大家提供 GitHub 的构建服务器受到了小伙伴们的一堆好评之后,微软最近推出了 WPF 的 .NET Core 版本的模板,可以快速上手 WPF 项目的自动构建,支持自动进行单元测试和打包,同时输出打包的文件
林德熙
2020/05/09
6310
GitHub Action 新上线 WPF .NET Core 自动构建模板
dotnet core 使用 sqlite 部署到 Centos 服务器 创建项目创建模型安装 Sqlite设置连接部署服务器
本文告诉大家如何创建一个 asp dotnet core 程序,这个程序使用 sqlite 保存,部署程序到 Centos 7 服务器
林德熙
2019/03/13
1.2K0
dotnet core 使用 sqlite 部署到 Centos 服务器
            创建项目创建模型安装 Sqlite设置连接部署服务器
手把手教你写dotnet core(入门篇)
dotnet core最低开发环境要求就是一个.NET SDK,在这里可以下载的到最新版本的SDK,各个平台都有.
李国宝
2020/01/02
2.1K0
手把手教你写dotnet core(入门篇)
dotnet 将C#编译为wasm让前端html使用
其实 dotnet 是全栈的首选,原因是因为可以开发的方向太多,比如大本营PC端,以及后台。还有移动端,包括 IOS 和安卓端。现在还能用来写前端,本文就来告诉大家如何在前端使用现有的C#代码,通过 WebAssembly 使用 C# 的代码支持完全静态的网页,也就是不需要任何后台的存在。同时使用 C# 编写的 WebAssembly 可以省去 js 编译时间,同时使用二进制的本地指令,运行效率也有极大的提升。兼顾了开发的友好以及更高的性能
林德熙
2022/08/12
2.7K0
dotnet 三句命令行创建运行一个 web 服务程序
现在 dotnet 的服务创建十分具有效率,本文的前提要求是电脑上面已经安装了 dotnet 程序,接下来就是三句命令行的事情
林德熙
2020/02/17
1.2K0
利用FlubuCore用C#来写DevOps脚本
随着近些年微服务的流行,有越来越多的开发者和团队所采纳和使用,它的确提供了很多的优势也解决了很多的问题,但是我们也知道也并不是银弹,提供优势的同时它也给我们的开发人员和团队也带来了很多的挑战。
Jlion
2022/04/07
4080
利用FlubuCore用C#来写DevOps脚本
WPF 框架开发 调试和开发 XAML 构建过程的 PresentationBuildTasks 方法
阅读本文,你可以了解如何编写开发和调试 XAML 构建为 Baml 和 g.cs 文件的过程和工具。本文也适合想要了解 WPF 的 XAML 构建过程的开发者阅读,本文提供了可以断点调试 WPF 的 XAML 构建过程的方法和代码
林德熙
2021/12/24
7290
VisualStudio 如何在 NuGet 包里面同时包含 DEBUG 和 RELEASE 的库
我在开发的时候需要使用到一些 DEBUG 库进行调试,但是我的库是通过 NuGet 给用户的,如果在 NuGet 里面使用到了 DEBUG 的库那么会让代码的运行效率降低。于是我就找到一个方法,可以在 NuGet 同时打包调试和发布的包,这样在用户调试的时候就可以使用调试的代码
林德熙
2019/04/22
2.1K0
VisualStudio 如何在 NuGet 包里面同时包含 DEBUG 和 RELEASE 的库
在 SublimeText 使用 dotnet 编译 C# 项目
在 SublimeText 搭建 C# 环境可以找到的博客基本都是使用 csc 进行构建,而我期望在 dotnet 下编译整个项目。通过 dotnet 编译整个项目可以解决编译大项目时需要打开一个控制台降低效率
林德熙
2020/02/17
1.2K0
Roslyn 打包 NuGet 包 BuildTransitive 文件夹用于穿透依赖传递拷贝文件
默认的 PackageReference 可以实现传递依赖,传递依赖的含义是是假定 B 项目安装了 A 库,而 C 项目依赖 B 项目,那么 C 项目将会自然拿到 A 库的 DLL 引用。但默认的 NuGet 包的构建指导文件 targets 命令是不会在传递执行的,也就是如上的 C 项目将不会执行 B 项目安装的 A 库里面的 target 内容 有一些项目需要拷贝自定义文件,例如拷贝图片或者一些 Native 的 DLL 等资源。如 WPF 框架需要拷贝 PenIME 等资源。如果只是在最底层的项目安装了库,那为了让可执行文件项目也输出库的资源,就需要在可执行项目上也安装库。以上的方法的不足在于安装复杂,也许会忘记安装 本文告诉大家一个解决方法是通过在制作库的时候,加上 BuildTransitive 文件夹,在此文件夹内添加构建指导文件,此时这个构建指导文件 targets 文件里面的命令将会在传递中执行,也就是说只需要在底层的项目安装即可,不需要在可执行项目上也安装库
林德熙
2021/12/24
7580
[C#] Blazor练习1
为了设置 Blazor 项目来配合工作,我们将使用 Visual Studio Code。Visual Studio Code 包含一个集成终端,这使创建新项目变得简单。如果不想使用其他代码编辑器,可在终端中运行此模块中的命令。
科控物联
2022/03/29
9230
[C#] Blazor练习1
Roslyn 将这个文件放在你的项目文件夹,无论哪个控制台项目都会输出林德熙是逗比
虽然已经通过很多篇博客告诉大家如何通过 Directory.Build.props 文件修改编译的方法,但是本文还是提供一个新的思路 只需要在项目文件夹,或者磁盘的文件夹,如 E:\ 放下本文提供的 Directory.Build.props 文件,整个文件夹内的控制台项目就会输出 林德熙是逗比 想要知道是怎么做的,请看下面
林德熙
2019/03/13
8420
以1个具体接口为例来展示腾讯云.NET SDK的使用
【.NET Core和ASP.NET Core】是什么,它们跟【.NET Framework和ASP.NET】的区别是什么,为什么要选用前者
Windows技术交流
2020/03/13
1.9K0
手把手教你写dotnet core(MVC)
上一篇手把手教你写dotnet core(入门篇)我们已经简单在dotnet core里面跑了个”hello world!”和累加程序.
李国宝
2020/01/02
1.1K0
手把手教你写dotnet core(MVC)
VisualStudio 使用三个方法启动最新 C# 功能 第一个方法第二个方法第三个方法
本文告诉大家如何在 VisualStudio 打开最新的 C#,现在的微软更新 C# 很快,那么如何让 VisualStudio 在项目使用最新的
林德熙
2018/09/19
9820
VisualStudio 使用三个方法启动最新 C# 功能
            第一个方法第二个方法第三个方法
使用 dotnet 命令行配合 vscode 完成一个完整 .NET 解决方案的编写和调试
如果你是开发个人项目,那就直接用 Visual Studio Community 版本吧,对个人免费,对小团体免费,不需要这么折腾。
walterlv
2023/10/22
2.4K0
使用 dotnet 命令行配合 vscode 完成一个完整 .NET 解决方案的编写和调试
推荐阅读
相关推荐
用 C# 写脚本 如何输出文件夹内所有文件名
更多 >
LV.1
.NET Foundation
目录
  • Ionic是什么?
  • 系统必备
  • 快速入门
    • 上面的命令使用了Ionic的空模板”blank”, 创建了一个名为“ExpenseTracker”Ionic工程; 创建成功后,我们进入新建的ExpenseTracker目录。 然后我们通过Ionic命令启动Web站点
  • 我们注意到,在index.html 文件中,并未直接引用AngularJs文件,这个是因为Ionic(ionic.bundle.js文件)已经包含了AngularJs和其依赖,如UI-Router,故不需要直接引用了。
  • 使用Wijmo 5
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档