整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          用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效果:


          主站蜘蛛池模板: 国模极品一区二区三区| 亚洲码一区二区三区| 亚洲福利视频一区二区三区 | 无码人妻精品一区二区三18禁| 中文字幕日韩精品一区二区三区| 国产一区二区视频在线观看| 国产一区二区三区免费视频 | 国产一区二区三区福利| 高清精品一区二区三区一区| 日韩人妻无码一区二区三区久久 | 最新中文字幕一区| 国产免费一区二区三区| 91精品一区二区| 国产短视频精品一区二区三区| 搡老熟女老女人一区二区| 国产视频一区在线观看| 日本不卡一区二区视频a| 久久久久人妻精品一区蜜桃| 亚洲色无码一区二区三区| 国产伦理一区二区| 日韩爆乳一区二区无码| 国产精品揄拍一区二区| 亚洲AV无码一区二区一二区| 亚洲AV无码一区二区三区电影| 亚洲欧美日韩一区二区三区| 成人免费视频一区二区三区| 久久久无码精品人妻一区| 国产成人精品一区二三区| 亚洲一区二区三区乱码A| 熟女性饥渴一区二区三区| 无码人妻一区二区三区免费看| 亚洲综合色一区二区三区小说| 无码人妻一区二区三区一| 国模极品一区二区三区| 精品国产一区二区三区久久蜜臀| 中文字幕精品一区二区精品| 亚洲香蕉久久一区二区| 国产一区二区三区无码免费| 三上悠亚国产精品一区| 色偷偷一区二区无码视频| 久久精品无码一区二区三区免费|