整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用WijmoJS玩转您的Web应用-Ionic

言:

在本文中,我们将着重介绍如何将WijmoJS与Ionic一起使用,来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中,我们已经介绍了使用WijmoJS与Angular、React、Vue三大框架结合搭建您的Web应用程序。这篇将是本系列的最后一篇文章。

什么是Ionic?

Ionic是一个专注于用Web开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架,它绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。

使用Ionic不但可以优化html、css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化。对于用以开发混合手机应用的项目来说,ionic是一个值得信赖的框架。

WijmoJS VS Ionic

WijmoJS 与 Ionic 共同搭建移动支持优先的全新一代Web应用

Ionic专注于应用程序的外观和用户界面交互。它基于Angular,并使用Cordova提供对特定设备本地功能的访问,包括传感器,数据,网络状态等。

作为同样流行的前端框架之一,WijmoJS也同样注重更灵活、更智能的用户操作体验。秉承“快如闪电,触控优先”的设计理念,WijmoJS在提供优质服务和产品的同时,不断优化产品架构,与时俱进。凭借其先进的触控设计、全面的 AngularJS 支持、灵活的 API 接口、轻松的操作体验,WijmoJS可全面满足企业开发所需。

那么,我们如何将二者结合,搭建出一款可完美融合全新一代移动框架的Web应用程序呢?本文会给你答案。

在所有框架中创建和维护应用程序的基本步骤都是类似的:

l 安装适当的CLI(命令行界面实用程序)以生成,运行,维护和部署应用程序。

l 使用CLI创建应用程序。

l 使用NPM将WijmoJS添加到应用程序。

l 导入您要使用的组件并添加适当的标记。

具体步骤如下:

第1步,创建一个新的Ionic应用程序

按照以下步骤创建一个新的Ionic应用程序,启动并运行:

第2步,添加WijmoJS模块

打开“src / app / app.module.ts”文件,为网格和图表添加WijmoJS模块:

// src/app/app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

// import Wijmo modules

import { WjGridModule } from 'wijmo/wijmo.angular2.grid';

import { WjChartModule } from 'wijmo/wijmo.angular2.chart';

// apply Wijmo license key

import { setLicenseKey } from 'wijmo/wijmo';

setLicenseKey('your license goes here');

@NgModule({

declarations: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage

],

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

WjGridModule,

WjChartModule

],

})

export class AppModule {}

本段代码除了导入我们想要的WijmoJS模块外,还会自动匹配WijmoJS许可证密钥,并从应用程序中删除水印。

第3步,向控件添加数据

首先打开“src / pages / home / home.ts”文件,并给“HomePage”组件一些控件数据:

// src/pages/home/home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

// import Wijmo components

import { CollectionView } from 'wijmo/wijmo';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

data = this.getData();

getData() {

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),

data = [];

for (var i = 0; i < countries.length; i++) {

data.push({

country: countries[i],

sales: Math.random() * 10000,

expenses: Math.random() * 5000,

downloads: Math.round(Math.random() * 20000),

});

}

return new CollectionView(data);

}

}

注意getData返回一个CollectionView而不是一个常规数组。 CollectionView类支持排序,筛选,分组,货币和通知。 在这个例子中,我们将它用作网格和图表的数据源。

第4步,将Ionic控件添加到应用程序中

要将表格和图表添加到应用程序,请编辑“src / pages / home / home.html”文件,如下所示:

<!-- src/pages/page/home.hmtl -->

<ion-header>

<ion-navbar>

<ion-title>Home</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h2>Welcome to Wijmo in Ionic!</h2>

<p>

This starter project comes with simple tabs-based layout for apps

that are going to primarily use a Tabbed UI.

</p>

<p>

Take a look at the <code>src/pages/</code> directory …

</p>

<h4>Here are some Wijmo controls to help you get started:</h4>

<div class="App-panel">

<wj-flex-grid [itemsSource]="data">

</wj-flex-grid>

<wj-flex-chart [itemsSource]="data" [bindingX]="'country'">

<wj-flex-chart-series [binding]="'sales'" [name]="'Sales'">

</wj-flex-chart-series>

<wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'">

</wj-flex-chart-series>

<wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'">

</wj-flex-chart-series>

</wj-flex-chart>

</div>

</ion-content>

请注意,代码中使用的wj-flex-grid,wj-flex-chart和wj-flex-chart-series指令,是从表格和图表模块导入的。

第5步,更新样式表

首先,我们需要添加包含所有WijmoJS控件的CSS样式文件 - “wijmo.css”。 有几种方法可以将自定义css文件添加到Ionic构建过程中。 在这个例子中,我们将使用最简单的一个:

将“node_modules \ wijmo \ styles \ wijmo.css”文件复制到应用程序的“src / assets / css”文件夹中即可。

