整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
移動端混合開發的一個明顯優勢就是，一套代碼兩套部署，開發一套項目代碼，可分別打成Android的包和ios的包。無論是混合開發還是原生開發，都是會需要原生的平臺。我們先以Android平臺為例，首先肯定需要AndroidSDK,Android環境緣起于java，所以必須先安裝JDk,這是平臺的環境.混合開發顧名思義需要前端和原生兩塊環境內容。混合開發平臺，我們選擇的是cordova,那么它依賴于node.js環境，并且需要node.js的npm模塊來幫它下載插件。創建項目還需調試運行，那么就會需要Android模擬器。由于原生的Android模擬器啟動過于慢，而且由于網絡限制，google的cpu渲染加速器環境也難以下載。我們這里使用的是一個國外的好用且免費的第三方模擬器Genymotion。東西是免費的，但是需要注冊和登陸。
一共需要搭建的環境也就這么幾個JDK，AndroidSDK,node.js,cordova, Genymotion。
開發環境：
測試運行環境：
2.1 JDK
安裝教程很多，記住安裝時下載1.8版本
菜鳥教程：http://www.runoob.com/java/java-environment-setup.html
2.2 AndroidSDK
androidSDK由于國內限網，推薦一個國內的一個下載網站：http://www.androiddevtools.cn/
下載后根據提示安裝，推薦下載的包就不要取消。系統一般會幫你默認勾選安卓最新版本Android9.0，但是Android9.0會出現模擬器啟動不了的問題，坑很多，建議安裝9.0以下的，我選的Android6.0，勾選下圖的選項即可。
下載完配置Android環境變量
打開安卓的安卓目錄如圖，我畫圈的兩個目錄，需要加入到path里面
D:Program Filesandroidplatform-tools; D:Program Filesandroidtools;
2.3Genymotion 安裝
注冊：https://www.genymotion.com/
下載：https://www.genymotion.com/download/
下載后按照提示安裝即可，打開軟件時登錄選擇個人登錄即可。
?
w3school:https://www.w3cschool.cn/cuhkj/cuhkj-lf832655.html
2.4安裝nodejs
選擇windows免安裝版64位
node -v npm -v
首先來說為什么要更換鏡像源，由于npm的鏡像源是國外的，我們使用npm工具安裝軟件環境時，由于網速問題會導致很多難以解決的問題，而且下載巨慢，故將鏡像源更換為淘寶的鏡像源。
執行下面命令更換軟件源
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看是否更換成功
cnpm -v
不報錯且出來一段信息則說明更換成功。
2.5安裝cordova平臺
cnpm install -g cordova@6.0.0
cordova -v
#1.創建項目 cordova create MyApp cd ./MyApp #2.添加平臺 cordova platform add browser #添加瀏覽器平臺 cordova platform add android #安卓平臺 cordova platform add ios #ios平臺 #注意添加相關平臺需要擁有相關平臺的環境 #3.編譯打包 cordova build android #打成android平臺的包 .apk cordova build ios #打成ios平臺的包 #4.運行到androidSDK自帶的模擬器 cordova emulate android #5.運行到第三方模擬器或真機 cordova run android
2.6angularjs環境搭建
npm install -g @angular/cli
2.7ionic安裝配置
cnpm install -g ionic@latest
#1創建項目 ionic start myNewProject tabs #tabs是項目模板的一種，ionic平臺自身會提供幾種項目模板 #進入到項目 cd ./myNewProject #2.添加平臺 ionic cordova platform add android #平臺同上一樣可選 #3.打包 ionic cordova build android #4.運行 ionic serve #運行在瀏覽器 ionic cordova run android #運行到android,ios
在本文中，我們將著重介紹如何將WijmoJS與Ionic一起使用，來創建一款移動端支持優先、快捷高效的應用程序。在之前的文章中，我們已經介紹了使用WijmoJS與Angular、React、Vue三大框架結合搭建您的Web應用程序。這篇將是本系列的最后一篇文章。
Ionic是一個專注于用Web開發技術，基于HTML5創建類似于手機平臺原生應用的一個開發框架，它綁定了AngularJS和Sass。這個框架的目的是從web的角度開發手機應用，基于PhoneGap的編譯平臺，可以實現編譯成各個平臺的應用程序。
使用Ionic不但可以優化html、css和js的性能，構建高效的應用程序，而且還可以用于構建Sass和AngularJS的優化。對于用以開發混合手機應用的項目來說，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 使用反饋意見征集
ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。
ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。
ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。為了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。
ionic 特點
1.ionic 基于Angular語法，簡單易學。
2.ionic 是一個輕量級框架。
3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
4.ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。
5.ionic 專注原生，讓你看不出混合應用和原生的區別
6.ionic 提供了強大的命令行工具。
7.ionic 性能優越，運行速度快。
學習前你需要了解？
學習前你需要了解以下基礎知識：
HTML
CSS
Javascript
Angular
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
