痛點(diǎn)在于開發(fā)環(huán)境吧寸五，base app的下載和gradle編譯都需要較好的外網(wǎng)環(huán)境
環(huán)境準(zhǔn)備
npm install -g cordova ionic-
ionic start myApp --v2 --skip-npm靶瘸，這一步是從git上拉取項(xiàng)目模板等舔，內(nèi)網(wǎng)環(huán)境下是無法下下來的魁瞪， --v2是下載ionic2版本， --skip-npm是因?yàn)橄峦昴０搴骾onic會(huì)自動(dòng)npm install丽柿，跳過這部然后自己手動(dòng)用cnpm下載 cd myApp-
ionic serve -lc飞袋，ionic提供的瀏覽器調(diào)試，一開始一直不成功句各。多次新建項(xiàng)目下載重試后吸占，成功...還是網(wǎng)絡(luò)不穩(wěn)定導(dǎo)致的吧，-lc是ionic lab凿宾，該頁(yè)面可以同時(shí)調(diào)試在Android矾屯、IOS和WP設(shè)備上的樣式； -
ionic platform add android菌湃，添加android平臺(tái)下的項(xiàng)目結(jié)構(gòu)问拘，在platforms文件夾下。 -
ionic build android,ionic run android -lc惧所，編譯和在真機(jī)上運(yùn)行骤坐，-lc類似serve下的-lc，可以實(shí)時(shí)在真機(jī)上調(diào)試;
gradle 配置
-
ionic build android是通過gradle編譯下愈，而且會(huì)在線下載gradle纽绍，墻內(nèi)基本是下不了的，這就需要手動(dòng)下載項(xiàng)目需要的gradle版本势似。 查看android platform下的build.gradle文件拌夏，看當(dāng)前版本需要的gradle version。 下載成功后履因，放在myApp\platforms\android\gradle文件夾下障簿， 命令行輸入set CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=../gradle-2.14.1-all.zip - maven下載失敗問題。替換為阿里云鏡像：
打開項(xiàng)目\platforms\android\build.gradle修改：
repositories {
//mavenCentral() // 注釋掉
jcenter()
flatDir {
dirs 'libs'
}
maven {
url "http://maven.aliyun.com/nexus/content/groups/public"
}
}
Ionic2 使用
Ionic2添加頁(yè)面模板
ionic g page xxx頁(yè)面跳轉(zhuǎn)
引入import {NavController} from 'ionic-angular'
在類中通過push和pop方法跳轉(zhuǎn)或返回上個(gè)頁(yè)面:
this.navCtrl.push(demoPage);
this.navCtrl.pop()頁(yè)面間的參數(shù)傳遞
引入import {NavParams} from 'ionic-angular'
跳轉(zhuǎn)時(shí)傳入?yún)?shù)：this.navCtrl.push(demoPage, {item: 'value'})
跳轉(zhuǎn)后的頁(yè)面通過get方法獲取值:let temp = this.navParams.get('item')select/radioGroup的默認(rèn)選擇問題
官方文檔中給出的方法是在html中使用屬性selected="true"/ checked="true";
目前來看該方法不起作用栅迄，查看issue站故，發(fā)現(xiàn)需通過ngModel綁定變量，設(shè)定變量的初始值毅舆。搜索框
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>
@Component({
templateUrl: 'search/template.html',
})
class SearchPage {
searchQuery: string = '';
items: string[];
constructor() {
this.initializeItems();
}
initializeItems() {
this.items = [
'Amsterdam',
'Bogota',
...
];
}
getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}
- ionic2頁(yè)面切換數(shù)據(jù)不刷新
在tabs模板下西篓，切換頁(yè)面，初始化的方法只會(huì)執(zhí)行一次憋活，但一些動(dòng)態(tài)從服務(wù)器獲取的數(shù)據(jù)是希望每次進(jìn)入頁(yè)面時(shí)都重新獲取刷新的岂津，這就需要對(duì)ionic的頁(yè)面生命周期有一定了解，可以將數(shù)據(jù)請(qǐng)求刷新的方法放在ionViewWillEnter中悦即。ionic2的生命周期如下：
| 事件名稱 | 事件說明 |
|---|---|
| ionViewDidLoad | 頁(yè)面加載完畢觸發(fā)吮成。該事件發(fā)生在頁(yè)面被創(chuàng)建成 DOM 的時(shí)候橱乱，且僅僅執(zhí)行一次。如果頁(yè)面被緩存（Ionic默認(rèn)是緩存的）就不會(huì)再次觸發(fā)該事件赁豆。該事件中可以放置初始化頁(yè)面的一些事件仅醇。 |
| ionViewWillEnter | 即將進(jìn)入一個(gè)頁(yè)面變成當(dāng)前激活頁(yè)面的時(shí)候執(zhí)行的事件。 |
| ionViewDidEnter | 進(jìn)入了一個(gè)頁(yè)面且變成了當(dāng)前的激活頁(yè)面魔种，該事件不管是第一次進(jìn)入還是緩存后進(jìn)入都將執(zhí)行析二。 |
| ionViewWillLeave | 將要離開了該頁(yè)面之后變成了不是當(dāng)前激活頁(yè)面的時(shí)候執(zhí)行的事件。 |
| ionViewDidLeave | 在頁(yè)面完成了離開該頁(yè)面并變成了不是當(dāng)前激活頁(yè)面的時(shí)候執(zhí)行的事件节预。 |
| ionViewWillUnload | 在頁(yè)面銷毀和頁(yè)面中有元素移除之前執(zhí)行的事件叶摄。 |
| ionViewDidUnload | 在頁(yè)面銷毀和頁(yè)面中有元素移除之后執(zhí)行的事件 |
阻止點(diǎn)擊事件傳遞方法
(click)="do(); $event.stopPropagation()"-
修改應(yīng)用圖標(biāo)和啟動(dòng)畫面
- 找到合適的圖標(biāo)文件，png格式
- 替換項(xiàng)目resources文件夾下的icon.png
- 項(xiàng)目路徑下運(yùn)行
ionic resources命令安拟，該命令為所有platform生成對(duì)應(yīng)分辨率的圖片 - 若想針對(duì)不同platform使用不同圖標(biāo)蛤吓，圖片復(fù)制到resources下對(duì)應(yīng)platform文件夾下，再運(yùn)行
ionic resources
ionic resources對(duì)應(yīng)的服務(wù)似乎不太穩(wěn)定糠赦，也可以通過在線網(wǎng)站圖標(biāo)工廠
修改應(yīng)用名稱
修改根目錄下config.xml文件：
<widget id="com.ionframework.demo">会傲，id對(duì)應(yīng)應(yīng)用的包名
<name></name>對(duì)應(yīng)應(yīng)用名稱，直接修改Android的values文件沒有效果解決Splash后出現(xiàn)短暫白屏問題
修改config.xml：
添加<preference name="AutoHideSplashScreen" value="false"/>
注釋掉<preference name="SplashScreenDelay" value="3000"/>關(guān)于crosswalk
crosswalk是針對(duì)安卓設(shè)備的一個(gè)webview插件拙泽，性能較好淌山，目前ionic2的demo里不會(huì)自帶crosswalk。官方的說法是它們發(fā)現(xiàn)只有在低于4.x.x的安卓系統(tǒng)上顾瞻，ionic應(yīng)用運(yùn)行性能不穩(wěn)定泼疑，而4.x.x的設(shè)備在Google的統(tǒng)計(jì)里，全球只有不到11%荷荤。
Angular2雙向綁定
ngModule
<ion-input type="text", [(ngModule)]="inputTN"></ion-input>
ts文件中
private inputTN;
let tn = this.inputTN;
需要先定義變量名退渗。
Angular2依賴注入
在自定義了一個(gè)http服務(wù)類后，頁(yè)面中引用方法報(bào)錯(cuò)蕴纳，原因是沒有給服務(wù)類添加注解@Injectable()会油，@Injectable()標(biāo)志著一個(gè)類可以被一個(gè)注入器實(shí)例化;通常來講,在試圖實(shí)例化一個(gè)沒有被標(biāo)識(shí)為@Injectable()的類時(shí)候,注入器將會(huì)報(bào)告錯(cuò)誤
Ionic2引入第三方j(luò)s庫(kù)
應(yīng)用中想實(shí)現(xiàn)一個(gè)頁(yè)面，進(jìn)入時(shí)顯示根據(jù)設(shè)備uuid生成的二維碼古毛，雖然barcodescanner可以實(shí)現(xiàn)生成二維碼钞啸，但會(huì)打開一個(gè)Activity，這樣體驗(yàn)不符合需求喇潘。于是想到引用第三方的js庫(kù)，如qrcode.js等梭稚。
然而Ionic2使用typescript颖低，ts中是無法直接調(diào)用js的。這里網(wǎng)上給出了兩種方案弧烤。
- 引入js文件忱屑，通過declarations.d.ts文件聲明引用變量蹬敲。
- 通過types庫(kù)下載qrcode。
方案2并沒有成功莺戒，方案1的具體過程以qrcode為例伴嗡，如下：
- 從github下在需要的js文件，
jquery.min.js和qrcode.js - 文件復(fù)制到項(xiàng)目'/src/assets/js'目錄下从铲，js目錄是自己新建的
- 在index.html中引入：
<script src="assets/js/jquery.min.js"></script> <script src="assets/js/qrcode.min.js"></script> - 在src目錄下的
declarations.d.ts中申明qrcode的方法變量：
declare var QRCode; - 完成以上步驟后瘪校，就可以在ts中調(diào)用qrcode的方法，例如在頁(yè)面上顯示一個(gè)文本轉(zhuǎn)換的二維碼：
<div id="qrImage" class="qrcode-image"></div>
let qrImage = document.getElementById('qrImage'); new QRCode(qrImage, 'test');
獲取設(shè)備分辨率
window.screen.width * window.devicePixelRatio; window.screen.height * window.devicePixelRatio;
隱藏滾動(dòng)條
發(fā)現(xiàn)在部分設(shè)備上會(huì)顯示滾動(dòng)條名段，解決方法：修改app.sccs阱扬，添加如下代碼：
::-webkit-scrollbar {
display: none !important;
}
編譯
ionic build android --prod --release， --prod是壓縮模式伸辟，編譯出來的app啟動(dòng)速度變快麻惶，減少splash時(shí)間
--release是簽名打包，具體可見Ionic2 安卓簽名打包;
Ios有一特殊的地方信夫，正常編譯出來的都是.app文件窃蹋，需要導(dǎo)入ITouch中生成ipa。后來發(fā)現(xiàn)静稻，使用ionic run ios --prod安裝到真機(jī)時(shí)警没，/ios/build/下會(huì)多出device目錄，該目錄下有現(xiàn)成ipa姊扔，省去iTouch這一步惠奸。
