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内部使用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函数。

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

如果函数成功执行，则成功处理程序将使用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向原生应用发送任何事件/命令，数据格式可以是任何格式。