摘要:在之前的文章中,我們已經介紹了使用與三大框架結合搭建您的應用程序。使用創建應用程序。擴展閱讀用玩轉您的應用用玩轉您的應用用玩轉您的應用近期活動問卷調查揚帆萬里,因您前行使用反饋意見征集
前言:
在本文中,我們將著重介紹如何將WijmoJS與Ionic一起使用,來創建一款移動端支持優先、快捷高效的應用程序。在之前的文章中,我們已經介紹了使用WijmoJS與Angular、React、Vue三大框架結合搭建您的Web應用程序。這篇將是本系列的最后一篇文章。
什么是Ionic?Ionic是一個專注于用Web開發技術,基于HTML5創建類似于手機平臺原生應用的一個開發框架,它綁定了AngularJS和Sass。這個框架的目的是從web的角度開發手機應用,基于PhoneGap的編譯平臺,可以實現編譯成各個平臺的應用程序。
使用Ionic不但可以優化html、css和js的性能,構建高效的應用程序,而且還可以用于構建Sass和AngularJS的優化。對于用以開發混合手機應用的項目來說,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 使用反饋意見征集
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95688.html
摘要:除在全球率先支持外,現已全面應用于等主流框架中。本文中,我們將專注于如何將添加到用編寫的應用程序中。使用創建應用程序。接下來,我們定義適用于這些元素中托管的應用程序面板元素和控件的規則。往期精彩用玩轉您的應用 為什么選擇WijmoJS? 作為一款純前端控件集,WijmoJS秉承快如閃電,觸控優先的設計理念,在提供優質服務和產品的同時,專注于企業應用開發,不斷優化產品架構,與時俱進。除在...
摘要:相反,我們將專注于將添加到用編寫的簡單應用程序中。使用創建應用程序。示例應用程序有兩個組件應用程序和。除在全球率先支持外,現已全面應用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述 在本文中,我們將展示如何將WijmoJS與NPM和Webpack一起使用來創建最流行的基于JavaScript應...
摘要:關于作為一款純前端控件集,秉承快如閃電,觸控優先的設計理念,在提供優質服務和產品的同時,專注于企業應用開發,不斷優化產品架構,與時俱進。靈活的為用戶提供易用輕松的操作體驗,全面滿足開發所需,是構建企業應用程序最完整的純前端控件集。 前文回顧 在《用 WijmoJS 玩轉您的Web應用》系列文章中,我們已經介紹了Angular和Vue框架下 WijmoJS 的玩法。 而今天,我們將展示如...
摘要:為了便于您更清晰的理解的體系架構,在這里我將為您展示年開發者知識圖譜,它包含了所有開發過程中的關鍵部分。在數據展示前端導入導出圖表面板數據綁定等場景無需大量代碼開發和測試,可極大節省企業研發成本并降低交付風險。 作為 Vue 的初學者,您或許已經聽過很多關于它的專業術語了,例如:單頁面應用程序、異步組件、服務器端呈現等,您可能還聽過和Vue經常一起被提到的工具和庫,如Vuex、Webp...
閱讀 659·2021-10-09 09:41
閱讀 640·2019-08-30 15:53
閱讀 1071·2019-08-30 15:53
閱讀 1206·2019-08-30 11:01
閱讀 1562·2019-08-29 17:31
閱讀 983·2019-08-29 14:05
閱讀 1710·2019-08-29 12:49
閱讀 409·2019-08-28 18:17