本文将带您了解关于javascript–没有找到karma插件依赖项的新内容，同时我们还将为您解释没有找到插件的web页面的相关知识，另外，我们还将为您提供关于C#XamarinFormsWebVie

本文将带您了解关于javascript – 没有找到karma插件依赖项的新内容，同时我们还将为您解释没有找到插件的web页面的相关知识，另外，我们还将为您提供关于C# Xamarin Forms WebView EvaluateJavaScriptAsync 执行 javascript、Cordova插件中JavaScript代码与Java的交互细节介绍、Cordova插件实现JavaScript与Java的通信的详细过程、High Performance JavaScript(高性能JavaScript)读书笔记分析_javascript技巧的实用信息。

• javascript – 没有找到karma插件依赖项（没有找到插件的web页面）
• C# Xamarin Forms WebView EvaluateJavaScriptAsync 执行 javascript
• Cordova插件中JavaScript代码与Java的交互细节介绍
• Cordova插件实现JavaScript与Java的通信的详细过程
• High Performance JavaScript(高性能JavaScript)读书笔记分析_javascript技巧

javascript – 没有找到karma插件依赖项（没有找到插件的web页面）

C:\devl\JS\myProject>karma start
06 09 2015 11:30:19.133:WARN [plugin]: Cannot find plugin "karma-chrome-launcher
".
  Did you forget to install it ?
  npm install karma-chrome-launcher --save-dev
06 09 2015 11:30:19.149:WARN [plugin]: Cannot find plugin "karma-firefox-launche
r".
  Did you forget to install it ?
  npm install karma-firefox-launcher --save-dev
06 09 2015 11:30:19.159:WARN [plugin]: Cannot find plugin "karma-ie-launcher".
  Did you forget to install it ?
  npm install karma-ie-launcher --save-dev

├─┬ karma-chrome-launcher@0.2.0
│ ├─┬ fs-access@1.0.0
│ │ └── null-check@1.0.0
│ └─┬ which@1.1.1
│   └─┬ is-absolute@0.1.7
│     └── is-relative@0.1.3
├── karma-firefox-launcher@0.1.6
├─┬ karma-ie-launcher@0.2.0
│ └── lodash@3.10.1
└── karma-jasmine@0.3.6

[preprocess]: Can not load "webpack",it is not registered!
  Perhaps you are missing some plugin?

[plugin]: Cannot find plugin "karma-webpack".
  Did you forget to install it ?
  npm install karma-webpack --save-dev

plugins: [
  'karma-chrome-launcher','karma-tap','karma-sourcemap-loader','karma-webpack' // *** This 'registers' the Karma webpack plugin.
],

$npm uninstall -g karma
$npm install karma --save-dev

C# Xamarin Forms WebView EvaluateJavaScriptAsync 执行 javascript

好的，感谢 Jason，我设法得到了一些好的指导并让它发挥了作用。 实际上，getElementsByClassName“返回所有子元素的类数组对象”。 由于它是一个数组，只需在单击之前选择数组的第一个元素即可。

var result = await wbView1.EvaluateJavaScriptAsync("document.getElementsByClassName('load_more_btn ib')[0].click();");

Cordova插件中JavaScript代码与Java的交互细节介绍

在Cordova官网中有这么一张架构图：大家看右下角蓝色的矩形框"Custom Plugin"——自定义插件。意思就是如果您用Cordova打包Mobile应用时，发现您的移动应用里需要使用一些功能，这些功能用普通的JavaScript无法实现，而是需要调用移动平台的一些原生API才能实现时，我们就需要自己实现自定义插件。这些插件通过在特定的移动平台上采用原生开发实现，比如Android Studio中的Java开发，然后再通过JavaScript wrapper的方式暴露给您的Mobile应用。比如您是用Cordova在Android平台上打包生成APK文件，那么您的Mobile代码（JavaScript）里还是不会直接调用您用Java实现的Custom Plugin，而是调用Custom Plugin对应的JavaScript wrapper。

那么JavaScript wrapper本身是JavaScript代码，它是怎么调用到Custom Plugin的Java实现的？本文就会介绍这个细节。

下图是OData离线存储插件（OData Offline Store）的JavaScript实现代码的一部分。下图第232行会调用设备的native API进行离线存储的打开操作：

exec(win, error, ''OData'', ''openOfflineStore'', [this, options ? options : {}]);

