Nativescript-WebView-Interface

Nativescript 插件，用于 WebView 和 Android/iOS 之间的双向通信

安装

在终端中，进入您的应用根目录并执行

tns plugin add nativescript-webview-interface

插件安装完成后，您需要将插件文件复制到您的 webView 内容文件夹中。例如

cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/

使用方法

为了快速开始，您可以查看这个演示应用和博客文章。如果您使用此插件与 Angular 2 一起，您可以查看此演示应用的 angular 版本。

在原生应用内部

在您的页面中插入一个 web-view。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
....
<web-view id="webView"></web-view>
....
</Page>

在您的 JavaScript 文件中初始化 WebViewInterface 插件。

var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;

function pageLoaded(args){
    page = args.object;
    setupWebViewInterface(page) 
}

// Initializes plugin with a webView
function setupWebViewInterface(page){
    var webView = page.getViewById('webView');
    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}

注意：请注意在上述示例中，我们没有在模板中设置 src，而是在 WebViewInterface 的构造函数中传递了它。这是推荐使用此插件的方法，以避免在某些设备上从 web-view 到 android 的通信有时不工作的问题。

使用 WebViewInterface 类的任何 API 方法

function handleEventFromWebView(){
    oWebViewInterface.on('anyEvent', function(eventData){
        // perform action on event
    });
}

function emitEventToWebView(){
    oWebViewInterface.emit('anyEvent', eventData);
}

function callJSFunction(){
    oWebViewInterface.callJSFunction('functionName', args, function(result){
        
    });
}

如果您想在页面加载时发出事件或调用 JS 函数，您需要在 webView 加载后调用所有此类代码

webView.on('loadFinished', (args) => {
    if (!args.error) {
        // emit event to webView or call JS function of webView
    }
});

在 WebView 内部

在您的 HTML 页面中导入 nativescript-webview-interface.js。

<html>
    <head></head>
    <body>
        <script src="path/to/nativescript-webview-interface.js"></script>
        <script src="path/to/your-custom-script.js"></script>        
    </body>
</html>

在 webview 中使用 window.nsWebViewInterface 的任何 API 方法

var oWebViewInterface = window.nsWebViewInterface;

// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
    
});

// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);

// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
    // do any processing
    return dataOrPromise;
}

API

原生应用 API

构造函数

WebViewInterface(webView: WebView, src?: string)

webView 是 nativescript web-view 的一个实例。

src 是要加载到 web-view 中的 url/local 路径。如果设置了，则不需要在 xml 文件中的 src 属性中设置它。为了在所有设备上正确地使 web-view 与原生通信正常工作，建议在此处设置 src。

WebViewInterface 类的 API 方法

on(eventOrCmdName: string, callback: (eventData: any) => void): void

使用此方法为 webView 发出的任何事件/命令分配监听器。

回调将以任何格式从 webView 发送的数据执行。

off(eventOrCmdName: string, callback?: (eventData: any) => void): void

使用此方法注销 webView 发出的任何事件/命令的监听器。

如果没有设置回调，将注销此事件的全部事件监听器。

emit(eventOrCmdName: string, data: any): void

使用此方法以任何格式从原生应用向 webView 发送任何事件/命令和数据。

callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void

使用此方法在 webView 的全局作用域中调用任何 JavaScript 函数。

参数是可选的。但如果提供，必须以数组格式。

如果函数成功执行，successHandler 将以 JS 函数返回的结果调用。如果 JS 函数返回一个 promise，则解析的值将作为结果。
如果函数执行产生任何错误，errorHandler将被调用，并带有错误信息。

destroy(): void

使用此方法清理webviewInterface资源（事件监听器），以避免内存泄漏。

WebView API

在全局变量window.nsWebViewInterface中可用的API方法。

on(eventOrCmdName: string, callback: (eventData: any) => void): void

使用此方法为来自本地应用的事件/命令分配监听器。

回调将以任何格式从本地应用发送的数据执行。

emit(eventOrCmdName: string, data: any): void

使用此方法从webView向本地应用发出任何事件/命令，数据格式不限。