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/本地路径。如果设置了它，则不需要在 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向原生应用发送任何事件/命令，数据可以是任何格式。