这个exec函数从哪里来？由Cordova框架实现，通过语句 require(‘cordova/exec’)返回。

那么当应用执行到JavaScript代码：exec(win, error, ''OData'', ''openOfflineStore'', [this, options ? options : {}]); 的时候，程序流是如何从这个JavaScript的exec函数进入到Android平台的原生API执行呢？

打开PackagedApp文件夹里的android子文件夹，有一个JavaScript文件：cordova.js:

里面能看到函数exec的定义和实现：

进而去查看androidExec函数的实现细节：

第938行：var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);

第943行的五个参数含义：

success, fail, service, action, args

• success & fail: JavaScript回调函数，当移动平台上的Java原生API执行完毕后，这个JavaScript回调函数会被调用到。
• service: 待执行的Java Native API的Java实现类名称。
• action: 待执行的Java Native API的Java实现类的方法名称。
• args: JavaScript传递给Java native API的参数数组。

2. 在安卓平台上，JavaScript调用Java的技术实现方式有两种：定义在下图JavaScript代码中的jsToNativeModes对象中：PROMPT和JS_OBJECT。相对应的，Java调用JavaScript有三种模式：POLLING, LOAD_URL和ONLINE_EVENT:

看下面这段Java代码，暴露了一个方法getSomeString给JavaScript端消费：

import android.app.Activity;

import android.os.Bundle;

import android.webkit.WebView;

public class WebViewGUI extends Activity {

	WebView mWebView;

	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		mWebView = new WebView(this);

		mWebView.getSettings().setJavaScriptEnabled(true);

		mWebView.addJavascriptInterface(new JavaScriptInterface(),
				"jsinterface");

		mWebView.loadUrl("file:///android_asset/www/index.html");

		setContentView(mWebView);

	}

	final class JavaScriptInterface {

		JavaScriptInterface() {
		}

		public String getSomeString() {

			return "string";

		}

	}

}

在JavaScript代码里消费上述Java代码暴露的getSomeString方法:

<script>

var String = window.jsinterface.getSomeString();

</script>

我们再回过头来看看AndroidExec的实现:

var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);

在AndroidExec的实现里， nativeApiProvider的get方法返回一个实例，然后执行exec方法。而881行代码说明nativeApiProvider的实现位于文件夹cordova/android下面的nativeapiprovider.js里：

打开nativeapiprovider.js，在第21行的注释里我们得到了重要信息： currentApi要么来自Java文件ExposedJsApi.java，要么来自PromptBasedNativeApi.java。

Java文件ExposedJsApi.java可以在这个文件夹内找到：

platform/android/CordovaLib/src/org/apache/cordova

ExposedJsApi实际就是个Java interface，上面声明了一个exec方法:

JavaScript到Java的执行通过prompt调用完成:

Java类SystemExposedJsApi实现了这个interface，再将执行流转交给类CordovaBridge的实例.

CordovaBridge再调用PluginManager:

PluginManager首先根据名字找到负责处理该请求的Java plugin的实现类，再调用该实现类的方法：

以OData离线存储的实现类为例，我们在其实现代码里能发现有大量的IF-ELSE分支，每个分支处理不同的离线存储操作请求。

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

Cordova插件实现JavaScript与Java的通信的详细过程

背景

Cordova平台是开源的跨平台开发框架，被广泛应用于移动应用开发领域，可以开发跨安卓、iOS等系统的应用。Cordova平台是基于HTML/JavaScript语言，它是如何在不同平台上能够运行并实现相应功能的呢？这里就用到了Cordova提供的丰富的插件，Cordova的大量插件结合自身的框架，为应用开发者提供了跨平台的能力，开发者不需要与操作系统层面的接口进行交互，可以关注于应用功能本身。HMS Core为了方便Cordova开发者能够更方便快速的接入HMS Core的能力，也针对各能力提供了Cordova的插件。

简介

这里将结合最常用的华为推送服务Cordova插件，介绍HMS Core用到的JS-Java消息交互方式，讲解在JS侧如何调用Java侧接口，最终实现HMS Core能力。当然，在进行问题定位时也可以参考本文进行分析。

Cordova基本结构

App启动时，在MainActivity中调用loadUrl函数，即触发了CordovaWebView的初始化，进行Cordova的启动。此时CordovaWebView会创建PluginManager对象，NativeToJsMessageQueue对象以及JavascriptInterface的ExposedJsApi对象。在后续的消息交互中，则主要通过ExposedJsApi和NativeToJsMessageQueue进行。

