辽宁建设局网站首页,网站建设技术分析,深圳做网站 信科网络,福州网站建设福州需要把原来的app项目移植到web上面#xff0c;在app中使用的是flutter_inappwebview这个库#xff0c;推荐使用这个库#xff0c;因为修复了一部分webview_flutter中存在的问题
在web项目中flutter_inappwebview这个库不支持#xff0c;所以需要自己封装一个web项目中的we…需要把原来的app项目移植到web上面在app中使用的是flutter_inappwebview这个库推荐使用这个库因为修复了一部分webview_flutter中存在的问题
在web项目中flutter_inappwebview这个库不支持所以需要自己封装一个web项目中的webview也就是使用iframe
废话少说上代码
import dart:html;
import dart:js as js;import dart:ui_web;import package:flutter/material.dart;
import package:flutter/widgets.dart;
import package:get/get.dart;
import package:myapp/app/services/screen_adapter.dart;Widget buildWebViewWidget(String url,{Function(int id)? onPlatformViewCreated}) {/// 给js调用的函数void back(){Get.back();}var platformViewRegistry PlatformViewRegistry();//注册platformViewRegistry.registerViewFactory(iframe-webview, (_) {DivElement _mainDiv DivElement()..style.width 100%..style.height 100%..style.position relative;IFrameElement _iFameElement IFrameElement()..style.height 100%..style.width 100%..src url..style.border none;ScriptElement scriptElement ScriptElement();var script // 对话框jswindow.confirm function(message, yesCallback, noCallback){var message message;var choose function(tag){return document.querySelector(tag);}choose(.dialog-message).innerHtml message;choose(.wrap-dialog).className wrap-dialog;choose(#dialog).οnclick function(e){if(e.target.classNamedialog-btn){choose(.wrap-dialog).className wrap-dialog dialog-hide;yesCallback();}else if (e.target.classNamedialog-btn dialog-ml50){choose(.wrap-dialog).className wrap-dialog dialog-hide;noCallback();}};}// 返回按钮功能var drag document.getElementById(floatBtn);var gapWidth ${ScreenAdapter.width(5)}var itemWidth ${ScreenAdapter.width(80)}var itemHeight ${ScreenAdapter.width(80)}var clientWidth document.documentElement.clientWidthvar clientHeight document.documentElement.clientHeightvar newLeft 0var newTop 0drag.addEventListener(click,function(e){//e.stopPropagation();var r confirm(确定返回首页吗?, function(){window.back();}, function(){})})drag.addEventListener(touchstart, function(e){// e.preventDefault();//e.stopPropagation();drag.style.transition none;})drag.addEventListener(touchmove, function(e){// e.preventDefault();// e.stopPropagation();if (e.targetTouches.length 1) {let touch e.targetTouches[0]newLeft touch.clientX - itemWidth / 2;newTop touch.clientY - itemHeight / 2;if(newLeft 0){newLeft 0} if(newLeft clientWidth - itemWidth - gapWidth){newLeft clientWidth - itemWidth - gapWidth}if(newTop 0){newTop0;}if(newTop clientHeight - itemHeight - gapWidth){newTop clientHeight - itemHeight - gapWidth}drag.style.left newLeft pxdrag.style.top newTop px}})drag.addEventListener(touchend, function (e) {// e.preventDefault()//e.stopPropagation();drag.style.transition all 0.3sif (newLeft clientWidth / 2) {newLeft clientWidth - itemWidth - gapWidth} else {newLeft gapWidth}drag.style.left newLeft px}) ;scriptElement.innerHtml script;/// 返回按钮divDivElement _div DivElement()..id floatBtn..draggable true..style.width ${ScreenAdapter.width(80)}px..style.height ${ScreenAdapter.width(80)}px// ..style.backgroundColor red..style.backgroundImage url(assets/assets/images/fanhui.png)..style.backgroundSize cover..style.position absolute..style.left ${ScreenAdapter.width(5)}px..style.top 0..style.transition all 0.3s..style.zIndex 9999;// 对话框样式StyleElement _style StyleElement();_style.innerHtml html,body {margin: 0;padding: 0;font-family: Microsoft YaHei;}.wrap-dialog {position: fixed;top: 0;left: 0;width: 100%;height: 100%;font-size: 16px;text-align: center;background-color: rgba(0, 0, 0, .4);z-index: 10000;display: flex;justify-content: center;align-items: center;}.dialog {position: relative;margin: 10% auto;width: 300px;background-color: #FFFFFF;}.dialog .dialog-header {height: 20px;padding: 10px;background-color: #22b9ff;}.dialog .dialog-body {height: 30px;padding: 20px;}.dialog .dialog-footer {padding: 8px;background-color: #f5f5f5;}.dialog-btn {width: 70px;padding: 2px;cursor: pointer;}.dialog-hide {display: none;}.dialog-ml50 {margin-left: 50px;};_mainDiv.append(_style);// 提示信息框domDivElement _dialogDiv DivElement();_dialogDiv.innerHtml div classwrap-dialog dialog-hide div classdialog iddialogdiv classdialog-headerspan classdialog-title提示/span/divdiv classdialog-bodyspan classdialog-message确定要返回首页吗/span/divdiv classdialog-footerinput typebutton classdialog-btn iddialog-confirm value确认 /input typebutton classdialog-btn dialog-ml50 iddialog-cancel value取消 //div/div/div;_mainDiv.append(scriptElement);_mainDiv.append(_dialogDiv);_mainDiv.append(_div);_mainDiv.append(_iFameElement);return _mainDiv;});/// 注册返回函数js.context[back] back;return SizedBox(width: double.infinity,height: double.infinity,child: HtmlElementView(viewType: iframe-webview,onPlatformViewCreated: (int id) {onPlatformViewCreated?.call(id);},),);
}使用方法
直接判断是否是web,GetPlatform.isWeb 如果是则使用上面封装的不是则调用其他平台的
if(GetPlatform.isWeb)buildWebViewWidgetPlatform(controller.url,onPlatformViewCreated: (id) {controller.isLoading.value false;})参考网址
https://juejin.cn/post/7294638699417042954
