参考：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('错误：哇靠，居然分享失败了~没事，再来试下');
});