插件的加载分两步。首先，在PluginManager对象创建时，读取配置文件中的所有Plugin，并创建映射；而在第一次调用该插件时，进行实例化，并执行相关功能。

消息返回模式包含同步和异步两种模式，Cordova中通过在函数中配置async关键字进行区分。

对于同步模式，系统会从NativeToJsMessageQueue队列头获取数据，并返回。然后再根据callbackID查找到请求，返回给success函数。

对于异步模式，执行后会启动循环函数不停的获取队列中的数据。查找到对应的请求时，返回给success函数。

在华为推送服务的插件中，采用的是同步的方式。

以推送为样例说明插件调用方式

如果以上没有看懂，没有关系，只要了解下面的过程即可。

1. 插件安装

执行命令 cordova plugin add @hmscore/cordova-plugin-hms-push 安装最新插件。执行后会在plugins中增加插件信息。

其中在plugin.xml中记录了所有用到的js类，android类等信息，在plugin初始化时会将其加载到系统中，如果某个函数或接口未在其中进行配置，会导致无法使用。

2. 消息映射

插件提供了4种消息映射方式：

(1) HmsMessaging消息调用

在HmsPush.js中通过runHmsMessaging接口将消息转给Android平台，通过异步调用方式，Android返回的结果将通过Promise返回。

消息将会转到HmsPushMessaging类中，在HmsPushMessaging的execute函数中，根据各功能的不同，转向不同的函数进行处理：

