ionic3集成进微信公众号使用微信自带导航栏的方法

        将开发好的ionic3项目加入到微信公众号中,在微信浏览器访问,使用ionic的自带的导航栏难免会跟微信自带的导航有冲突,而且会出现双导航栏的现象,如下。

ionic3集成进微信公众号使用微信自带导航栏的方法_第1张图片

        问题一:在微信浏览器中,IOS系统跟安卓系统的返回机制又有不同,IOS的微信浏览器的导航是返回上一层,而安卓的微信浏览器的导航的返回是直接返回微信界面。所以去掉导航栏后要考虑好适配IOS的导航跟安卓的返回键。

        问题二:另一种情况是弹出了输入法和内置的选项,如:ion-datetime、ion-select等有弹出层的情况下,按下返回,应先去除弹出层,在按返回返回上一层。

ionic3集成进微信公众号使用微信自带导航栏的方法_第2张图片

        问题三:还有一种情况是部分人反映的跳转到首页后页面乱跳的问题。这个问题考虑了很久,依旧没有想到特别好的解决方案,所以目前只能做到返回到首页后不再跳转到任何页面,只停留在首页。

具体的实现逻辑是使用浏览器的popstate来接管浏览器的历史浏览记录,代码如下:

ionic3集成进微信公众号使用微信自带导航栏的方法_第3张图片

/**

  * 浏览器返回按钮及安卓返回键

  */

  backEvent(){

//设置一个在页面手动pop的初始标识

    window.sessionStorage.setItem('popFlag','0');

    window.addEventListener("popstate",()=>{

  //判断是否打开输入法键盘

      if(this.keyboard.isOpen()){

    //关闭键盘

        this.keyboard.close();

        history.pushState(null, null, location.href);

      }else{

          //获取NavController

          let activeNav: NavController = this.appCtrl.getActiveNav();


  //只有网址的情况,如:http://www.baidu.com

          if(location.href.indexOf("#")==-1){

    //设置返回首页的一个标识

            window.sessionStorage.setItem('backFlag',"backBtn");

            history.pushState(null, null, location.href);

            return;

          }


  //返回首页,历史记录的Url中有login,如:http://www.baidu.com/#/login

          if(location.href.indexOf("login")>-1){

//设置返回首页的一个标识

            window.sessionStorage.setItem('backFlag',"backBtn");

            history.pushState(null, null, location.href);

            return;

          }

  //非首页返回的登录页,历史记录的Url中有上一页面的记录,如:http://www.baidu.com/#/tabs/%E5%85%B3%E4%BA%8E%E6%88%91/password-modify

          if(location.href.indexOf("password-modify")>-1){

            this.rootPage = 'LoginPage'; 

            history.pushState(null, null, location.href);

            return;

          }else{

              //判断是否可以返回上一页

              if (activeNav.canGoBack()) {

                //取出在session中设置的手动pop标识

                let popFlag = window.sessionStorage.getItem('popFlag');

//popFlag  0:表示通过安卓返回键或通过IOS微信导航栏返回  1:手动返回

                if(popFlag != "1"){

                    //获取选项控件(如:弹出的时间控件、弹出的选项控件等。。)

                    let backdrop = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml","ion-backdrop");

                    if(backdrop.length>0){

  //模拟执行click操作,关闭控件

                      backdrop[0].click();

                      history.pushState(null, null, location.href);

                    }else{

                      activeNav.pop();

}

                }

//执行成功后将该标识重新设置成初始值

window.sessionStorage.setItem('popFlag',"0");

              }

          }

      }

    },false);

  }

        该方法直接放在app.component.ts的constructor中,在手动pop的地方将sessionStorage中的popFlag设置为1即可,

        在首页的的ionViewWillEnter勾子中要特殊处理一下。

ionic3集成进微信公众号使用微信自带导航栏的方法_第4张图片

        该方法能解决大部分问题项目运行在微信浏览器的问题,当然它不是完美的,如果有修改的地方请友情提出。

你可能感兴趣的:(ionic3集成进微信公众号使用微信自带导航栏的方法)