Ionic記錄

Kadima發表於2019-03-08

1.重新定義導航欄的返回函式

html:

<ion-header>  <ion-navbar #navbar>    <ion-title>抽獎</ion-title>  </ion-navbar></ion-header>複製程式碼

ts:

 @ViewChild(Navbar) navBar: Navbar;
 //重新定義 ionViewDidLoad() {    this.navBar.backButtonClick = this.backButtonClick;  } //getViews獲取nav路由棧
  backButtonClick = (e: UIEvent) => {    let view = this.navCtrl.getViews();    this.navCtrl.popTo(view[0])  }複製程式碼

2.支付寶外掛可用cordova-alipay-chenyu-ionic。

$ cordova plugin add cordova-alipay-chenyu --variable APP_ID=你的支付寶id
$ npm i cordova-alipay-chenyu-ionic --save複製程式碼

3.tab跳轉

this.navctrl.parent.select(num);複製程式碼

4.普通page頁面返回鍵修改

返回tabs中的page時：

this.navCtrl.popTo(this.navCtrl.getByIndex(this.navCtrl.length()-3));複製程式碼

返回上一級可以：

this.navCtrl.popTo('MatchPage');複製程式碼

同時：

this.navCtrl.getViews();  //獲取當前nav的棧
view[0].id    //可以獲取的nav棧其實page複製程式碼

5.ionic3嵌入ifame，傳輸資料

嵌入iframe：
html:<iframe id="iframe" class="iframe" height="100%" width="100%"            frameborder="no" border="0" marginwidth="0"            [src]="srcUrl"            (load)="loaded()">       </iframe>ts: this.srcUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.data['iframe']);
APP向iframe傳送資料：
window.frames[0].postMessage(params, 'https://www.shenyou.cn');
APP接受傳送回的資料：
iframe的onload事件中接收：
loaded() {    let that = this;    if (window.addEventListener) {      window.onmessage = function(event){        that.getIframeData(event);      }      // window.addEventListener('message', function (event) {      //   that.getIframeData(event);      // }, false);      window.removeEventListener('message', that.getIframeData,false);    }  }切記：接受時不要使用addEventListener來監聽，不利於銷燬監聽事件，造成傳輸資料重複接受。選擇window.onmessage。複製程式碼

6.ionic3生成二維碼

  1. index.html中引入qrcode.min.js（http://davidshimjs.github.io/qrcodejs/下載，放入src/assets/下）；
  2. 所需page.ts中宣告QRCode（宣告QRCode時在ionic中如果使用了懶載入一定要將QRCode的宣告放在懶載入注入IonicPage前面）

    declare var QRCode;複製程式碼

3.html and ts

<div id='qrcode'></div>  
  
var qrcode_c = document.getElementById("qrcode_c");//獲取生成二維碼的節點
    if(qrcode_c){
        var thisURL = "http://www.cnblogs.com/yisheng163/p/4472687.html";//生成二維碼所需資料
        var qrcode = new QRCode(qrcode_c, { //設定二維碼顯示的大小等資訊
            width : 60,
            height : 60
       });
    qrcode.makeCode(thisURL);//生成二維碼
}
複製程式碼

7.文字頁面長按複製（ionic預設不可複製）

page.scss:

.scroll-content {    -webkit-user-select: auto !important;    -moz-user-select: auto !important;    -ms-user-select: auto !important;    user-select: auto !important;  }  .selectable {    -webkit-user-select: auto; //控制網頁內容選擇範圍  }複製程式碼

page.html:

<ion-content  overflow-scroll="true">    <div class='context selectable' [innerHTML]="article?.content" (click)="targetClick($event)"></div>
</ion-content>複製程式碼

class--selectable不能加在ionic自己的標籤上，載入文字的包含標籤上，ion-content標籤新增 overflow-scroll="true"。


相關文章