public void execute(String action, final JSONArray args, final CallbackContext callbackContext)
        throws JSONException {
    hmsLogger.startMethodExecutionTimer(action);
    switch (action) {
        case "isAutoInitEnabled":
            isAutoInitEnabled(callbackContext);
            break;
        case "setAutoInitEnabled":
            setAutoInitEnabled(args.getBoolean(1), callbackContext);
            break;
        case "turnOffPush":
            turnOffPush(callbackContext);
            break;
        case "turnOnPush":
            turnOnPush(callbackContext);
            break;
        case "subscribe":
            subscribe(args.getString(1), callbackContext);
            break;

在各函数调用中，通过设置结果的方式，将结果返回给JS层。内容将被写入nativeToJsMessageQueue队列中。

callBack.sendPluginResult(new PluginResult(PluginResult.Status.OK,autoInit));

(2) HmsInstanceId消息调用

在HmsPush.js中通过runHmsInstance接口将消息转给Android平台，通过异步调用方式，平台将结果通过Promise返回。

消息将会转到HmsPushInstanceId类中，在HmsPushInstanceId的execute函数中，根据各功能不同，转向不同的函数处理。

public void execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
    if (!action.equals("init"))
        hmsLogger.startMethodExecutionTimer(action);
 
    switch (action) {
        case "init":
            Log.i("HMSPush", "HMSPush initialized ");
            break;
        case "enableLogger":
            enableLogger(callbackContext);
            break;
        case "disableLogger":
            disableLogger(callbackContext);
            break;
        case "getToken":
            getToken(args.length() > 1 ? args.getString(1) : Core.HCM, callbackContext);
            break;
        case "getAAID":
            getAAID(callbackContext);
            break;
        case "getCreationTime":
            getCreationTime(callbackContext);
            break;

最后同样使用设置结果的方式，将结果返回给JS层。内容将被写入nativeToJsMessageQueue队列中。

callBack.sendPluginResult(new PluginResult(PluginResult.Status.OK,autoInit));

过程与HmsPushMessaging非常相似。主要区别在于HmsPushInstanceId用于映射HmsInstanceId相关的接口，HmsPushMessaging用于映射HmsMessaging相关接口。

(3)  localNotification消息调用

在HmsLocalNotification.js中通过run接口将消息传递给Android平台，通过异步调用方式，平台将结果通过Promise返回。

消息将会转到HmsLocalNotification类中，在HmsLocalNotification的execute函数中，根据各功能不同，转向不同的函数处理。

public void execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
    switch (action) {
        case "localNotification":
            localNotification(args, callbackContext);
            break;
        case "localNotificationSchedule":
            localNotificationSchedule(args.getJSONObject(1), callbackContext);
            break;
        case "cancelAllNotifications":
            cancelAllNotifications(callbackContext);
            break;
        case "cancelNotifications":
            cancelNotifications(callbackContext);
            break;
        case "cancelScheduledNotifications":
            cancelScheduledNotifications(callbackContext);
            break;
        case "cancelNotificationsWithId":
            cancelNotificationsWithId(args.getJSONArray(1), callbackContext);
            break;

同样会通过sendPluginResult接口返回处理结果。但是localNotification的消息涉及消息发送，会在发送完成后进行消息返回。

(4)  Push事件回调

在Push消息中除了函数调用外，还有很多的事件监听，比如收到普通消息，收到透传消息，收到Token等，因此在Push中还有对于各种事件的监听。

对于回调流程的介绍从Android侧开始。

在Android侧，Push回调消息的函数定义在HmsPushMessageService.java中。

根据SDK的要求，复写需要用到的回调函数：onMessageReceived，onDeletedMessages，onNewToken等。

当事件被触发时，会向JS层发送事件通知：

public static void runJS(final CordovaPlugin plugin, final String jsCode) {
    if (plugin == null)
        return;
    Log.d(TAG, "runJS()");
 
    plugin.cordova.getActivity().runOnUiThread(() -> {
        CordovaWebViewEngine engine = plugin.webView.getEngine();
        if (engine == null) {
            plugin.webView.loadUrl("javascript:" + jsCode);
 
        } else {
            engine.evaluateJavascript(jsCode, (result) -> {
 
            });
        }
    });
}

JS侧的监听定义：

在HmsPushEvent.js中对每个事件都进行了定义及注册

exports.REMOTE_DATA_MESSAGE_RECEIVED = "REMOTE_DATA_MESSAGE_RECEIVED";
exports.TOKEN_RECEIVED_EVENT = "TOKEN_RECEIVED_EVENT";
exports.ON_TOKEN_ERROR_EVENT = "ON_TOKEN_ERROR_EVENT";
exports.NOTIFICATION_OPENED_EVENT = "NOTIFICATION_OPENED_EVENT";
exports.LOCAL_NOTIFICATION_ACTION_EVENT = "LOCAL_NOTIFICATION_ACTION_EVENT";
exports.ON_PUSH_MESSAGE_SENT = "ON_PUSH_MESSAGE_SENT";
exports.ON_PUSH_MESSAGE_SENT_ERROR = "ON_PUSH_MESSAGE_SENT_ERROR";
exports.ON_PUSH_MESSAGE_SENT_DELIVERED = "ON_PUSH_MESSAGE_SENT_DELIVERED";

function onPushMessageSentDelivered(result) {
  window.registerHMSEvent(exports.ON_PUSH_MESSAGE_SENT_DELIVERED, result);
}
exports.onPushMessageSentDelivered = onPushMessageSentDelivered;

需要注意的是，这里的定义需要在应用开发时主动调用，否则不会生效。可以参考Demo中的eventListeners.js。

如果发现已经在Java侧触发回调，但是没有接收到，就需要检查一下Cordova中是否定义有相关调用事件。

这样，在Android侧触发事件时，JS侧就可以收到并处理相关的消息了。如果需要增加新的事件，也可以参考该流程。

小结

通过以上的方式，Push插件实现了JS侧-Java侧的消息互通。在大部分的服务函数接口调用中都采用的类似形式。但是对于某些服务，如广告、地图等需要显示图片或视频的场景（如地图，原生广告等），会用到其他的方式，使用上也更复杂一些，这些会在其他的文档中做详细的介绍。

>>访问HMS Core官网，了解更多相关内容
>>获取HMS Core Cordova插件开发指导文档
>>华为HMS Core官方论坛
>>华为HMS Core Cordova插件开源仓库地址：GitHub

以上就是Cordova插件如何实现JavaScript与Java的通信的详细内容，更多关于Cordova插件JavaScript与Java通信的资料请关注其它相关文章！

High Performance JavaScript(高性能JavaScript)读书笔记分析_javascript技巧

关于javascript – 没有找到karma插件依赖项和没有找到插件的web页面的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于C# Xamarin Forms WebView EvaluateJavaScriptAsync 执行 javascript、Cordova插件中JavaScript代码与Java的交互细节介绍、Cordova插件实现JavaScript与Java的通信的详细过程、High Performance JavaScript(高性能JavaScript)读书笔记分析_javascript技巧的相关知识，请在本站寻找。