Ionic记录

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"。

转载于:https://juejin.im/post/5c823a946fb9a049ef2761b0