关于ionic和原生混合开发时,ionic方面内容的物理返回键问题

问题描述:当ionic和原生混合开发时,ionic由于不能使用插件,所以ionic方向点击手机的物理返回键是没有用的。

解决方法:

  大致描述:在index.html中编写一个方法,使原生方向可以调用这个方法,并且返回给原生一个值,当用户点击返回时,原生去调用这个方法判断这个返回值已确定是否用户可以返回上一个页面。同时因为判断是哪个页面需要用到NavController,所以需要在自己的页面中,最好是登录页面中写一个类,这个类来编写这个方法。

步骤一:在登录页面定义一个类,以及编写类里面的方法:

需要使用activePage instanceof来判断哪个页面是可以物理键返回的,哪个页面是不可以物理键返回的

代码:

class BackPreviousPage {

    n = 'no';
    y = 'yes'
    isBackPrevious() {
        let activeVC = nav.getActive();
        let activePage = activeVC.instance;
        if (activePage instanceof HomePage || activePage instanceof LoginPage) {
            return this.n;
        } else {
            nav.pop();
            return this.y;
        } 
    }

}


var backPreviousPage: BackPreviousPage = new BackPreviousPage();
window['backPreviousPage'] = backPreviousPage;

其中的nav是NavController;

截图:

步骤二:定义nav

在页面的全局中定义一个nav,然后在登录页面的constructor中初始化nav。这也为什么会写在登录页面的原因,因为登录页面还没有跳转到原生的页面,同时原生可以在任何时候调用index.html 中的方法,所以这个方法要提前定义好

代码:在全局定义nav

var nav: any;

截图:

代码:在constructor中初始化nav:

nav = this.navCtrl;

截图:

第三步:在index.html中定义原生要调用的方法

代码:

<script type="text/javascript">
        function backPrevious() {
            let a = window.backPreviousPage.isBackPrevious();
            return a;
        }
    </script>

截图:

之后原生来调用方法backPrevious,确定返回的值是y还是n来判断用户点击了物理返回键之后是否返回上一个页面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值