flutter-web中使用js工具类

文章目录

- - - 为什么要调用js
    - 1. 引入js web/index.html
    - 2. 创建工具js web/CryptoEnc.js
    - 3. 创建对应的lib/js/js_interop.dart
    - 4. 由于引入的js是针对web平台的，所以引入需要做引入处理
    - 5. 使用
    - 引用

为什么要调用js

JavaScript拥有庞大且成熟的工具生态系统

1. 引入js web/index.html

 <!-- Add the required JS libraries --><script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js" integrity="sha512-a+SUDuwNzXDvz4XrIcXHuCf089/iJAoN4lmrXJg18XnduKK6YlDHNRalv4yd1N40OKI80tFidF+rqTFKGPoWFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/md5.min.js" integrity="sha512-ENWhXy+lET8kWcArT6ijA6HpVEALRmvzYBayGL6oFWl96exmq8Fjgxe2K6TAblHLP75Sa/a1YjHpIZRt+9hGOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><!-- Register the js file where the logic is written --><script src="CryptoEnc.js" type="application/javascript"></script>

2. 创建工具js web/CryptoEnc.js

function CryptoEnc() {}CryptoEnc.prototype.encrypt = function(toEncObj){var toEnc = toEncObj.value;var encrypted = CryptoJS.MD5(toEnc);return encrypted;
}CryptoEnc.prototype.testFunc = function(toEncObj2){var toEnc = toEncObj2.value;return "========bbbbtestFunc"+toEnc;
}

3. 创建对应的lib/js/js_interop.dart

// #1
@JS()
library js_interop;// The above two lines are required
import 'package:js/js.dart';// #2
@JS()
class CryptoEnc {external CryptoEnc();external String encrypt(ToEncrypt toEncrypt);external String testFunc(ToEncrypt2 toEncrypt2);
}// #3
@JS()
@anonymous
class ToEncrypt {external String get value;external factory ToEncrypt({String value});
}
@JS()
@anonymous
class ToEncrypt2 {external String get value;external factory ToEncrypt2({String value});
}

4. 由于引入的js是针对web平台的，所以引入需要做引入处理

///encrypt.dart
class ToEncrypt {final String value;ToEncrypt({required this.value,});
}class ToEncrypt2 {final String value;ToEncrypt2({required this.value,});
}class CryptoEnc {CryptoEnc();String encrypt(ToEncrypt toEncrypt) {// We are not implementing any encryption for mobile for now.// This is just for demonstration.throw UnimplementedError();}String testFunc(ToEncrypt2 toEncrypt) {// We are not implementing any encryption for mobile for now.// This is just for demonstration.throw UnimplementedError();}
}///export_encrypt.dart
export 'encrypt.dart' if (dart.library.js) 'js_interop.dart';

5. 使用

   var encVal = CryptoEnc().encrypt(ToEncrypt(value: "aaaaaa",),);var encVal2 = CryptoEnc().testFunc(ToEncrypt2(value: "cccc",));print(encVal);print("testFunc=$encVal2");