使用 Cordova InAppBrowser 插件和 Ionic 2+ 打开 URL

2019-01-10 08:00:00 · 飞浪

了解如何使用 InAppBrowser Cordova 插件和 Ionic Native 3.x 在 Ionic 2 应用程序中打开外部 URL 或使用需要 webview 的第三方服务。

介绍

在本教程中，我们将了解如何使用 InAppBrowser Cordova 插件和 Ionic Native 3.x+ 在 Ionic 2+ 应用程序中打开外部 URL 或使用需要打开 Web 视图的第三方服务（例如实现社交身份验证和支付网关）。

Ionic Native 是一组围绕 Cordova 插件的包装器，允许 Ionic 开发人员以 Angular 方式使用本机插件，即使用可观察对象而不是丑陋的回调。

要求

在构建 Ionic 2+ 应用程序之前，您需要满足一些要求：

Node.js 和 NPM。
适用于 Android 应用程序的 Java 和 Android SDK。
为 Android 应用设置 JAVA_HOME 和 ANDROID_HOME 系统变量。
适用于 iOS 应用程序的 MAC 系统和 XCode。
适用于 UWP 应用的 Windows。
Ionic CLI 和 Cordova。

要安装 Node.js 和 NPM，您可以前往其官方网站并获取适合您的操作系统的安装程序。

如果您需要针对 Android 平台，请先访问其官方网站并按照说明安装 Java。然后安装此链接提供的 Android SDK 。

如果您成功安装了 Node.js 和 NPM，下一步是安装 Cordova 和 Ionic CLI。

安装 Cordova 和 Ionic CLI

如果您尚未安装 Ionic CLI 和 Cordova，那么您需要先安装它们：

继续，打开终端或命令提示符并输入：

      npm install -g cordova
npm install -g ionic
    

这些命令应该在你的开发机器上全局安装 cordova 和 ionic。

现在您应该能够生成一个新的 Ionic 项目。

生成 Ionic 2+ 项目

让我们先创建一个新的 Ionic 2+ 应用程序。打开终端或命令提示符，然后运行以下命令：

      ionic start InAppBrowserDemo blank

生成新的 Ionic 项目后，导航到项目根文件夹，然后添加目标 Cordova 平台。就我而言，我只能添加 Android，因为我使用的是 Ubuntu，但如果您使用的是 MAC 系统，您也可以定位 iOS。因此，请继续运行：

      ionic cordova platform add android
ionic cordova platform add ios
    

PS 如果您使用的是 Windows，您还可以定位通用 Windows 平台 (UWP)：

      ionic cordova platform add windows

现在，添加目标平台后，您可以安装 InAppBrowser 插件。

什么是 InAppBrowser？

InAppBrowser 是一个原生 Cordova 插件，可用于将应用内浏览器添加到使用 Cordova 框架或任何基于 Cordova 的框架（如 Ionic）创建的混合移动应用程序中。

您可以从此Github 存储库找到有关 InAppBrowser 的更多信息。

安装 InAppBrowser Cordova 插件和相应的 Ionic Native Wrapper

InAppBrowser 插件可从 npm 获得，因此要安装它，只需在项目根文件夹中运行以下命令：

      ionic plugin add cordova-plugin-inappbrowser --save

npm install --save @ionic-native/in-app-browser

首先导入 InAppBrowser 原生插件：

      import { InAppBrowser } from "@ionic-native/in-app-browser";
    

然后将其添加到提供商列表中：

      @NgModule({
  declarations: [MyApp, HomePage],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}
    

您现在可以通过依赖注入使用 InAppBrowser API，它为您提供了 InAppBrowser 的实例，可用于调用不同的方法来在 Ionic 2+ 应用程序内创建和打开应用程序浏览器。

打开src/pages/home/home.ts并添加：

      import { Component , OnInit } from '@angular/core';
import { NavController  } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{

    constructor(public navCtrl: NavController,private iab: InAppBrowser) {

    }

    ngOnInit(){

        const browser = this.iab.create('https://www.techiediaries.com','_self',{location:'no'});

    }

}
    

因此，我们首先从 @ionic-native/in-app-browser 导入 InAppBrowser，然后通过组件构造函数注入它。

然后我们调用 .create() 方法来创建并打开一个应用内浏览器，当调用组件 OnInit 钩子时，即当组件完全初始化时，该浏览器导航到techiediaries.com网站。

您可以在Ionic Native 官方网站找到 InAppBrowser 的完整文档。

运行应用程序

现在您已经创建了使用 InAppBrowser 在移动应用程序内打开外部 URL 的简单示例，现在是时候在实际设备中运行该应用程序了：

由于我的目标是 Android，因此我将使用 Android 手机，但您可以随意使用任何受支持的平台并使用相应的命令来运行您的应用程序。

      ionic run android

对于 iOS 使用：

      ionic run ios

对于 Windows 使用：

      ionic run windows

请注意，您还可以使用 serve 命令在浏览器中测试您的应用程序：

      ionic serve

然后，使用浏览器访问http:localhost:8200。

结论

因此，我们已经了解了如何使用 InAppBrowser Cordova 插件与 Ionic 2+ 和 Ionic Native 添加应用内浏览器，该浏览器可用于不同的事情，例如打开外部 URL、向您的应用添加第三方身份验证或实现任何需要连接到外部网关的服务等。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 Cordova InAppBrowser 插件和 Ionic 2+ 打开 URL

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

@NgModule({ declarations: [MyApp, HomePage], imports: [BrowserModule, IonicModule.forRoot(MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage], providers: [ StatusBar, SplashScreen, InAppBrowser, { provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule {}

import { Component , OnInit } from '@angular/core'; import { NavController } from 'ionic-angular'; import { InAppBrowser } from '@ionic-native/in-app-browser'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage implements OnInit{ constructor(public navCtrl: NavController,private iab: InAppBrowser) { } ngOnInit(){ const browser = this.iab.create('https://www.techiediaries.com','_self',{location:'no'}); } }