打开应用程序的“src / index.html”文件并添加以下行:

<!-- src/index.hmtl -->

<link href="build/main.css" rel="stylesheet">

<link href="assets/css/wijmo.css" rel="stylesheet">

除了WijmoJS的标准CSS,我们还可以添加其他样式来使我们的应用程序更美观。 打开“app / app.scss”文件并添加以下代码:

// app/app.scss

// http://ionicframework.com/docs/theming/

// App Global Sass

// --------------------------------------------------

// …

//

.App-panel {

margin: 0 48pt;

text-align: center;

.wj-control {

display: inline-block;

width: 400px;

height: 300px;

vertical-align: top;

}

}

.wj-flexgrid .wj-cell {

padding: 8px;

text-align: left;

}

第6步,在浏览器中运行

按ctrl + S保存所有文件中的更改并切换回浏览器以查看结果:

Wijmo与Ionic搭建web应用

由于表格和图表绑定到同一个CollectionView,因此对表格中的数据所做的任何更改都会自动反映在图表中。 例如,您可以单击列标题对数据进行排序或使用键盘编辑一些值。

总结

1. 将WijmoJS集成到现代JavaScript应用程序中只需要使用NPM进行安装并从库中导入所需的组件即可。

2. 使用WijmoJS能够确保在不同的框架中使用完全相同的UI组件,让您轻松地使用两个或多个框架,或者在未来随意切换框架

扩展阅读

《用 WijmoJS 玩转您的 Web 应用 — Angular6》

https://mp.weixin.qq.com/s?__biz=MzA4MTMwMDY2NQ==&mid=2650548183&idx=4&sn=a0f9b6e02008f75f5840c9ce6ea6c972&chksm=879f9a01b0e81317c55ca77f5cd055518dadfa315937f32a0ef2d6daf0a4c567aec9b5877635&pass_ticket=cw8VmKrkX0WJUtL%20hFFK5chqx%20pzdn4rGGzHOV6MyvaR6mM7e9V06n8SrZnOCJ5%20&scene=21#wechat_redirect

《用 WijmoJS 玩转您的 Web 应用 —— React》

https://mp.weixin.qq.com/s?__biz=MzA4MTMwMDY2NQ==&mid=2650548194&idx=4&sn=e5ea9991b53cff1a79f8bce8101a71c1&chksm=879f9a34b0e8132282bc2374ee61fe30947600fcd2cda973acf3d6b676a955c633fec384c916&mpshare=1&scene=1&srcid=0626nO6EBXTG77dVyvm9JQAt&pass_ticket=4OdUrFMRsgXbNAjWnWNlY%2BwNAg5FpyfBcfbMJwywU74nSVIwsDKFA%2FBQQY82SIwD#rd

《用 WijmoJS 玩转您的 Web 应用之 Vue 框架》

https://mp.weixin.qq.com/s?__biz=MzA4MTMwMDY2NQ==&mid=2650548157&idx=3&sn=219734f099e8a0e9873d0465cbabd793&chksm=879f9a6bb0e8137d2585b5fe64404fc34b3bd174292f6d836c8b55f0580365c472bc92fcfcf8&mpshare=1&srcid=0620PPEWOB74p7ZwlFLyLyhe&pass_ticket=cw8VmKrkX0WJUtL%20hFFK5chqx%20pzdn4rGGzHOV6MyvaR6mM7e9V06n8SrZnOCJ5%20&scene=21#wechat_redirect

近期活动

【问卷调查】扬帆万里,因您前行 --- ComponentOne 使用反馈意见征集

着 HTML5 在 2014 年的推出,HTML 已经确定了它的地位。Ionic Framework 的开发者马上就认识到,这是将 HTML5 用于原生和混合应用开发平台的好时机。他们的口号是“构建一次,在任何地方运行”。

使用一个开源的 SDK,开发者可以为 iOS 和 Android(是的,还包括 Blackberry)创建 Ionic Framework app。而且,Kumulos Cordova SDK 现在已与 Ionic 框架集成,因此不应再为制作“劣质”的 app 找借口。

下面将介绍 5 个使用 Ionic 框架构建优秀 app 的技巧。

1、使用 Creator

为什么要让事情变得更加困难?不想屈服于编写脏代码?你是否更像一个可视化开发者?那么,Ionic Creator 就是为你而生的。Ionic Creator 是一个拖放的界面工具,只需点击几下鼠标,便可将你的想法应用到 app。

通过 Creator,Ionic 为开发者提供了一个现成的组件库,开发者可以尽情使用他们。app 设计完成后,可将它分享给同事以交流意见和建议。除此之外,还可以轻松导出你的 Creator 项目至原生 IPA 和 APK 文件,以直接安装在设备上。

