Question

我有一些应该这样导入的sdk脚本：

  <script src="../libs/async.min.js"></script>
  <script src="../libs/es6-shim.js"></script>
  <script src="../libs/websdk.client.bundle.min.js"></script>
  <script src="../libs/fingerprint.sdk.min.js"></script>

这些是SDK的一部分，可让我与生物特征识别进行交互。我需要在我的项目中创建一个模块，然后使用这些脚本重新使用它。这是React JS的项目。

尝试将它们导入包含class ='app / root'的index.html中，然后创建一个包含FingerSDK类的文件夹控件，并尝试访问SDK中包含的类和方法，但它不会编译，它无法识别任何内容，就好像未导入脚本一样。

例如，我尝试使用index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dashboard</title>
</head>
<body>

  <div id="root">

  </div>

  <script src="../production/libs/es6-shim.js"></script>
  <script src="../production/libs/websdk.client.bundle.min.js"></script>
  <script src="../production/libs/fingerprint.sdk.min.js"></script>
  <script src="../production/app.js"></script>
</body>
</html>

我的模块：

class FingerprintSDKTest {
  constructor( errM ) {


    this.deviceId = '' //'A7429977-B0D4-9640-9AF7-CC792A5989BD'
    this.fingerData = {}
    this.sdk = new Fingerprint.WebApi
    this.errorManagment = errM
    this.getDeviceList()

  }
  getDeviceList() {
    this.sdk.enumerateDevices()
      .then( response => {

        this.deviceId = response[0]
      } )
      .catch( err => {

        notification['warning']( {
          message: 'No se ha conectado el lector de huellas',
          description: 'No se ha detectado ningún lector de huellas, algunas funcionalidades no estaran disponibles sin el lector, favor de connectar un lector de huellas.'
        } )
      } )
  }
}

我需要能够导入这些脚本，以便实例化FingerPrint.WebApi，但我真的不明白该怎么做。在我需要将此模块导入React JS组件之后。

感谢您的指导，也感谢您为我的英语所做的贡献和歉意。

Answer 1

index.html

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>TestApp</title>`enter code here
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </div>
      <script src="scripts/es6-shim.js"></script>
      <script src="scripts/websdk.client.bundle.min.js"></script>
      <script src="scripts/fingerprint.sdk.min.js"></script>
      </body>
    </html>

BioAuth.js

import React, { Component } from 'react';

class BioAuth extends Component {

  componentDidMount() {
     this.onScriptLoad();

}

onScriptLoad = () => {
    this.sdk = new window.Fingerprint.WebApi();
    this.sdk.onDeviceConnected = function (e) {
        console.log('no fingerprint device');
    };
    this.sdk.onDeviceDisconnected = function (e) {
        console.log('no fingerprint device');
    };
    this.sdk.onCommunicationFailed = function (e) {
        console.log('Communication Error')
    };
    }

  render() {
    return ( 
      <div>
        <h1>Validate BioAuth Connectivity</h1>
      </div>
    );
  }
}

export default BioAuth;

通过上述配置，我在我的ReactJs组件中使用了导入的函数。

我需要导入脚本以在React JS中创建JS类

1 个答案: