当前位置： 首页 > news >正文

flutter-web中使用js工具类

news 2026/4/1 7:42:45

文章目录

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

为什么要调用js

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

1. flutter-web

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");

2. Android

1. 引入依赖
webview_flutter: ^4.4.2
2. index.html
<!DOCTYPE html>
<html>
<head><title>Test js dart</title></head>
<body>
<script>function inputClick (url) {console.log('inputClick=>'+url);}function playUrl(url) {console.log('playUrl=>'+url);}function startPlay() {console.log('startPlay');}function postMsg() {console.log('postMsg');//向dart发送消息Print.postMessage('postMsg');}</script>
</body>
</html>
3. dart
import 'package:flutter/material.dart';
import 'package:tvboxstudy/log_extensions.dart';
import 'package:webview_flutter/webview_flutter.dart';class LocalHtmlWebView extends StatefulWidget {const LocalHtmlWebView({super.key});@overrideLocalHtmlWebViewState createState() => LocalHtmlWebViewState();
}class LocalHtmlWebViewState extends State<LocalHtmlWebView> {late String localHtmlContents;late WebViewController controller;ValueNotifier<bool> isShowLoading = ValueNotifier(true);@overridevoid initState() {super.initState();initController();loadLocalHtml();_registerJavascriptChannel();}void runJS(int type) {if (type == 1) {controller.runJavaScript('inputClick();',);} else if (type == 2) {controller.runJavaScript('startPlay();',);}else if (type == 3) {controller.runJavaScript('postMsg();',);} else if (type == 4) {controller.runJavaScript("playUrl('https://media.w3.org/2010/05/sintel/trailer.mp4');",);}}void _registerJavascriptChannel() {controller.addJavaScriptChannel('Print',onMessageReceived: (JavaScriptMessage message) {//收到消息做相应的处理print("onMessageReceived=>${message.message}");},);}void initController() {controller = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..setBackgroundColor(Colors.transparent)..setJavaScriptMode(JavaScriptMode.unrestricted)..setNavigationDelegate(NavigationDelegate(onProgress: (int progress) {"progress=$progress".log();if (progress == 100) {isShowLoading.value = false;}},onPageStarted: (String url) {},onPageFinished: (String url) {controller.runJavaScriptReturningResult('document.body.scrollHeight').then((value) {"scrollHeight=>$value".log();});},onWebResourceError: (WebResourceError error) {},onNavigationRequest: (NavigationRequest request) {if (request.url.startsWith('https://www.youtube.com/')) {return NavigationDecision.prevent;}return NavigationDecision.navigate;},),);}void loadLocalHtml() async {controller.loadFlutterAsset('assets/www/player/index2.html');}@overrideWidget build(BuildContext context) {return Scaffold(body: Column(children: [Row(children: [TextButton(onPressed: (){runJS(1);}, child: Text("inputClick")),TextButton(onPressed: (){runJS(2);}, child: Text("startPlay")),TextButton(onPressed: (){runJS(3);}, child: Text("postMsg")),TextButton(onPressed: (){runJS(4);}, child: Text("playUrl")),],),Expanded(child: Stack(children: [WebViewWidget(controller: controller,),ValueListenableBuilder(valueListenable: isShowLoading,builder: (BuildContext context, bool value, Widget? child) {return isShowLoading.value? const Center(child: CircularProgressIndicator(color: Colors.white,)): const SizedBox.shrink();},)],),),],),);}
}
引用

Utilizing JS Library for Flutter Web

相关文章：

flutter-web中使用js工具类

文章目录 为什么要调用js1. flutter-web1. 引入js web/index.html2. 创建工具js web/CryptoEnc.js3. 创建对应的lib/js/js_interop.dart4. 由于引入的js是针对web平台的&#xff0c;所以引入需要做引入处理5. 使用 2. Android1. 引入依赖2. index.html3. dart引用 为什么要调用…...

编程日记 2023/12/3 15:33:46

@ResponseBody详解：用于响应体响应数据

RestFul风格或者是web阶段接触过的异步请求&#xff0c;都需要把数据转换成Json放入响应体中。 ResponseBody的作用其实是将java对象转为json格式的相应内容 使用 RequestMapping注解时&#xff0c;Spring会将返回值解析为视图路径&#xff0c;然后跳转路径返回对应的视图页面…...

编程日记 2023/12/3 15:32:45

【Python百练——第3练】矩形类及操作

&#x1f490;作者&#xff1a;insist-- &#x1f490;个人主页&#xff1a;insist-- 的个人主页 理想主义的花&#xff0c;最终会盛开在浪漫主义的土壤里&#xff0c;我们的热情永远不会熄灭&#xff0c;在现实平凡中&#xff0c;我们终将上岸&#xff0c;阳光万里 ❤️欢迎点…...

编程日记 2023/12/3 15:31:44

【C语言学习疑难杂症】C语言中数组存储时为什么从低地址到高地址

在C语言中&#xff0c;数组的存储从低地址到高地址是有其历史原因的。这种设计主要是为了与计算机系统的内存组织方式相一致。 在计算机系统中&#xff0c;内存通常按照字节进行编址&#xff0c;地址从低到高递增。数组在内存中是连续存储的&#xff0c;因此数组的第一个元素&…...

编程日记 2023/12/3 15:27:40

Linux：查看端口占用的进程

命令 netstat -tunlp可以从图中看到&#xff0c;端口被那个进程占用&#xff0c;对应进程的pid是多少。...

编程日记 2023/12/3 15:24:37

医美店会员管理系统预约小程序作用是什么

医美在美业中占据着一定地位&#xff0c;爱美使然和经济独立、悦己消费下&#xff0c;不少女性会前往医美机构做脸部整容、嫩肤补水等服务&#xff0c;如美容院一样都是具备本地外地属性的&#xff0c;因此在如今互联网盛行下&#xff0c;商家需要借势线上破解难题及增强生意效…...

编程日记 2023/12/3 15:23:37

Linux 正则表达式

内容概述 1 文本编辑工具之神 VIM 1.1 vi 和 vim 简介 在 Linux 中我们经常编辑修改文本文件&#xff0c;即由 ASCII Unicode 或者其他编码的纯文字的文件。之前介绍过的 nano&#xff0c;实际工具中我们使用更为专业&#xff0c;功能强大的工具 文本编辑种类&#xff1a; vi…...

编程日记 2023/12/3 15:22:36

C语言面试之数组指针上篇

C语言数组是C语言中重要的数据结构之一&#xff0c;它用于存储一组相同类型的数据。数组在C语言中是以连续的内存空间来存储的&#xff0c;每个数组元素都是一个变量&#xff0c;占据一定的内存空间&#xff0c;数组元素之间是紧密相邻的。 一、数组的定义 在C语言中&#xff0…...

编程日记 2023/12/3 15:21:35

LinkWeChat，唯一以开源为核心的SCRM

LinkWeChat是国内首个基于企业微信的开源SCRM&#xff0c;在集成了企微强大的开放能力的基础上&#xff0c;进一步升级拓展灵活高效的客户运营能力及多元化精准营销能力&#xff0c;让客户与企业之间建立强链接&#xff0c;帮助企业提高客户运营效率&#xff0c;强化营销能力&a…...

编程日记 2023/12/3 15:19:33

Android textView 显示： STRING_TOO_LARGE

在Android中&#xff0c;字符串资源的长度限制是32KB&#xff0c;getString()方法返回的字符串资源的大小超过这个限制&#xff0c;就会抛出STRING_TOO_LARGE 这个错误。 我本地的临界值是&#xff1a;32.3 KB (33,090 字节) 小于等于33090时&#xff0c;能正常显示&#xff…...

编程日记 2023/12/3 15:18:32

用HeidiSQL在MySQL中创建新的数据库

用有权限的用户登录&#xff1a; 右键单击&#xff0c;选择&#xff1a; 输入要创建的数据库名称&#xff0c;然后点击“确定”&#xff1a; 刷新下&#xff0c;就看到新创建的数据库了&#xff1a; 在新创建的数据库中&#xff0c;就可以做其它操作了&#xff0c;例如…...

编程日记 2023/12/3 15:16:31

纯前端实现导入excel数据

准备工作 - 下载 xlsx npm install xlsx下面直接上代码&#x1f447; <template><div><input type"file" accept".xlsx, .xls" change"handleClick"></div> </template><script langts setup> import * a…...

编程日记 2023/12/3 15:15:29

Matlab下载许可证文件 教程（在账号有许可证的前提下）

文章目录 Part.I IntroductionPart.II 许可证文件过期解决方案Chap.I 使用 Internet 自动激活Chap.II 在不使用 Internet 的情况下手动激活 Part.I Introduction 本文主要介绍&#xff0c;在 Mathwork 账号有许可证的前提下&#xff0c;下载许可证的操作流程。 好久没有用 Mat…...

编程日记 2023/12/3 15:13:27

AI 绘画 | Stable Diffusion 电商模特

前言 上一篇文章讲到如何给人物更换背景和服装。今天主要讲电商模特，就是服装电商们的固定服装产品图片如何变成真人模特穿上的固定服装产品效果图。如果你掌握了 《AI 绘画 | Stable Diffusion 人物 换背景|换服装》，这篇文章对你来说，上手会更轻松。 教程 提取服装蒙版…...

编程日记 2023/12/3 15:12:26

vue面试题整理（1.0）

一、对MVC&#xff0c;MVP&#xff0c;MVVM的理解 三者都是项目的架构模式&#xff08;不是类的设计模式&#xff09;&#xff0c;即&#xff1a;一个项目的结构&#xff0c;如何分层&#xff0c;不同层负责不同的职责。 1.MVC MVC的出现是用在后端&#xff08;全栈时代&…...

编程日记 2023/12/3 15:11:25

PyQt基础_007_ 按钮类控件QCombox

import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class ComboxDemo(QWidget):def __init__(self, parentNone):super(ComboxDemo, self).__init__(parent)self.setWindowTitle("combox 例子") self.resize(300, 90) …...

编程日记 2023/12/3 15:10:24

Android Wifi的扫描机制

Android Wifi 的扫描场景分为下面四种情况&#xff1a; 1.亮屏情况下&#xff0c;在Wifi settings界面&#xff0c;固定扫描&#xff0c;扫描时间为10s。 2.亮屏情况下&#xff0c;在非Wifi settings界面&#xff0c;二进制指数退避扫描&#xff0c;退避&#xff1a;interval…...

编程日记 2023/12/3 15:09:23

类 —— 友元、常/静态成员函数

类 类的大小 和结构体大小求法一致。但需注意&#xff0c;普通空类也会占用 1 字节大小&#xff0c;因为普通空类可以实例化对象。 而 抽象空类占 4 字节&#xff08;32 位机中&#xff09;&#xff0c;因为抽象空类中含有虚指针&#xff08;含有虚函数的非抽象空类同理&am…...

编程日记 2023/12/3 15:08:22

单页面应用

单页面应用 1.什么是SPA 多页面应用&#xff1a;每个页面都是独立的html文件&#xff0c;页面切换是整体刷新&#xff0c;需要重新加载html、css、JS等文件&#xff0c;容易实现搜索引擎&#xff0c;数据通过url、cookie、localStore传递。 单页面应用&#xff1a;多个页面是…...

编程日记 2023/12/3 15:07:21

六、ZooKeeper Java API操作

目录 1、引入maven坐标 2、节点的操作 这里操作Zookeeper的JavaAPI使用的是一套zookeeper客户端框架 Curator ，解决了很多Zookeeper客户端非常底层的细节开发工作 。 Curator包含了几个包：...

编程日记 2023/12/3 15:06:20

Qwen3.5-4B-Claude模型Java微服务集成指南：SpringBoot实战案例

Qwen3.5-4B-Claude模型Java微服务集成指南&#xff1a;SpringBoot实战案例 1. 引言&#xff1a;当大模型遇上微服务 最近在开发企业知识管理系统时&#xff0c;我们遇到了一个典型需求&#xff1a;如何让传统Java微服务架构与前沿的大语言模型无缝集成。经过多次尝试&#xf…...

编程新知 2026/4/1 7:33:23

Apifox供应链投毒攻击--完整解析

&#x1f534; 安全应急通告&#xff1a;Apifox 桌面端供应链投毒与高危凭证窃取事件 一、 事件概述 近期监测到 Apifox 公网 SaaS 版桌面客户端遭遇严重的供应链投毒攻击。攻击者通过劫持合法的运行追踪模块&#xff0c;向用户下发具备凭证窃取、动态执行与持久化能力的恶意 J…...

编程新知 2026/4/1 6:39:56

Vivado项目文件太多分不清？这份FPGA开发必备的‘文件后缀速查手册’请收好

Vivado项目文件管理终极指南&#xff1a;从后缀识别到高效工作流 当你第一次打开一个成熟的Vivado项目文件夹时&#xff0c;那种面对几十种陌生文件后缀的茫然感&#xff0c;相信每个FPGA开发者都记忆犹新。就像走进了一个满是神秘符号的仓库&#xff0c;每个文件似乎都在向你发…...

编程新知 2026/4/1 5:33:01

Qt桌面应用集成PaddleOCR：从环境搭建到精准识别的实践指南

1. 环境准备&#xff1a;搭建PaddleOCR的Qt开发环境 第一次在Qt里折腾PaddleOCR时&#xff0c;我对着官方文档折腾了半天还是报错&#xff0c;后来发现是第三方库的路径没配好。这里分享下我踩坑后总结的可靠方案。 核心依赖三件套&#xff1a;PaddlePaddle推理库、PaddleOCR C…...

编程新知 2026/4/1 5:22:59

30天小白进阶AI大神：收藏这份路线图，免费工具玩转大模型！

本文为AI学习新手提供了30天的系统学习路线图&#xff0c;涵盖了AI技术栈的三个层次&#xff1a;应用层、模型层和基础设施层。文章建议从应用层入手&#xff0c;逐步向下理解&#xff0c;并推荐了主流AI工具的对比及免费工具的入门使用。此外&#xff0c;还提供了给初学者的五…...

编程新知 2026/4/1 5:02:47

VISA 标准深度剖析：寄存器基控制规范与函数接口研究

VISA 标准深度剖析：寄存器基控制规范与函数接口研究 VISA（Virtual Instrument Software Architecture）是仪器控制领域的标准 API，它为不同总线（GPIB、USB、LAN、PXI 等）提供了统一的编程接口。本文将 VISA 函数按功能分为 8 大类，并逐一解析其作用、核心函数及使用场景…...

编程新知 2026/4/1 4:50:24

【Python内存管理终极指南】：20年专家实测5大智能策略，90%开发者忽略的GC优化盲区揭晓

第一章&#xff1a;Python智能体内存管理策略对比评测报告全景概览本报告聚焦于当前主流Python智能体&#xff08;Agent&#xff09;框架在内存管理层面的设计差异与运行表现&#xff0c;涵盖LangChain、LlamaIndex、AutoGen及自研轻量Agent Runtime四大实现。评测维度包括对象…...

编程新知 2026/4/1 4:42:14

Seqlist 顺序表 的实现c语言

本小结重点&#xff1a; 你将学到 函数基础 传值传地址的区别结构体指针 简单循环控制 理解物理结构与存储结构的区别多文件分布 简单来说就是对动态数组进行函数封装&#xff0c;简化了很多功能所以很多就是对数组的利用&#xff0c;但更多是对结构体数组&#xff0c;所…...

编程新知 2026/4/1 4:05:42

foobox-cn个性化定制：打造你的专属foobar2000音乐界面

foobox-cn个性化定制&#xff1a;打造你的专属foobar2000音乐界面 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 当你每天打开foobar2000时&#xff0c;是否希望看到的不只是一个播放器&#xff0c;…...

编程新知 2026/4/1 3:16:55

FunASR Docker部署SSL配置的四个‘天坑’与避坑指南（附完整启动命令）

FunASR Docker部署SSL配置的四个‘天坑’与避坑指南&#xff08;附完整启动命令&#xff09; 在语音识别服务的安全部署中&#xff0c;SSL/TLS加密已成为行业标配。但当我们实际为FunASR配置HTTPS时&#xff0c;那些看似简单的步骤背后却暗藏玄机。本文将带您穿越四个最具迷惑性…...

编程新知 2026/4/1 2:52:26