创作者还可以通过应用程序的想法,更容易地销售您的客户端 - 使用内置的功能,如“添加朋友”,让客户(或潜在的客户端)检查应用程序,同时仍在开发中提供其输入。 更不用说比尝试让非技术人员使用Testflight更容易了。

Creator 还可以让你在 app 中更容易向别人展示 app —— 使用内置的功能,如“添加好友”,即使 app 仍在开发期间,也可以让客户(或潜在的客户)查看 app 并提供输入功能。这比让非技术人员使用 Testflight 更容易。

2、使用文档

每个人都会和你说 RTFM(Read The Fucking Manual)。但是,在 Ionic 中却从不会出现这种情况。为什么?因为Ionic 的文档确实很好。事实上,你可以复制文档中的部分代码,并将其直接用于你的 app。为什么当有现成的代码在你面前时,还要花时间为头像编写一个显示列表?当然,你可能需要修改代码,但这是快速开发的好方法。

3、自定义组件

Ionic 中的组件库是一个真正节省时间的利器。然而,它也是一把双刃剑 —— 因为 Ionic 组件是如此容易使用,每个人都可以使用它,这就使得你的 app 看起来会和其他人的是如此相似。但是可以通过引入一些自定义的 CSS 并调整一些 Ionic 预定义类以创建自己的样式来避免此问题。

4、让 Ionic 接手“控制权”

使用 Ionic 框架开发 app,最好的地方是你不需要每一件事都亲自去做。

针对 iOS 和 Android(和 Blackberry),制作多种不同格式的启动页可能会十分痛苦。使用 Ionic,只需要设计合适的 app 图标即可,有更多的重要的事需要去做。不用担心,它的使用很简单,通过使用 Ionic CLI,只需在平台目录中放置合适的文件即可(Ionic 可与 .png, Photoshop, 和 Illustrator 格式兼容),这样就可以轻松为 iOS 和 Android 生成 app 图标和启动页界面。

5、朝着原生的方向

将 app 无缝集成到操作系统中,是为用户提供优秀体验的最好办法之一。通过使用 Platform Device Class,Ionic 变得更易执行此操作。iOS, Windows Phone, iPad, 和 Android 都有它们自己的特定类,以便在 app 运行时给予 Ionic app 原生的外观和感觉。这些类可以在不同操作系统版本之间的 iOS 和 Android 上进一步细分。

这并不是全部

当然,上面提到的亮点并不是 Ionic 内置的所有优秀特性。正如开发者喜欢在文档中说的,“使用 Ionic 的可能性是永无止境的”,但我希望至少能给大家提供几个关于如何构建优秀的 Ionic Framework app 的想法。

译自:https://dzone.com/

下教程是看了网上相关安装ionic的教程视频并且亲测成功截图写下来。先简述一下步骤,再详情查看详情的截图安装配置过程。

简略步骤:

1. 请预先安装好nodejs (官网:https://nodejs.org/en/)

2.安装淘宝镜像命令: npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装ionic命令: cnpm install -g ionic@beta

4. 设置全局的npm从国内源加载:修改配置文件(安装的node路径下nodejs\node_modules\npm\npmrc文件)npmrc,在文件的尾部添加配置registry =http://registry.cnpmjs.org

5.在项目文件夹初始化项目命令:ionic start demo --v2

6.在项目文件运行ionic环境服务命令:ionic serve

图文详情步骤:

1.打开cmd,以管理员身份运行

2.拷贝复制命令 npm install -g cnpm --registry=https://registry.npm.taobao.org

(注意安装的node版本不要太旧,及时更新)

验证是否安装成功,输入命令 cnpm -v 查看版本号(能查看到版本号即表明安装成功)

3.使用cnpm来安装Ionic,命令 cnpm install -g ionic@beta

4. 设置全局的npm从国内源加载

1)修改配置文件(找到安装node路径下的nodejs\node_modules\npm\npmrc文件)npmrc

2)可以sublime或者记事本打开,修改文件内容,添加配置 registry =http://registry.cnpmjs.org

5.在你的电脑本地新一个文件用来存放ionic项目文件,例如我新建一个ionicProj文件:

重新打开一个cmd,进入到ionicProj文件下

尝试初始化项目,输入命令:ionic start demo --v2

如果发现有这一步,是提示你创建一个ionic账户(方便ios开发使用账户),想注册输入Y否则n

创建完毕,可以在本地看到以下文件

6.测试刚才新建项目,在终端进入demo文件夹里面,使用命令 ionic serve 来启动demo项目

如果有来到以下截图这里卡住了,这里的意思要你选择一个运行的服务器地址(有1,2,3,4可以选了),在Address Selection: 中可以输入localhost

然后会自动调用你的chrome浏览打开看到demo效果: