杭州企业seo网站优化wordpress指定分类不显示图片

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

杭州企业seo网站优化,wordpress指定分类不显示图片,广东建设监理协会网站题库,网站建设内容方法本文字数#xff1a;7743字 预计阅读时间#xff1a;60分钟 01 前言 首先说明一下#xff0c;这篇文章是给具备Flutter开发经验的客户端同学看的。Flutter 的诞生虽然来自 Google 的 Chrome 团队#xff0c;但大家都知道 Flutter 最先支持的平台是 Android 和 iOS#xff… 本文字数7743字 预计阅读时间60分钟 01 前言  首先说明一下这篇文章是给具备Flutter开发经验的客户端同学看的。Flutter 的诞生虽然来自 Google 的 Chrome 团队但大家都知道 Flutter 最先支持的平台是 Android 和 iOS至今最核心的维护平台依然是 Android 和 iOS。由于 dart 语言的学习成本不高Flutter 的响应式UI与 ComposeUI 和  SwiftUI 都有极大的相似之处整体的架构思路也更偏向于客户端的模式再加上为了实现很多硬件或 Native 相关的基础功能也需要专业的客户端开发知识所以 Flutter 更多的是被客户端开发同学认可并使用在我们的团队中Flutter 已经是客户端开发同学的必备基本技能。 在此背景下Flutter 最初并不在 web 端上发力。不过由于 Flutter 本身就是携带了 web 的基因在 Flutter2 发布的同时也发布了 web 的稳定版。那么它有什么优势和劣势呢 优势 1. 零学习成本当你已经掌握了 Flutter 开发能力后哪怕你对 htmlcssJavaScript 和主流的前端框架不那么了解也不影响你开发 web 应用。 2. 跨端能力可将现有 Flutter 移动应用拓展到 web在多个平台共享代码降低开发成本。劣势 1. 兼容性问题使用 html 模式来进行渲染时应用的大小相对较小但可能会出现兼容性问题。 2. 包体积增加使用 canvaskit 模式来进行渲染时虽然性能较好且可以降低不同浏览器渲染效果不一致的风险但会增加包体积。 分析了优势劣势后我们发现如果单纯的做个 web 端应用Flutter 并没有优势前端开发同学大概也不会使用 Flutter 进行 web 开发确实没必要比如包体积增加或有一定的性能损失还需要学习新语言与开发思路原生开发不香么Flutter Web 到底有什么用呢 带着这样的想法在使用 Flutter 后的很长时间都不曾调研过 web 端的支持。但随着业务和内部需求的发展变化我们有了使用 Flutter 进行 web 开发的想法。下面我来说一下使用 Flutter Web 主要的三个场景。 02 Flutter Web的使用场景 1、客户端团队内部的web需求 在后疫情时代降本增效的大背景下我们会更多的使用自研工具。自研工具的使用和结果展示的可视化通常以网页的形式展现。客户端同学使用 Flutter Web 进行网页开发学习成本低完全可以快速的开发网页本人在使用 Vue 框架进行 web 端开发时感受出客户端和前端的 UI 布局思路还是有很大不同的css 很灵活约束性低这个与客户端布局的强约束性差异很大所以对于客户端开发来说使用 Flutter 开发网页应用时更顺手。对于全员掌握 Flutter 技能的我们团队来说已经是0成本了。 2、简单的web端业务需求 web 端承载了很多活动需求这些需求的特点是时效性强功能较简单且不需长期维护。但这些需求经常是在某一时间段大量产生的比如逢年过节的一些活动或榜单或突然产生的比如蹭热点的即时需求。这些工作的插入有时会导致一些长期迭代的 web  端需求需要延期影响团队的整体排期。由于这些需求开发难度不大性能要求不高不需长期维护意味着即使团队里不再有人使用 Flutter 或 Flutter Web 有一天挂了也没什么影响那么就可以让 Flutter 开发同学加入进来平摊了一部分工作以此来提升整个团队的效率。 3、客户端与web端的跨端 随着 Flutter Web 趋于稳定用 Flutter 实现的 App 可以低成本的被打包成 web 版了毕竟对于用户来说使用浏览器打开个网页比下载个 App 成本低多了。这种情况下我们就可以利用 Flutter 的跨端优势节约很多人力资源避免去重新开发一套 web 端了。 好的既然有了使用场景我们就好好来走一下 Flutter Web 是怎么开发部署上线的流程。 03 Flutter Web工程的创建和业务实现 1、创建与运行 我们使用 Android Studio 作为IDE以 Flutter 3.10.5 版本为基础创建一个 Flutter Web 工程。 创建一个 New Flutter Project在选择 Platforms 的时候只勾选 Web然后直接 Create。 然后我们发现在工程目录里多了个 web 的文件夹 如果你是为现有的 Flutter 工程添加 Web 的支持只需在项目根目录运行如下命令即可 flutter create –platformsweb . 项目创建好了如果想要 run 起来只需选择 chrome 浏览器点击 run 就行了 然后我们就可以在浏览器看到运行结果了当然我们也可以打开开发者模式方便查看与调试 这部分跑通后非常恭喜你可以愉快的用 Flutter 开发网页了接下来我们实现一个业务需求做一个网页搜索功能。 业务功能上的开发实现我就不做赘述了可以告诉做过 Flutter 开发的同学没什么不同基础配置/网络模块/数据共享/路由等该怎么封装就怎么封装我也不过是直接拿了之前客户端 Flutter 工程相应模块的代码稍作修改而已。UI 上的开发也是该怎么布局怎么布局业务的开发体验上和客户端使用 Flutter 没什么不同。 2、window 在 web 端开发的时候我们通常会使用 window 对象进行一些操作。window 对象代表一个浏览器窗口或一个框架。常用的 event 监听打开网页等操作都需要 window 对象。Flutter 自带的 dart:html 封装了 window我们可以通过它来实现获取 window 的属性或对 window 进行操作比如 //打开网页 window.open(http://www.baidu.com,);//监听event window.addEventListener(mousedown, (event)  {//do something }); 另外 window 也可以帮助我们区分运行环境。 3、浏览器运行环境区分 客户端通常需要区分的是 Android 和 iOS 这两个不同的运行环境而web端是需要通过 UA 来区分不同的浏览器环境的不同环境下的UI/逻辑等会有差别。在国内我们最常需要区分 PC 端/移动端/ Android 端/ iOS 端/微信网页/微信小程序这几个。那么我们可以定义一个类利用 window.navigator.userAgent 去区分这些环境 import dart:html;class DeviceUtil {static final DeviceUtil _instance  DeviceUtil._private();static DeviceUtil get()  _instance;factory DeviceUtil()  _instance;late String ua;DeviceUtil._private() {ua  window.navigator.userAgent;}//移动端isMobile() {return RegExp(rphone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone).hasMatch(ua);}//iOS端isIos() {return RegExp(r(i[^;];( U;)? CPU.Mac OS X).hasMatch(ua);}//Android端isAndroid() {var isAndroid  ua.contains(Android) || ua.contains(Adr);return isAndroid;}//微信环境isWechat() {return ua.contains(MicroMessenger);}//微信小程序环境isMiniprogram() {if (ua.contains(micromessenger)) {//微信环境下if (ua.contains(miniprogram)) {//小程序;return true;}}return false;} } 4、开发/测试/生产环境区分  同客户端一样web 端也需要区分开发/测试/生产环境。同客户端的方式一样我们还是可以通过配置不同的入口文件来实现环境的区分。如 main_dev.dart void main() {AppConfig.init(ConfigType.dev);root_main.main(); } main_test.dart void main() {AppConfig.init(ConfigType.test);root_main.main(); } main_online.dart void main() {AppConfig.init(ConfigType.online);root_main.main(); } 在 AppConfig.init() 就可以根据不同的环境做不同的配置了。  5、其他常用库或插件 关于数据共享/网络/UI/动画等库就不做介绍了因为这些库和平台不相关用各自熟悉的就好下面是来介绍一下为了实现一些浏览器相关功能需要用到的插件。 shared_preferences 在客户端开发的时候我们知道如果需要对一些数据实现轻量级的本地序列化可以使用 shared_preferences其实现对应 Android 的 SharedPreferences 和 iOS 的 NSUserDefaults。而在进行 web 开发的时候我们知道如需在本地序列化一些数据的话可以使用 LocalStorage。其实 Flutter 的 shared_preferences 插件也是支持 web 的其实现也正是封装了 LocalStorage。关于 shared_preferences 的使用也不做赘述了已经非常熟悉了。image_picker_for_web 来自于我们熟悉的 image_picker 插件。根据浏览器的不同支持或部分支持拍照/拍视频/读取图片/读取视频等。js 这个插件是用来使用注解的方式帮助你用 Dart 调用 JavaScript API 或用 JavaScript 调用 Dart API 的。 好了到此为止我觉着使用 Flutter 开发一个常规的 web 业务已经不成问题了。接下来我们探讨一下如何调试呢 04 调试 跑通后应该如何调试呢我们先来说明一下 PC 端的调试方式。 1、PC端调试 如果熟悉浏览器开发者模式可直接使用浏览器进行调试打 log 或 debug 都是没问题的也可以看到源码可以抓包 当然客户端同学可能不熟悉浏览器开发者模式也没关系利用 Android Studio之前在客户端写 Flutter 怎么调试现在写 web 端依旧可以怎么调试。 介绍完 PC 端的调试那么在移动端应该如何调试呢 2、移动端调试 我们依旧可以用 PC 上的浏览器红色箭头指向的位置可以切换至移动端模拟器设备可以选择机型。但更多的时候我们希望可以真机调试。熟悉 vue 框架的同学都知道在本地调试的时候会给出两个地址如下图所示 我们可以在手机浏览器上输入 Network 显示的 ip 地址进行调试。在 Flutter 环境上并没有提供相应的 ip 地址我们可以通过 flutter 的本地打包命令指定一个地址如下所示 flutter run -d chrome –web-hostname 10.2.136.130 -t lib/main_test.dart –web-port 8080 指定本机的 ip 地址和端口号然后在手机浏览器上输入 10.2.136.130:8080 之后我们如何看到调试信息呢由于使用 Chrome 浏览器需要科学上网在此我们以 iPhone 的 Safari 浏览器 PC 端的 Safari 浏览器为例 1.首先我们需要用数据线将手机和电脑连接起来。2.找到 Safari 的 开发 菜单找到你手机的名称然后选择相应的地址如下图所示3.然后我们就可以看到网页检查器进行调试了如下图所示 如何进行调试我们已经清楚了假设我们已经开发完成了如何打包部署上线呢 05 打包部署上线 1、打包 Flutter Web 的打包非常简单运行 flutter build web 即可。但这样显然是不够的因为我们需要区分环境来打不通的包。 在上一章节我们配置了不同的入口文件我们以 dev 环境为例其入口文件是 main_dev那么我们的打包命令就变成了 flutter build web -t lib/main_dev.dart 这行命令执行完成后报错了报错信息如下 这是个图标数据加载问题我们加上–no-tree-shake-icons即可。执行命令如下 flutter build web -t lib/main_dev.dart –no-tree-shake-icons 然后我们就会在项目根目录的 build 文件夹下找到 web 这个文件夹对应的就是 web 前端打出来的 dist 文件夹。包含了以下文件 编译产物有了那么如何部署呢  2、部署 官方给了如下的部署方式  https://flutter.cn/docs/deployment/web#deploying-to-the-web  看了官方文档后我发现这三种部署方式并不适用于我们的项目。由于 CDN 具有提高网站性能和用户体验减轻原始服务器的负载等优势目前我们团队已经搭建了 CDN 部署平台。既然如此我们的部署方案也需要往这方面靠。CDN 部署配置主要要解决的问题就是各种资源的路径问题。 1修改index.html的CDN资源路径 我先来简单说明一下 FlutterWeb 编译产物如下图所示 assets 包含了我们所有的静态资源文件包括图片字体文件等。 最重要是 flutter.js 和 main.dart.js 这两个文件。其中 flutter.js 为入口的 js 文件我们可以打开 web 目录下 index.html !DOCTYPE html html headbase href\(FLUTTER_BASE_HREFmeta charsetUTF-8meta contentIEEdge http-equivX-UA-Compatiblemeta namedescription contentA new Flutter project.meta nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentblackmeta nameapple-mobile-web-app-title contentflutter_weblink relapple-touch-icon hreficons/Icon-192.pnglink relicon typeimage/png hreffavicon.png/titleflutter_web/titlelink relmanifest hrefmanifest.jsonscript// The value below is injected by flutter build, do not touch.var serviceWorkerVersion  null;/script/script--script srcflutter.js defer/script /head bodyscriptwindow.addEventListener(load, function(ev) {// Download main.dart.js_flutter.loader.loadEntrypoint({serviceWorker: {serviceWorkerVersion: serviceWorkerVersion,},onEntrypointLoaded: function(engineInitializer) {engineInitializer.initializeEngine({}).then(function(appRunner) {appRunner.runApp();});}});});/script /body /html 看到 script srcflutter.js defer/script 这行。而 main.dart.js 是我们的 dart 业务代码被编译成的 js 文件。flutter.js 会加载 main.dart.js 和其它文件。默认情况下flutter.js 会加载各个文件包括资源文件( assets )都使用的是相对路径。首先就是通过 loadEntrypoint () 方法加载 main.dart.js 这个文件 //flutter.js async loadEntrypoint(options) {const { entrypointUrl  \){baseUri}main.dart.js, onEntrypointLoaded } options || {};return this._loadEntrypoint(entrypointUrl, onEntrypointLoaded);} 但我们发现貌似 entrypointUrl 是可以自己传递的于是我们从官网文档里找到了 自定义web应用初始化 的链接 https://flutter.cn/docs/platform-integration/web/initialization 有如下的参数可传 其中 loadEntrypoint() 方法可以传递 entrypointUrl 参数来指定 main.dart.js 的路径。而 initializeEngine() 方法可以通过传递 assetBase 参数来指定 CDN 资源路径。这么看来我们完全可以通过将这两个参数设置为绝对路径来解决 main.dart.js 的加载与 CDN 资源路径的问题。需要注意的是 initializeEngine() 方法是 Flutter3.7.0 开始才支持的。 我们改一下 index.html window.addEventListener(load, function(ev) {// Download main.dart.js_flutter.loader.loadEntrypoint({serviceWorker: {serviceWorkerVersion: serviceWorkerVersion,},entrypointUrl: YOUR_CDN_ABSOLUTE_PATH/main.dart.js,onEntrypointLoaded: function(engineInitializer) {engineInitializer.initializeEngine({assetBase: YOUR_CDN_ABSOLUTE_PATH}).then(function(appRunner) {appRunner.runApp();});}});}); 我们再打个包还是会报错找不到 flutter.js还是因为路径问题。处理方式更简单了直接在 index.html 里配置成绝对路径即可。另外我们发现 Icon-192.pngfavicon.pngmanifest.json 这几个文件也是相对路径那么我们一次性都改成绝对路径 headbase href\(FLUTTER_BASE_HREFmeta charsetUTF-8meta contentIEEdge http-equivX-UA-Compatiblemeta namedescription contentA new Flutter project.meta nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentblackmeta nameapple-mobile-web-app-title contentflutter_weblink relapple-touch-icon hrefYOUR_CDN_ABSOLUTE_PATH/icons/Icon-192.pnglink relicon typeimage/png hrefYOUR_CDN_ABSOLUTE_PATH/favicon.png/titleflutter_web/titlelink relmanifest hrefYOUR_CDN_ABSOLUTE_PATH/manifest.jsonscript// The value below is injected by flutter build, do not touch.var serviceWorkerVersion  null;/scriptscript srcYOUR_CDN_ABSOLUTE_PATH/flutter.js defer/script /head 再打个包上传到 CDN嗯一切都正常了 到这里看上去都完美了但突然想起来不对啊我们是区分开发/测试/生产环境的相应的 CDN 路径也是不同的。修改 index.html 的方式指定的都是绝对路径不符合我们的需求啊。既然如此我们再改改。 2区分不同环境配置CDN路径 正常情况下我们开发/测试/生产环境的 host 会映射到不同的 CDN 地址上。另外我们在本地调试的时候用的是本地资源不需要配置 CDN 地址。那么我们的 index.html 修改如下 !DOCTYPE html htmlheadbase idhrefmeta charsetUTF-8meta contentIEEdge http-equivX-UA-Compatiblemeta namedescription content摸鱼kik.meta nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentblackmeta nameapple-mobile-web-app-title contentmoyulink idapple-touch-icon relapple-touch-icon hreficons/Icon-192.pnglink idicon relicon typeimage/png hreffavicon.png /titlemoyu/titlelink idmanifest relmanifest hrefmanifest.jsonscript// The value below is injected by flutter build, do not touch.var serviceWorkerVersion  null;/scriptscript idflutter_js defer/script /headbodyscriptvar YOUR_CDN_HOST  ; //默认是本地调试不需要配置cdn地址if (document.location.origin  YOUR_DEV_HOST) {YOUR_CDN_HOST  YOUR_DEV_CDN_HOST;} else if (document.location.origin  YOUR_TEST_HOST) {YOUR_CDN_HOST  YOUR_TEST_CDN_HOST;} else if (document.location.origin  YOUR_PRODUCT_HOST) {YOUR_CDN_HOST  YOUR_PRODUCT_CDN_HOST;}//需要相应的element并配置其绝对路径document.getElementById(flutter_js).setAttribute(src, \){YOUR_CDN_HOST}flutter.js);document.getElementById(manifest).href  \({YOUR_CDN_HOST}manifest.json;document.getElementById(icon).href  \){YOUR_CDN_HOST}favicon.png;document.getElementById(apple-touch-icon).href  \({YOUR_CDN_HOST}icons/Icon-192.png;window.addEventListener(load, function (ev) {// Download main.dart.jsif (YOUR_CDN_HOST  ) {//本地调试_flutter.loader.loadEntrypoint().then(function (engineInitializer) {return engineInitializer.initializeEngine();}).then(function (appRunner) {return appRunner.runApp();});} else {//部署后_flutter.loader.loadEntrypoint({entrypointUrl: \){YOUR_CDN_HOST}main.dart.js,}).then(function (engineInitializer) {return engineInitializer.initializeEngine({assetBase: \({YOUR_CDN_HOST}});}).then(function (appRunner) {return appRunner.runApp();});}});/script /body/html 1.首先根据当前域名 document.location.origin 的不同区分不同环境下的 CDN 地址YOUR_CDN_HOST。默认是是空即本地调试情况不需要配置 CDN 地址。2.为 flutter.jsicons/Icon-192.pngfavicon.pngmanifest.json 指定 id并通过 document.getElementById() 方法找到相应元素为他们配置 CDN 的绝对路径。3.如上一章节所示配置 entrypointUrl 与 assetBase。 一切真正的完美了到此为止如果打包部署我们就讲完了。下一章节我要说明一下在开发过程中遇到的一些意想不到的坑与相应的处理方式。 06 Flutter Web避坑指南 由于在实际项目中我们是将一个现成的 Flutter 应用打包成 web 版。原先的 App 已经支持了 AndroidiOSMacWindows 这四个平台。这一章节将针对实际项目中遇到的一些问题进行说明。包含如下几个问题 1.Dart 中 int 和 JS 中 Number 的转换问题。2.导入特定平台依赖项。3.路由问题。4. iPhone 手机 Safari 浏览器的侧滑返回问题。5. lottie 问题。6.跨域问题。 接下来我会针对这几个问题一一进行说明。 1、Dart中int和JS中Number的转换 由于我们的项目是将一个线上的 Flutter 的 App 项目直接打包成 web 版在运行的时候发现我们发送的请求时常返回错误的数据比如说 我们请求了一个 feed 列表然后点击某一个 item 进入详情页。 这时候列表都能正常的展示但进入详情页服务端会报错 不存在这个 feed。 通过跟服务端同学的沟通发现出错的原因是在进入详情页请求 feed 详情时带的 id 错了。 这怎么会id 都是列表接口给的web 端也不会做任何处理进详情页直接带过去而且线上 App 都是好好的也没有 bug 啊。 经过排查发现id 定义的是 int 类型在 Dart 中只有 int 和 double 这两种表达数字的数据类型其中 int 的取值范围是 -2^63 2^63 - 1可以同等于 Java 中的 Long。 在打包成 web 版式Dart 中的 int 会被编译成 JS 中的 Number问题就出在这儿了。Number 的取值范围是  -2^53 2^53 - 1。很不幸我们模型中一些的 id 的取值范围大于 2^53 - 1从而转换成 JS 的 Number 后出错了。 原因找出来了解决方法也显而易见了 这种可能会超出 JS 取值范围的字段需要改成 String 类型。 修改完后这个问题顺利解决。 2、导入特定平台依赖项 在使用 Flutter 进行 web 端开发的时候我们会经常使用 dart:html 这个库来实现一些功能。在仅仅打包 web 端时没问题但由于我们的项目是跨平台的打包 App 时就会出现以下问题 是因为 dart:html 这个库只在 web 环境下能找得到而编译 App 时并没有这个包那也就意味着我们只能在 web 打包时使用 dart:html 这个库。解决方法如下 import dart:html if (dart.library.io) io_platform.dart as platform; 在 import 的时候需要区分平台dart.library.io 意味着是在非 web 环境下dart:io 不支持 web。所以在非 web 环境下我们 import 的是 io_platform.dart 这个文件。这时候我们有个疑问非 web 环境下不引入 dart:html 不就好了么为什么要引入另一个文件呢原因是因为编译的时候还是会找相应的方法我们没有引入任何库导致相应的代码编译不过所以我们自己创建了一个 io_platform.dart 文件去实现相应的接口。当然由于这些方法不会被调用到其实只是个空实现。 比方说我们现在用到了 dart:html 以下的方法和变量 platform.window.navigator.userAgent; //navigator.userAgent platform.window.location.origin; //location.origin platform.window.location.href; //location.href platform.window.open(url, ); //open(String, String) 于是我们的 io_platform.dart 是这么实现的 IoPlatformWindow get window  IoPlatformWindow();class IoPlatformWindow {IoNavigator navigator  IoNavigator();IoLocation location  IoLocation();open(String url, String name) {} }class IoNavigator {String userAgent  ; }class IoLocation {String origin  ;String href  ; } 实际上只是为了解决编译的问题。如果大家有更好的方式解决这个问题请给我留言哈。接下来我们再来看路由问题。 3、路由问题 我们知道常规 web 端开发时进行页面跳转传参是靠在 url 上拼参数如 YOUR_HOST_NAME/PATH?feedId123 但显然 Flutter 并不是这么传参的。比方说我们进入一个详情页那么它的路由就是YOUR_HOST_NAME/#detailPage而参数并不可见。这样的话在我们刷新页面的时候也拿不到参数自然会出现问题。 解决方法呢比如说可以在 LocalStorage 里记录参数信息然后做一个工具类去记录路由栈。但这也有问题因为我们可以复制任意链接分享给别人那么别人打开的时候本地没有记录自然也就无法正常打开页面。这种情况下甚至无法引导用户去首页。既然如此那我们干脆处理成用户在刷新的时候重新将网页指定到首页 url。 void register() {if (platform.window.location.href !platform.window.location.origin  / platform.window.location.href !platform.window.location.origin  /#/) {platform.window.location.href  platform.window.location.origin  /;}} 在发现网页 url 不是首页的情况下强制将 href 处理到首页。 然后在 runApp(const MyApp());的 MyApp 控件的 initState() 方法中调用 register()。 到这呢我们起码解决了分享出去一个链接完全打不开页面的尴尬好歹让用户看到首页了。接着我们想想办法带点儿参数进去。 在此呢我们可以用 window.history.replaceState() 为我们的 url 添加参数且不会留下历史记录。这正是我们想要的代码如下 platform.window.history.replaceState({}, , newUrl); 那么接下来我们应该为 url 添加什么参数呢由于 web 版是 App 代码直接改造的在首页会有很多初始化的处理直接跳转至某些路由页面即使带了参数页面也无法正常展示。这时候我想到了我们在 App 开发的时候常用的跳转协议 在进行 App 开发的时候我们会用去 scheme 处理一些的 Push 跳转或网页的跳转封装成跳转协议。 而在 web 我们可以添加跳转协议需要的参数经过解析后封装成我们既有的跳转协议低成本的完成页面跳转和加载仿佛是可行的。我们的跳转协议结构如下 OUR_SCHEME/PATH?param11param22 这么看就更简单了我们将 url 拼上 ?param11param22在处理的时候将 ? 前的内容替换为 OUR_SCHEME/PATH 就直接将 url 替换成我们的跳转协议了。然后再调我们统一的协议处理方法即可。经过验证效果如我们所替代的完美的实现了刷新/分享链接的处理。 4、iPhone手机Safari浏览器的侧滑返回问题 在使用 iPhone 真机进行调试的时候我们发现手势在真机设备的边缘进行侧滑返回的时候会导致栈底的根页面也返回并且导致整个 Flutter 应用重新加载体验非常不好如下图所示 目前这个问题官方没有很好的解决方法我们只能通过对 flt-glass-pane 标签( Flutter 根布局对应的标签)增加 touchstart 监听对边缘处手势进行忽略。在 index.html 中增加如下代码 _flutter.loader.loadEntrypoint({entrypointUrl: \){MOYU_HOST}main.dart.js,}).then(function (engineInitializer) {return engineInitializer.initializeEngine({assetBase: ${MOYUHOST}});}).then(function (appRunner) {return appRunner.runApp();}).then(function () {boundaryCheck();});function boundaryCheck() {const flutterRoot  document.getElementsByTagName(flt-glass-pane).item(0);flutterRoot.addEventListener(touchstart, (e)  {var pageX  e.targetTouches[0].pageX;if (pageX  24  pageX  window.innerWidth - 24) return;e.preventDefault();});} 在 main.js.dart 加载Flutter 引擎初始化完成后调用 boundaryCheck() 方法进行手势位置边缘检测如果在边缘处则调用 preventDefault() 方法避免根部页面返回并重新加载。 5、lottie问题 由于我们的业务中使用了大量的 lottie 动画在各端包括 PC 端的浏览器上运行都没有问题。但在移动端真机上部分 lottie 动画会导致崩溃。查其原因是因为在移动端真机上不支持 BlendMode.clear 模式部分 lottie 动画由于支持了 BlendMode.clear 模式导致出现问题。这个需要和 UI 同学进行沟通更新/替换动画等。 6、跨域问题 跨域问题需要和服务端同学共同解决都是现成的方案。当然如果是在本地调试阶段也仅限于本地调试的情况你也可以通过以下步骤解决跨域问题 1.前往 flutter\bin\cache 文件夹删除 flutter_tools.stamp 文件。2.前往 flutter\packages\flutter_tools\lib\src\web打开 chrome.dart 文件。3.找到 –disable-extensions 这部分在最下面添加 –disable-web-security重新 build 即可。 07 总结 我们利用 Flutter 完成了一个 web 项目的开发打包部署到 CDN 上并最终上线。 FlutterWeb 虽然已经稳定了一段时间了但是除非是有明确的跨端需求并不推荐大家将它用在需要长期迭代大而重的项目中。不过对于我们客户端开发来说在拥有了 Flutter 的技能后除去我们所熟悉的 Android 和 iOS 跨端开发完全可以拓展自己的业务范畴分摊一些合适的 web 端项目进行开发为自己的团队增加更多的业务可能。 另外虽然 Flutter Web 确实还没那么完美之前很多文章分享的延迟组件分包以减小 main.dart.js 大小的方式貌似也不可用了官网明确说明是给 Android 的 AAB 来使用的。但有总比没有强将一个现成的 App 打包成 web 版成本很低。毕竟重新开发一个 web 版的 App 功能工作量也是巨大的。目前继续等着 Flutter 的更新看看未来会不会有更好的支持。