资讯专栏INFORMATION COLUMN

用WijmoJS玩转您的Web应用 —— Ionic

fjcgreat / 2321人阅读

摘要:在之前的文章中,我们已经介绍了使用与三大框架结合搭建您的应用程序。使用创建应用程序。扩展阅读用玩转您的应用用玩转您的应用用玩转您的应用近期活动问卷调查扬帆万里,因您前行使用反馈意见征集

前言:

在本文中,我们将着重介绍如何将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

Ionic专注于应用程序的外观和用户界面交互。它基于Angular,并使用Cordova提供对特定设备本地功能的访问,包括传感器,数据,网络状态等。
作为同样流行的前端框架之一,WijmoJS也同样注重更灵活、更智能的用户操作体验。秉承“快如闪电,触控优先”的设计理念,WijmoJS在提供优质服务和产品的同时,不断优化产品架构,与时俱进。凭借其先进的触控设计、全面的 AngularJS 支持、灵活的 API 接口、轻松的操作体验,WijmoJS可全面满足企业开发所需。
那么,我们如何将二者结合,搭建出一款可完美融合全新一代移动框架的Web应用程序呢?本文会给你答案。

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

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

 使用CLI创建应用程序。

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

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

具体步骤如下:

第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”文件,如下所示:

    
    
    
      
        Home
      
    
    
    
      

Welcome to Wijmo in Ionic!

This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.

Take a look at the src/pages/ directory …

Here are some Wijmo controls to help you get started:

请注意,代码中使用的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”文件并添加以下行:

    
    
    

除了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保存所有文件中的更改并切换回浏览器以查看结果:

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

总结

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

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

扩展阅读

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

近期活动

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95688.html

相关文章

  • WijmoJS玩转您的Web —— Angular6

    摘要:除在全球率先支持外,现已全面应用于等主流框架中。本文中,我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来,我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用 为什么选择WijmoJS? 作为一款纯前端控件集,WijmoJS秉承快如闪电,触控优先的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在...

    hedge_hog 评论0 收藏0
  • WijmoJS玩转您的Web —— Angular6

    摘要:除在全球率先支持外,现已全面应用于等主流框架中。本文中,我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来,我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用 为什么选择WijmoJS? 作为一款纯前端控件集,WijmoJS秉承快如闪电,触控优先的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在...

    Ku_Andrew 评论0 收藏0
  • WijmoJS玩转您的Web —— Vue.js

    摘要:相反,我们将专注于将添加到用编写的简单应用程序中。使用创建应用程序。示例应用程序有两个组件应用程序和。除在全球率先支持外,现已全面应用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述 在本文中,我们将展示如何将WijmoJS与NPM和Webpack一起使用来创建最流行的基于JavaScript应...

    OnlyMyRailgun 评论0 收藏0
  • WijmoJS玩转您的Web —— React

    摘要:关于作为一款纯前端控件集,秉承快如闪电,触控优先的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。灵活的为用户提供易用轻松的操作体验,全面满足开发所需,是构建企业应用程序最完整的纯前端控件集。 前文回顾 在《用 WijmoJS 玩转您的Web应用》系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法。 而今天,我们将展示如...

    FleyX 评论0 收藏0
  • Vue 2019开发者图谱

    摘要:为了便于您更清晰的理解的体系架构,在这里我将为您展示年开发者知识图谱,它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试,可极大节省企业研发成本并降低交付风险。 作为 Vue 的初学者,您或许已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等,您可能还听过和Vue经常一起被提到的工具和库,如Vuex、Webp...

    cgspine 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<