市场place
作者 NativeScript.org
nativescript-webview-interface2
作者：milad.sadinam | v1.4.7
Nativescript 插件，用于WebView与Android/iOS之间的双向通信。
npm i --save nativescript-webview-interface2

npm npm

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版本。

Native应用程序内部

在您的页面中插入一个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的constructor中传递它。这是推荐的方式使用此插件，以避免在某些设备上从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

Native应用程序API

构造函数

WebViewInterface(webView: WebView, src?: string)

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

src是web-view中要加载的url/本地路径。如果设置了它，则不需要在xml文件中的src属性中设置它。为了在所有设备上正确地工作，强烈建议在这里设置src。

WebViewInterface类中的API方法

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

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

回调将以任何格式传递的数据执行。

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

使用此方法取消注册来自webView的任何事件/命令的监听器。

如果未设置回调，将取消注册此事件的所有事件监听器。

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

使用此方法从native应用程序向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向原生应用发送任何事件/命令，并附带数据。