ionic2中ThemeableBrowser外掛的使用——App內嵌瀏覽器

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('錯誤:哇靠,居然分享失敗了~沒事,再來試下');
});