npm 包 cordova-plugin-inappbrowser-wkwebview 使用教程

在前端开发中，我们常常需要在移动应用中打开外部链接，例如打开一个网页，或者调用第三方登录等接口。cordova-plugin-inappbrowser-wkwebview 是一个cordova插件，用于在cordova应用中打开外部链接，并支持iOS 8以上使用WKWebView引擎。

安装

在安装使用前，需要确认以下条件：

• 安装cordova

npm install -g cordova

• 创建cordova项目

cordova create myApp com.example.myApp myApp

• 添加iOS平台

cd myApp
cordova platforms add ios 

• 安装cordova-plugin-inappbrowser

cordova plugin add cordova-plugin-inappbrowser

• 安装cordova-plugin-inappbrowser-wkwebview

cordova plugin add cordova-plugin-inappbrowser-wkwebview

使用

cordova-plugin-inappbrowser-wkwebview 支持五种打开链接的方式：通过系统浏览器打开、内嵌浏览器打开、系统浏览器打开并调用外部应用、通过自定义webview打开、通过WKWebview打开。具体方法和参数如下：

1. 通过系统浏览器打开链接

cordova.InAppBrowser.open('https://www.example.com', '_system');

该方法中第一个参数为需要打开的链接地址，第二个参数为打开方式。"_system"表示在系统浏览器中打开。例如在iOS中会调用SFSafariViewController打开链接。

2. 内嵌浏览器打开链接

cordova.InAppBrowser.open('https://www.example.com', '_blank', 'location=yes');

该方法中第二个参数为打开方式。"_blank"表示在内嵌浏览器中打开。第三个参数为打开时是否显示地址栏等信息。

3. 系统浏览器打开并调用外部应用

cordova.InAppBrowser.open('https://www.example.com', '_system', 'location=yes');

该方法中第二个参数为打开方式。"_system"表示在系统浏览器中打开，并调用其他应用打开。

4. 通过自定义webview打开

var ref = cordova.InAppBrowser.open('https://www.example.com', '_blank', 'location=no');
ref.addEventListener('loadstart', function(event) { alert(event.url); });

该方法返回一个InAppBrowser对象，并可监听相应事件。

5. 通过WKWebview打开

cordova.InAppBrowser.open('https://www.example.com', '_blank', 'usewkwebview=yes');

该方法中第三个参数为指定使用WKWebview打开。

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ----- --------------- -----------------------------
    ------------------- ------------
  -------
  ------
    ---------- -----------
    ------- ---------------------------- ----------------
    ------- ----------------------
            --------------------------
    --------
    -------- ------------- -
        ---------------------------------------------------- --------- ----------------
    -
    ---------
  -------
-------

总结

通过cordova-plugin-inappbrowser-wkwebview，我们可以在移动应用中方便地打开外部链接，并支持各种打开方式。该插件较为实用，具有较高学习及指导意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573fb81e8991b448e9d70