ionic2中ThemeableBrowser插件的使用——App内嵌浏览器

参考：ThemeableBrowser

       需要注意的是低版本的ionic2项目可能无法使用该插件，尽管可以根据官方给出的成功下载好插件，在使用的过程中也会发现不可用的情况：ThemeableBrowser不存在，引入不了项目。

       至于rc版和beta版还有什么不同，可以查看：https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

       而当前demo的ionic版本是rc版。

demo如下：

home.html

<span style="font-size:18px;"><ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>

  <ion-list>

    <ion-item>
      <ion-label fixed>网址</ion-label>
      <ion-input type="text" [(ngModel)]="url"></ion-input>
    </ion-item>

  </ion-list>

  <button ion-button (click)="launchFromThemeableBrowser()">Open From ThemeableBrowser</button>
</ion-content>
</span>

home.ts

<span style="font-size:18px;">import { Component } from '@angular/core';

import { NavController, Platform } from 'ionic-angular';
import {ThemeableBrowser} from "ionic-native";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  url: string = 'http://www.baidu.com';

  constructor(private navCtrl: NavController, private platform: Platform) {

  }

  // can add options from the original InAppBrowser in a JavaScript object form (not string)
  // This options object also takes additional parameters introduced by the ThemeableBrowser plugin
  // This example only shows the additional parameters for ThemeableBrowser
  // Note that that `image` and `imagePressed` values refer to resources that are stored in your app

  /*private options = {
    statusbar: {
      color: '#2eb3fe'
    },
    toolbar: {
      height: 44,
      color: '#2eb3fe'
    },
    title: {
      color: '#ffffffff',
      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
  };*/

  private options = {
    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
  };

  launchFromThemeableBrowser() {

    let browser = new ThemeableBrowser(this.url, '_self', this.options);


    //browser.show();
    //console.log(browser.show());
    /*this.platform.ready().then(() => {

    });*/
  }

}
</span>

        打包运行后，你可能看到了不是自己想要的效果，至少跟官方提供的例子不太像。因为官方的例子还含有 关闭按钮、后退等按钮。这里可以试试同位置的点击效果。发现事件可以被响应，如点击关闭按钮处的地方发现“真的”会关闭。那么说明只是图片没有被显示而已。

既然如此，并且插件又是原生插件，找找案例中的图片，会发现在：

       需要将这些图片，移到如下目录：（这里以安卓为例）

　　　将ThemeableBrowser封装到服务中：

browser.service.ts

/**
 * Created by admin on 2016/11/8.
 */
import { Injectable } from "@angular/core";
import { ThemeableBrowser } from "ionic-native";

@Injectable()
export class BrowserService {
  // can add options from the original InAppBrowser in a JavaScript object form (not string)
  // This options object also takes additional parameters introduced by the ThemeableBrowser plugin
  // This example only shows the additional parameters for ThemeableBrowser
  // Note that that `image` and `imagePressed` values refer to resources that are stored in your app
  // 打开浏览器的配置
  private options: any = {
    statusbar: {
      color: '#2eb3feff'
    },
    toolbar: {
      height: 44,
      color: '#2eb3feff'
    },
    title: {
      color: '#ffffffff',
      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
  };

  constructor(private url: string, customButtons: any, menu: any) {
    this.options.customButtons = customButtons;
    this.options.menu = menu;
  }

  launch() {
    let browser = new ThemeableBrowser(this.url, '_self', this.options);

    return browser;
  }
}

　　使用示例，如：

let browser: ThemeableBrowser = new BrowserService('这里放链接，如http://www.baidu.com', [], {}).launch();

let browser: ThemeableBrowser = new BrowserService(AppHttpService.URL_HELP, [
      {
        image: 'share',
        imagePressed: 'share_pressed',
        align: 'right',
        event: 'sharePressed'
      }
    ], {
      image: 'menu',
      imagePressed: 'menu_pressed',
      title: 'Test',
      cancel: 'Cancel',
      align: 'right',
      items: [
        {
          event: 'helloPressed',
          label: 'Hello World!'
        },
        {
          event: 'testPressed',
          label: 'Test8!'
        }
      ]
    }).launch();

    browser.on('sharePressed').subscribe((data) => {

      alert('share');
    }, (err) => {

      alert('share:error');
      console.error('onError');
    });

let browser: ThemeableBrowser = new BrowserService(url, [
      {
        image: 'share',
        imagePressed: 'share_pressed',
        align: 'right',
        event: 'sharePressed'
      }
    ], {}).launch();

    browser.on('sharePressed').subscribe((data) => {
      SocialSharing.share(AppInfoService.SHARE_NOTICE_TITLE, '', '', url).then(() => {

      }, (err) => {
        // Error!
        alert('错误：分享失败！' + err);
      });
    }, (err) => {
      alert('错误：哇靠，居然分享失败了~没事，再来试下');
    });