ionic應用程式跳轉其它網站地址實現（themeablebrowser）相當於WebView
背景介紹
可謂Android或者IOS中使用WebView給於了開發者大大的福利。那Ionic專案如何實現類似的功能呢？為了實現在ionic應用程式中呼叫其它網站地址，因此引出了以下的文章。注意：本文章適合簡單使用若您需要更高階的開發建議進入官方網址研究（網址：點選開啟連結）
外掛簡介（官網直譯）：
這個外掛是org.apache.cordova.inappbrowser的一個fork。它試圖保留InAppBrowser的大部分功能。實際上，對於從InAppBrowser繼承的功能的完整列表，請參閱InAppBrowser的文件。
此外掛的目的是提供一個應用內瀏覽器，還可以配置為匹配您的應用程式的主題，以便為您的應用程式提供更加身臨其境的外觀和感覺，以及提供更一致的外觀並跨平臺感覺。
此外掛通過呼叫在現有CordovaWebView頂部啟動應用程式內檢視
圖片示例
給出幾個示例圖
示例一
來自微信 示例二
來自官網
內容正文：
1.外掛的安裝
cordova plugin add cordova-plugin-themeablebrowser
2.屬性整體展示
cordova.ThemeableBrowser.open('http://apache.org','_blank', {
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
}).addEventListener('backPressed',function(e) {
alert('back pressed');
}).addEventListener('helloPressed',function(e) {
alert('hello pressed');
}).addEventListener('sharePressed',function(e) {
alert(e.url);
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR,function(e) {
console.error(e.message);
}).addEventListener(cordova.ThemeableBrowser.EVT_WRN,function(e) {
console.log(e.message);
});
3.屬性介紹statusbar 僅適用於iOS7+。
color為RGBA Web十六進位制格式設定iOS 7+的狀態列顏色。例如。#fff0f0ff。預設為白色。僅適用於iOS 7+。
toolbar
height設定工具欄的高度。預設為44。
color以RGBA網路十六進位制格式設定瀏覽器工具欄顏色。例如。#fff0f0ff。預設為白色。另見image。
image將影象設定為標題模式下的瀏覽器工具欄背景。此屬性引用了本機映像資源，因此它依賴於平臺。
title
color以RGBA網路十六進位制格式設定標題文字顏色。例如。#fff0f0ff。預設為黑色。
staticText設定標題的靜態文字。此屬性覆蓋showPageTitle（見下文）。
showPageTitle當設定為true時，將顯示當前網頁的標題。
backButton
image設定後退按鈕的影象。此屬性引用了本機映像資源，因此它依賴於平臺。
imagePressed在後退按鈕處於按下狀態下設定影象。此屬性引用了本機映像資源，因此它依賴於平臺。
align將按鈕對齊到left或right。預設為left。
event當按下按鈕時，將給定文字作為事件名稱引發自定義事件。可選的。
forwardButton
image設定向前按鈕的影象。此屬性引用了本機映像資源，因此它依賴於平臺。
imagePressed在其按下狀態下設定正向按鈕的影象。此屬性引用了本機映像資源，因此它依賴於平臺。
align將前進按鈕對準left或right。預設為left。
event當按下向前按鈕時，將給定文字作為事件名稱引發自定義事件。可選的。
closeButton
image設定關閉按鈕的影象。此屬性引用了本機映像資源，因此它依賴於平臺。
imagePressed在其按下狀態下設定關閉按鈕的影象。此屬性引用了本機映像資源，因此它依賴於平臺。
align對齊left或關閉按鈕right。預設為left。
event當按下關閉按鈕時，將給定文字作為事件名稱引發。可選的。
menu
title單擊選單按鈕時設定選單標題。僅限iOS
cancel設定選單取消按鈕文字。僅限iOS
image設定選單按鈕的影象。此屬性引用了本機映像資源，因此它依賴於平臺。
imagePressed設定選單按鈕的影象處於其按下狀態。此屬性引用了本機映像資源，因此它依賴於平臺。
event當按下選單按鈕時，將給定文字作為事件名稱引發自定義事件。可選的。
align將選單按鈕對準left或right。預設為left。
items是選單開啟時要顯示的專案列表
event定義當單擊此選單項時將被引發的事件名稱。選單事件的回撥將接收一個包含以下屬性的事件物件：url是瀏覽器中顯示的當前URL，index是所選專案的索引items。
label定義選單項標籤文字。
customButtons是給定時將插入工具欄的物件列表。
image設定自定義按鈕的影象。此屬性引用了本機映像資源，因此它依賴於平臺。
imagePressed將自定義按鈕的影象設定為按下狀態。此屬性引用了本機映像資源，因此它依賴於平臺。
align將自定義按鈕對齊到left或right。預設為left。
event當按下自定義按鈕時，將給定文字作為事件名稱引發自定義事件。對自定義按鈕事件的回撥將接收到包含以下屬性的事件物件：url是瀏覽器中顯示的當前URL，index是所選按鈕的索引customButtons。
backButtonCanClose當沒有更多的返回時，允許返回按鈕關閉瀏覽器。否則，返回按鈕將被禁用。
disableAnimation當設定為true時，禁用瀏覽器顯示和關閉動畫。
fullscreen當設定為true，WebView將擴充套件到應用程式的完整高度，位於工具欄下方。該標誌與透明工具欄顏色結合可能允許工具欄按鈕浮動在WebView頂部。（記住，此外掛支援RGBA顏色格式。）可選。
4.注意
1.所有屬性都是可選的，幾乎沒有預設值。如果沒有給出屬性，則不會顯示相應的UI元素。
2.所有的影象資源都引用了本機資源束。所以所有的影象都需要先匯入本機專案。在Android的情況下，將查詢影象名稱R.drawable。例如。如果影象名稱是hello_world，R.drawable.hello_world將被引用。您可能已經注意到，ThemedBrowser添加了可選選單以及自定義按鈕，您可以使用它們來響應一些簡單的使用者操作。
5.使用在任何平臺
一次新增使用在所有平臺（不推薦使用）。
對於任何支援的物件image和imagePressed屬性，當您絕對無法匯入本機源時，有一些後備屬性可以使用，因為某些情況。
(\w+Button|menu|toolbar)
wwwImage就像是image載入來自Cordova的www目錄的影象。當您無法匯入本機資源時，這是一個後備解決方案。image儘可能使用財產。
wwwImagePressed就像是image載入來自Cordova的www目錄的影象。當您無法匯入本機資源時，這是一個後備解決方案。image儘可能使用財產。
wwwImageDensity當wwwImage和/或被wwwImagePressed給予時是需要的。由於這些影象沒有從資源束載入，所以密度是未知的，因此密度需要由此屬性設定。對應於iOS' @2x，@3x字尾。
例如：
cordova.ThemeableBrowser.open('http://apache.org','_blank', {
...
backButton: {
wwwImage: 'images/back.png',
wwwImagePressed: 'images/back_pressed.png',
wwwImageDensity: 2,
align: 'left',
event: 'backPressed'
}
...
});
6.對應平臺新增圖片資源
Android平臺
找到圖中的路徑(ThemeableBrowser/plugins/cordova-plugin-themeablebrowser/src/android/res/drawable-xhdpi)，將png圖示複製到如下路徑中(platforms/android/res/drawable-xhdpi)。
一般放在此目錄中即可，如需想要得到圖示更好的拓展，自行建立不同的圖示放在相應的位置。
示例截圖
注意：圖片中工具欄title字型有點小可以稍稍的改動。改動如下
找到圖中位置，提現圖中內容即可，內容如下：title.setTextSize(18);
IOS平臺
IOS平臺的新增稍稍有點麻煩，以下會截圖一步一步來。
第一步 找到外掛中圖片路徑
第二步 將第一步中的Resource資料夾複製在以下檔案中（如果給資料夾存在則直接覆蓋）
注意 “巢狀瀏覽器” 為APP名字
第三步 進入platform下的IOS專案中雙擊開啟如下檔案（即開啟Xcode）
第四步 在再將圖片檔案拖拽到Xcode的如下目錄中（注意次步很重要，如果忽略則沒有返回按鈕等）
第五步 點選執行到模擬器
按照以上的步驟走，就完成了。下面展示執行截圖：
文章總結
自此，該教程結束；文中有大量的不足的地方歡迎留言指正，若有什麼疑問的地方也可以大家一起探討。整理文章不易，不喜勿噴。