【Flutter_Web】Flutter编译Web第二篇(webview篇):flutter_inappwebview如何改造方法,变成web之后数据如何交互

前言

欢迎来到第二篇文章,这也是第二个难题,就是原有的移动端本身一些页面H5的形式去呈现(webview),例如某些需要动态更换内容的页面,某些活动页面、支付页面,不仅仅做页面呈现,还包括一些数据交互,那么在项目初期,我们尝试使用过了官方提供的webview,但是功能比较有限,因此我们选择了flutter_inappwebview这个插件

  • 官网webview
https://pub.dev/packages/webview_flutter
  • flutter_inappwebview
https://pub.dev/packages/flutter_inappwebview

本文以flutter_inappwebview为案例,将陈述我将Flutter编译成web之后,如果去处理flutter_inappwebview的。

原理

我想在讲之前,先讲讲什么是webview?

实际上对我来说,webview应该相对于原生端而已(ios、android),是由原生提供的底层网页环境容器,去呈现网页内容,那么不同端,他们提供的环境当然是不一样的,因为网页内核不一样,那么也会造成很多的差异,所以为了抹平这些差异,才会提供第三方插件,封装公共的api供顶层调用,底层由各个平台去进行实现

例如我之前的文章提到过的数据交互,本质上就是在当前环境去注入某些方法、某些类去给网页容器提供交互的能力。

那么对于flutter_inappwebview而言,它给每一个网页容器提供了一个控制器,这个控制器有一个addJavaScriptHandler方法,可以连接到网页容器,实现监听和传输数据,同时给网页容器放了一个公共的类window.flutter_inappwebview类提供网页传输数据到客户端的能力。

那么我说webview应该相对于原生端而已,因为Flutter在编译成web之后,本质上就是web,那么之前的网页就不能叫webview,应该叫iframe

那么我们的问题,实际上就是web和iframe的数据交互问题

实现

那么,如果你明白本质是web和iframe的数据交互问题,你就明白为什么addJavaScriptHandler方法在web平台没有实现的原因,因为压根就不需要注入,他们本身就已经在一个环境下面了。

由于浏览器有同源策略,所以我们还是使用postMessgae的方法,但有一些地方需要注意。

实际上flutter_inappwebview有对web端的某些api进行封装,编译成web,那么之前的iframe的配置在flutter_inappwebview的options里面也会存在。

