ionic5使用浏览器插件Themeable Browser与In App Browser

阳光穿透心脏的1/2处 2022-12-17 01:18 529阅读 0赞

### ionic5使用浏览器插件Themeable Browser与In App Browser ###

*  背景
 *  使用方式
 *   *  使用Themeable Browser
     *  使用In App Browser
 *  完整代码
 *  运行效果
 *  总结

# 背景 #

在使用Ionic开发APP时，为了在应用中打开或嵌入外部服务器页面，就需要用到浏览器插件，在Ionic官网的原生功能介绍中，提供了2种使用浏览的方式，分别为：  
Themeable Browser，官网地址：[https://ionicframework.com/docs/native/themeable-browser/][https_ionicframework.com_docs_native_themeable-browser]  
In App Browser，官网地址：[https://ionicframework.com/docs/native/in-app-browser/][https_ionicframework.com_docs_native_in-app-browser]

# 使用方式 #

下面我们就写一个demo，来使用这2个插件。  
首先先用一下指令创建一个ionic应用

ionic start test3 tabs

然后

cd test3

## 使用Themeable Browser ##

1、安装插件

ionic cordova plugin add cordova-plugin-themeablebrowser
    npm install @ionic-native/themeable-browser

2、在app.module.ts中导入，并加入到providers中

import {  ThemeableBrowser } from '@ionic-native/themeable-browser/ngx';
    
    @NgModule({ 
    	providers: [
    		ThemeableBrowser,
    	],
    })
    export class AppModule { }

具体如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center]  
3、在页面中使用Themable Browser

3.1 在页面的ts文件头部导入Themable Browser

import {  ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser/ngx';

3.2 在页面的ts文件中的构造方法中注入ThemeableBrowser

constructor(private themeableBrowser: ThemeableBrowser) {  }

3.3 在页面的ts文件中写一个处理方法

public buttonClick() { 
      const options: ThemeableBrowserOptions = { 
         statusbar: { 
             color: '#ffffffff'
         },
         toolbar: { 
             height: 44,
             color: '#f0f0f0ff'
         },
         title: { 
             color: '#003264ff',
             showPageTitle: true
         },
         backButton: { 
             image: 'back',
             imagePressed: 'back_pressed',
             align: 'left',
             event: 'backPressed'
         },
         forwardButton: { 
             image: 'forward',
             imagePressed: 'forward_pressed',
             align: 'left',
             event: 'forwardPressed'
         },
         closeButton: { 
             image: 'close',
             imagePressed: 'close_pressed',
             align: 'left',
             event: 'closePressed'
         },
         customButtons: [
             { 
                 image: 'share',
                 imagePressed: 'share_pressed',
                 align: 'right',
                 event: 'sharePressed'
             }
         ],
         menu: { 
             image: 'menu',
             imagePressed: 'menu_pressed',
             title: 'Test',
             cancel: 'Cancel',
             align: 'right',
             items: [
                 { 
                     event: 'helloPressed',
                     label: 'Hello World!'
                 },
                 { 
                     event: 'testPressed',
                     label: 'Test!'
                 }
             ]
         },
         backButtonCanClose: true
       }
    
       const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://www.baidu.com', '_self', options);
    
     }

3.4 在页面的html文件中添加一个按钮，并把上面写的方法绑定到click事件上，如下：

<ion-button (click)="buttonClick()">Test ThemeableBrowser</ion-button>

## 使用In App Browser ##

在Ionic中使用In App Browser的方式与使用ThemeableBrowser的方式很类似，下面介绍一下。  
1、安装插件

ionic cordova plugin add cordova-plugin-inappbrowser
    npm install @ionic-native/in-app-browser

2、在app.module.ts中导入，并加入到providers中

import {  InAppBrowser } from '@ionic-native/in-app-browser/ngx';
    
    @NgModule({ 
    	providers: [
    		InAppBrowser,
    	],
    })
    export class AppModule { }

具体如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 1]  
3、在页面中使用In App Browser

3.1 在页面的ts文件头部导入In App Browser

import {  InAppBrowser } from '@ionic-native/in-app-browser/ngx';

3.2 在页面的ts文件中的构造方法中注入InAppBrowser

constructor(private iab: InAppBrowser) {  }

3.3 在页面的ts文件中写一个处理方法

public buttonClick2() { 
        this.iab.create('https://www.baidu.com', '_self', 'location=no');
    }

3.4 在页面的html文件中添加一个按钮，并把上面写的方法绑定到click事件上，如下：

<ion-button (click)="buttonClick2()">Test In-App-Browser</ion-button>

# 完整代码 #

1、app.module.ts

import {  NgModule } from '@angular/core';
    import {  BrowserModule } from '@angular/platform-browser';
    import {  RouteReuseStrategy } from '@angular/router';
    
    import {  IonicModule, IonicRouteStrategy } from '@ionic/angular';
    import {  SplashScreen } from '@ionic-native/splash-screen/ngx';
    import {  StatusBar } from '@ionic-native/status-bar/ngx';
    
    import {  AppRoutingModule } from './app-routing.module';
    import {  AppComponent } from './app.component';
    
    import {  ThemeableBrowser } from '@ionic-native/themeable-browser/ngx';
    import {  InAppBrowser } from '@ionic-native/in-app-browser/ngx';
    
    @NgModule({ 
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
      providers: [
        StatusBar,
        SplashScreen,
        ThemeableBrowser,
        InAppBrowser,
        {  provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

2、ts文件代码

import {  Component } from '@angular/core';
    import {  ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser/ngx';
    import {  InAppBrowser } from '@ionic-native/in-app-browser/ngx';
    
    @Component({ 
      selector: 'app-tab1',
      templateUrl: 'tab1.page.html',
      styleUrls: ['tab1.page.scss']
    })
    export class Tab1Page { 
    
      constructor(private themeableBrowser: ThemeableBrowser, private iab: InAppBrowser) { }
    
      public buttonClick() { 
        console.log('test!!!');
        
        const options: ThemeableBrowserOptions = { 
          statusbar: { 
              color: '#ffffffff'
          },
          toolbar: { 
              height: 44,
              color: '#f0f0f0ff'
          },
          title: { 
              color: '#003264ff',
              showPageTitle: true
          },
          backButton: { 
              image: 'back',
              imagePressed: 'back_pressed',
              align: 'left',
              event: 'backPressed'
          },
          forwardButton: { 
              image: 'forward',
              imagePressed: 'forward_pressed',
              align: 'left',
              event: 'forwardPressed'
          },
          closeButton: { 
              image: 'close',
              imagePressed: 'close_pressed',
              align: 'left',
              event: 'closePressed'
          },
          customButtons: [
              { 
                  image: 'share',
                  imagePressed: 'share_pressed',
                  align: 'right',
                  event: 'sharePressed'
              }
          ],
          menu: { 
              image: 'menu',
              imagePressed: 'menu_pressed',
              title: 'Test',
              cancel: 'Cancel',
              align: 'right',
              items: [
                  { 
                      event: 'helloPressed',
                      label: 'Hello World!'
                  },
                  { 
                      event: 'testPressed',
                      label: 'Test!'
                  }
              ]
          },
          backButtonCanClose: true
        }
     
        const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://www.baidu.com', '_self', options);
    
      } 
    
      public buttonClick2() { 
        this.iab.create('https://www.baidu.com', '_self', 'location=no');
      }
    }

3、html文件代码

<ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title>
          Tab 1
        </ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content [fullscreen]="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <div id="container">
        
        <br />
        <br />
        <a href="http://www.baidu.com">百度</a>
        <br />
        <br />
        <ion-button (click)="buttonClick()">Test ThemeableBrowser</ion-button>
        <br />
        <br />
        <ion-button (click)="buttonClick2()">Test In-App-Browser</ion-button>
      </div>
    </ion-content>

# 运行效果 #

1、初始界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 2]  
2、点击百度超链接，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 3]  
3、点击 TEST THEMEABLE BROWSER按钮，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 4]  
4、点击 TEST IN-APP-BROWSER按钮，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 5]

# 总结 #

默认超链接打开浏览器的方式其实是开启了另一个应用，当屏幕滑动执行返回操作时不会回到第一个页面，而ThemeableBrowser和InAppBrowser都可以实现返回时自动回到第一个页面，但是ThemeableBrowser能够对浏览器的导航栏，菜单，标题等进行精确设定，相比InAppBrowser功能更强一些。

[https_ionicframework.com_docs_native_themeable-browser]: https://ionicframework.com/docs/native/themeable-browser/
[https_ionicframework.com_docs_native_in-app-browser]: https://ionicframework.com/docs/native/in-app-browser/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7b9e4ea64f904d00a4f8cd705b4713f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/eea02f98123b45f382aca43d1d7a8cc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/c8f1619603014536a400c1ce0cf8cc73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/f992b61d8c9a49a2ae84cde2356823bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/0128f8b0b3074186bc5df0eea31e10a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/273f45fe0cbc45b5a53167c243bfa45a.png