一概述

App使用过程中有使用系统自带浏览器打开App内部链接的需求，比如App升级时通过点击App内部链接调用系统自带浏览器下载更新包。

Ionic App 通过 Cordova 的插件：InAppBrowser实现该功能。本篇文章将通过实际案例介绍InAppBrowser的使用。

二 Ionic App环境搭建

下载Ionic App官方案例

ionic start myApp tabs

添加平台

ionic platform add android

三安装并使用InAppBrowser

3.1 安装InAppBrowser

ionic plugin add cordova-plugin-inappbrowser

3.2 使用InAppBrowser

为方便起见，直接在Ionic官方案例dash页面中使用InAppBrowser。

修改HTML文件：在刚下载的Ionic项目中找到tab-dash.html，在自定义标签ion-content最后添加下面代码：

<!-- InAppBrowser example begin -->
<p>
  <b>点击下面的按钮，将在系统自带浏览器中打开链接。</b>
</p>
<button class="button button-full button-positive" ng-click="openInExternalBrowser()">
  在系统自带浏览器中打开链接
</button>
<!-- InAppBrowser example end -->

修改JS文件：在刚下载的Ionic项目中找到controllers.js，在控制器DashCtrl最后添加下面代码：

// InAppBrowser example begin
$scope.openInExternalBrowser = function()
{
  // 在系统自带浏览器中打开链接
  window.open('https://xiaogliu.github.io/','_system','location=yes');
};
// InAppBrowser example end

四构建APP

现在已经可以构建APP测试了：

ionic build android -release

更多打包Ionic APP的信息可查看Ionic打包Android apk

完整代码请参考GitHub上这个仓库Cordova_InAppBrowser_Plugin_Example

参考资料

【1】Cordova InAppBrowser Plugin Example using ionic framework

一 概述