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的如下目录中（注意次步很重要，如果忽略则没有返回按钮等）

第五步 点击运行到模拟器

按照以上的步骤走，就完成了。下面展示运行截图：

文章总结

自此，该教程结束；文中有大量的不足的地方欢迎留言指正，若有什么疑问的地方也可以大家一起探讨。整理文章不易，不喜勿喷。