InAppWebViewSettings getInAppWebViewGroupOptions() {return InAppWebViewSettings()..useShouldInterceptAjaxRequest = false..useShouldInterceptFetchRequest = false..supportZoom = true..clearCache = true..iframeName = 'my_ifram' //设定ifame的名称,这个就是给web环境使用的..mediaPlaybackRequiresUserGesture = true..transparentBackground = true..allowsInlineMediaPlayback = false;}

同样验证的方式,你可以编译成web之后,之前的webview,在浏览器标签上也可以得知上iframe。

我们可以看编译之后的产物:
在这里插入图片描述

  • 首先id固定为flutter_inappwebview-0
  • 有csp,防止内部js脚本攻击(部分浏览器不可用)
  • 有sandbox模式,也就是沙箱模式,可以进行配置,对iframe做一些限制
  • src转成hash链接
  • 默认为全屏模式

和iframe通信的方式网上有很多方法,我这里不过多赘述。

父页面发送:

 //获取子iframe,通过name属性或者直接拿第一个iframeweb.HTMLIFrameElement childIframe = web.document.getElementById("flutter_inappwebview-0") as web.HTMLIFrameElement;  //这里最好根据前面设定的名称去找Map data = {'user': {'token': 1111}};JSString msg = jsonEncode(data).toJS;//给子ifram传递数据// childIframe.contentWindow?.postMessage(msg, '*'.toJS);//这种方式是不行的childIframe.contentWindowCrossOrigin?.postMessage(msg, '*'.toJS);

父页面接收:

//监听子组件传递过来的消息web.window.addEventListener('message', callback.toJS);void callback(web.MessageEvent e) {print("收到js交互=====${e}");}

iframe发送:

window.top.postMessage('hello', '*')

iframe接收:

window.addEventListener('message', (event) => {console.log("ssss", event.data)})

难点

条件编译

尽管Flutter支持web端

但当编译成web端时,此时如果使用到了io库(Platform相关)都会在编译时报错。

当编译成原生端,使用web端相关的库(web、js库)同样也会在编译时报错。

那么你就需要进行文件的替换工作,让Flutter在编译时,根据不同的端去引入不同的文件。

比如这一段代码:

     web.window.addEventListener('message', callback.toJS);void callback(web.Event e) {print("收到js交互=====${e.data.dartify()}");}

这里我们需要一定要使用到web库相关的内容,才有window环境以及调用addEventListener,但是你在原生端,这段代码会让你在编译时就报错了。
因此你需要去做文件替换。

自己创建两个文件:

import './vm/ai_web_js.dart' if (kIsWeb) 'dart:js_interop';
import './vm/ai_web_window.dart' if (kIsWeb) 'package:web/web.dart' as web;

在原生端使用的是我们自己写的文件,实现的是空方法。

在web端使用对应的库文件

链接为hash链接加载空白的问题

当链接为hash链接时,iframe会将src从链接转换成另外的格式文件data:text/html

js有提供一个内置的api为encodeURIComponent

比如有一个html为:

<div id="myDiv"><h1>Hello, World!</h1><p>This is a sample HTML code.</p>
</div>

通过api编码之后变成了类似这样:

"%3Cdiv%20class%3D%22s-skin-container%20s-isindex-wrap%20skin-gray-event%22%3E%3C%2Fdiv%3E%3Cdiv%20id%3D%22head%22%20class%3D%22%22%3E%3Cdiv%20id%3D%22s_top_wrap%22%20class%3D%22s-top-wrap%20s-isindex-wrap%20%22%20style%3D%22left%3A%200px%3B%22%3E%3Cdiv%20class%3D%22s-top-nav%22%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22s-center-box%22%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cdiv%20id%3D%22s-top-left%22%20class%3D%22s-top-left-new%20s-isindex-wrap%22%3E%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.aitab-image-long%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2049px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%20-2px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.aitab-image-short%20%7B%0A%20%20%20%20%20%20%20%20%20%

然后再加上前缀data:text/html,这种特殊格式标识变成URL:

const dataURL = "data:text/html," + encodedHTML;

放入iframe的src中去进行处理。

但是当我们的链接是hash链接,我们打包成web项目可以选择hash路由或者history路由,hash路由是通过监听hash值的变化去响应不同的js数据在同一个html去做不同的渲染

那么这个时候,就要求你的html中的js必须能够正常请求响应,才能触发监听去做数据的呈现。

测试发现,当链接为hash链接时,能正常展示html,但是内部需要的js已经不做网络请求了,因为根本就不是加载链接,而是加载一个普通的文本

<!DOCTYPE html>
<html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>aiyjcp</title><script>var coverSupport = 'CSS'in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=./static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=./static/js/chunk-vendors.bc6b93b6.js></script><script src=./static/js/index.d07f5f7d.js></script></body>
</html>

那么,至此我们就发现了问题了:

原因在于flutter_inappwebview会对url获取html文本,进行转码变成特殊的url格式(data:text/html格式),但是加载出html之后,内部需要的js和css都不进行网络请求获取,导致无法监听到hash值的变化以及所需要的资源,导致可能出现页面空白(如果你使用hash路由),或者样式丢失(如果你使用history路由)

那么就有三种解决方案:

  • 第一种,不要让插件对URL进行转码
  • 第二种,研究如何让转码还原之后的html再次进行网络请求加载出需要的JS和CSS文件
  • 第三种,再嵌套一层iframe,插件对第一层进行转码还原之后,内部还是一个iframe,这个时候内部的iframe就不会对src进行再次转码了,但是这种情况,数据通信又需要做改变,由父子关系,变成父到子再到孙子关系

问题出在配置上面:
之前在原生端对url做了处理:

      key: webViewKey,initialUrlRequest: URLRequest(url: url.startsWith("http")? WebUri.uri(Uri.parse(url)): WebUri.uri(Uri.file(url)),

但是在web环境并且使用了非安全模式,这种方式会对url进行转码,因此你如果需要打开iframe,请关闭安全模式,网络跨域使用本地代理的方式

            "name": "dev_web","request": "launch","type": "dart","args": ["--target","lib/ai_main_dev.dart",// "--web-browser-flag",// "--disable-web-security","--web-renderer","html"]

跨域问题

可以使用这个浏览器插件:

https://chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

数据传递和交互问题

Js是弱语言类型,Dart是强语言,两种不同类型的数据互相转换在某种数据格式上是不被支持的,但是String、num、boolean这种基础数据类型是被允许的,因此我们需要尽量保持输入和输出都是字符串类型的,再到不同场景去解析即可。

例如iframe端传送过来的数据,我需要在dart层提前声明,然后进行转换,变成dart端的数据,在传输回去的时候,同样变成js端的数据传输回去,类型都是string,都能被支持。

尽管这种方式解决了编译和运行的问题,但是却失去了相应的代码提示,如果你有更好的方法,欢迎在下方提出,下一篇会解决Dio以及请求相关的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/493124.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS信息收集(小迪网络安全笔记~

免责声明&#xff1a;本文章仅用于交流学习&#xff0c;因文章内容而产生的任何违法&未授权行为&#xff0c;与文章作者无关&#xff01;&#xff01;&#xff01; 附&#xff1a;完整笔记目录~ ps&#xff1a;本人小白&#xff0c;笔记均在个人理解基础上整理&#xff0c;…

基于w25q128的智能门禁

项目需求 1. 矩阵键盘输入密码&#xff0c;正确则开锁&#xff0c;错误则提示&#xff0c;三次错误蜂鸣器响3秒&#xff1b; 2. 按下#号确认输入&#xff0c;按下*号修改密码&#xff1b; 3. 密码保存在 W25Q128 里&#xff1b; 4. OLED 屏幕显示信息。

【计算机网络】期末考试预习复习|中

作业讲解 转发器、网桥、路由器和网关(4-6) 作为中间设备&#xff0c;转发器、网桥、路由器和网关有何区别&#xff1f; (1) 物理层使用的中间设备叫做转发器(repeater)。 (2) 数据链路层使用的中间设备叫做网桥或桥接器(bridge)。 (3) 网络层使用的中间设备叫做路…

开放词汇目标检测(Open-Vocabulary Object Detection, OVOD)综述

定义 开放词汇目标检测&#xff08;Open-Vocabulary Object Detection, OVOD&#xff09;是一种目标检测任务&#xff0c;旨在检测和识别那些未在训练集中明确标注的物体类别。传统的目标检测模型通常只能识别有限数量的预定义类别&#xff0c;而OVOD模型则具有识别“开放词汇…

单点登录平台Casdoor搭建与使用,集成gitlab同步创建删除账号

一&#xff0c;简介 一般来说&#xff0c;公司有很多系统使用&#xff0c;为了实现统一的用户名管理和登录所有系统&#xff08;如 GitLab、Harbor 等&#xff09;&#xff0c;并在员工离职时只需删除一个主账号即可实现权限清除&#xff0c;可以采用 单点登录 (SSO) 和 集中式…

算法笔记—前缀和(动态规划)

【模板】前缀和_牛客题霸_牛客网 (nowcoder.com) #include <initializer_list> #include <iostream> #include <vector> using namespace std;int main() {//输入数据int n,q;cin>>n>>q;vector<int> arr;arr.resize(n1);for(int i1;i<…

力扣438-找到字符串中所有字母异位词

力扣438-找到字符串中所有字母异位词 力扣438-找到字符串中所有字母异位词原题地址&#xff1a;https://leetcode.cn/problems/find-all-anagrams-in-a-string/description/ 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词的子串&#x…

linux-----进程及基本操作

进程的基本概念 定义&#xff1a;在Linux系统中&#xff0c;进程是正在执行的一个程序实例&#xff0c;它是资源分配和调度的基本单位。每个进程都有自己独立的地址空间、数据段、代码段、栈以及一组系统资源&#xff08;如文件描述符、内存等&#xff09;。进程的组成部分&am…

胡九道:经典传承(贵宾酒)

胡九道的由来 在辽阔的科尔沁草原上&#xff0c;有一个美丽的女子&#xff0c;她才貌双全&#xff0c;知书达礼&#xff0c;她就是历史上著名的孝庄皇后。大玉儿不仅聪慧过人&#xff0c;而且深具母仪天下的气质&#xff0c;深受百姓和皇室的敬爱。当她跟随丈夫皇太极入关来到…

【Mongo工具】Mongo迁移工具之Mongo-shake

Mongo-Shake 简介 Mongo-Shake 是一个基于 MongoDB 操作日志&#xff08;oplog&#xff09;的通用服务平台。它从源 MongoDB 数据库中获取操作日志&#xff0c;并在目标 MongoDB 数据库中重放&#xff0c;或者通过不同的隧道发送到其他终端。如果目标端是 MongoDB 数据库&…

EGO Swarm翻译

目录 摘要 Ⅰ 介绍 Ⅱ 相关工作 A . 单四旋翼局部规划 B . 拓扑规划 C. 分布式无人机集群 Ⅲ 基于梯度的局部规划隐式拓扑轨迹生成 A.无需ESDF梯度的局部路径规划 B.隐式拓扑轨迹生成 Ⅳ 无人机集群导航 A 机间避碰 B. 定位漂移补偿 C. 从深度图像中去除agent Ⅴ …

虚拟机断网没有网络,需清理内存,删除后再重启

进入NetworkManager可能没权限&#xff0c;设置权限777 to

整合 Knife4j 于 Spring Cloud 网关:实现跨服务的 API 文档统一展示

&#x1f3af;导读&#xff1a;本文档概述了构建和配置基于JDK 17、Spring Boot 3.0.7及Spring Cloud 2022.0.3的微服务系统&#xff0c;特别聚焦于集成Knife4j以增强API文档管理和接口测试功能。文中详细介绍了如何在Spring Boot应用中添加Knife4j依赖、配置Swagger UI路径和A…

使用光耦合器测量电压:实用指南

光耦合器&#xff0c;也称为光隔离器&#xff0c;是用于电气隔离和信号传输的多功能组件。其应用之一是测量电路中的电压。本文介绍了如何利用光耦合器进行电压测量&#xff0c;阐明了其操作和实际用途。 使用光耦合器进行电压测量的工作原理 使用光耦合器进行电压测量依赖于其…

LeetCode刷题day29——动态规划(完全背包)

LeetCode刷题day29——动态规划&#xff08;完全背包&#xff09; 377. 组合总和 Ⅳ分析&#xff1a; 57. 爬楼梯&#xff08;第八期模拟笔试&#xff09;题目描述输入描述输出描述输入示例输出示例提示信息 分析&#xff1a; 322. 零钱兑换分析&#xff1a; 279. 完全平方数分…

【STM32 Modbus编程】-作为主设备写入多个线圈和寄存器

作为主设备写入多个线圈和寄存器 文章目录 作为主设备写入多个线圈和寄存器1、硬件准备与连接1.1 RS485模块介绍1.2 硬件配置与接线1.3 软件准备2、写入多个线圈2.1 数据格式2.2 发送数据2.3 结果3、写入多个寄存器3.1 数据格式3.2 发送数据3.3 结果本文将实现STM32作为ModBus主…

Unity 圆形循环复用滚动列表

一.在上一篇垂直循环复用滚动列表的基础上&#xff0c;扩展延申了圆形循环复用滚动列表。实现此效果需要导入垂直循环复用滚动列表里面的类。 1.基础类 using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using …

【前后端】HTTP网络传输协议

近期更新完毕&#xff0c;建议关注、收藏&#xff01; http请求 URL 严格意义上应该是URI http or https http不加密不安全&#xff1b;https加密协议&#xff08;公网使用&#xff09; http端口号80 https端口号443GET or POST GET和POST是HTTP请求的两种基本方法. 因为POST需…

基于LSB最低有效位的音频水印嵌入提取算法FPGA实现,包含testbench和MATLAB对比

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 &#xff08;完整版代码包含详细中文注释和操作步骤视…

疾风大模型气象系统:精准预报,引领未来

精准预报,引领未来 在当今快速变化的世界中,天气预报已成为日常生活和社会运行中不可或缺的一部分。从规划日常出行到防范极端天气影响,高精准的气象服务正在重新定义我们的生活方式。而在这一领域,疾风大模型气象系统以其卓越的技术实力和领先的预测能力,正引领气象服务…