最近有一个新项目，想尝试一下Quasar，据说是一个很好的hybrid框架，由于之前尝试过用cordova + vuejs 开发hybrid APP，并且体验还不错，恰好Quasar又是基于vuejs，且支持cordova。考虑了一下，就入坑了，没准顺便就升级vuejs3了。开始，还是很和谐的，非常快，Quasar的文档也很赞。 直到第二天，当我发现发布到testflight上的iOS版本打开是白屏，可是在开发模式下(quasar dev -m ios）时是很正常的呀？由于之前遇到过类似的问题： 1. vue-router的用了history模式，而不是hash模式 这个仔细排查，通过（quasar inspect）仔细查看生成的vite配置，非常确定vue-router相关的路径配置是正确的。 2. 发生了js报错 打开safari的开发调试工具，查看iOS中的报错，发现是被CORS掉了。很奇怪，之前用cordova时候没有遇到这个问题呀？ 于是看到，在vite构建时会生成js文件并注入到index.html中，其中对js的文件引用采用的方式是" type=module crossorigin "，而这就会触发CORS检查。官方文档是这么解释的。天真的我，试着写了一个vite插件去删除掉这两个属性，但是却会造成无法使用export关键字的问题。 也尝试了将build.target改为各种低于es2019的版本，都无效。 而由于在cordova中是文件系统，这里就会产生一个很无解的情况。 接下来，只能再尝试一下使用webpack而不是vite去构建（因为有之前的成功项目作为背书），但可能会面临一系列版本冲突，webpack生成的js确实和vite不一样，且引用方式也不同。但是还没有功夫研究区别在哪里，只能考虑是否要用webpack再试试。 2023-4-28更新 采用Quasar的webpack模式初始化项目是可以的。 又继续调查了一下，在config.xml中加入： <preference name="scheme" value="app" /> <preference name="hostname" value="localhost" /> 也是可以的。参考

疫情三年终于过去了，寒假也没几天了。刚上初一的儿子也没几天假期余额了，赶紧出去一趟，去万宁冲浪热热身。 我可以算是一个海南黑，反对亲人去海南买房置产就学养老旅游，虽然这次已经是第二次了，实在是有不得已的苦衷。确实不享受，一来国内的旅游目的地同质化太严重，多样化不足，品质参差不齐，而且性价比奇差，二来，貌似没有了。 万宁是奔着冲浪来的，主要就是日月湾，酒店里报了一个冲浪入门课，教练们还是比较认真负责的，基本上能比较有耐心地陪孩子边学边玩两个小时，也算是不打击孩子的兴趣，至于想要进一步进阶，如果没有实力（钱和时间），就不要考虑孩子的天赋什么的了。这也是我的一贯观点 -- 让孩子多尝试，留足可能性，尽可能让孩子自己决定和选择。 至于说作为旅行或度假目的地，去了日月湾、石梅湾、神舟半岛，光顾了若干网红书店、咖啡馆、打卡地，真是没什么意思，不如就是在海边发发呆，让孩子们在海里泡泡、堆堆沙子。至于美食，永远都是烤鱿鱼、臭豆腐、麻辣烫、小海鲜、东北烧烤。。。尤其是后海村，连杯好喝的啤酒都喝不到。 把护照办好，整理行装，还是出国吧。珍惜当下。

最近几年用Vuetify比较多，Vuetify是基于Material Design的一套前端UI脚手架系统，整个MD的配色系统是比较科学的，它定义了五个核心颜色： 此外就是自定义的颜色了，主要是根据功能性来划分，在Vuetify中有：error、info、success、accent、warning，需要设计师根据核心色调整。 针对于易读性问题，要保证强调色(primary/secondary/tertiary)和基底色（neutral/neutral variant)有足够的对比度，可以部分的通过生成来解决。 对一个专注于功能开发的程序员来说，MD的这套配色系统至少提供了一套可复用的配色逻辑： （注：MD是基于孟塞尔颜色系统(Munsell color system)，主要是是基于： 1. hue - 色相/色调,颜色在色轮中的位置（一共360个位置） 2. saturation饱和度、也叫色彩强度（intensity）或色度（chroma）-越高越强烈，越低越暗淡 3.value色值，颜色的深浅，混入黑色让颜色变深（shade）、混入白色让颜色发白（tint）、混入灰色使颜色偏灰(tone) 以一个基本图片出发 先获取主色（primary），也就是图片中最多的颜色（获得HCT中的H - hue色相） 然后根据primary生成secondary和tertiary（如饱和度减弱） 然后根据primary生成neutral和neutral variant（增加/减少灰度） 其他自定义色： success - 通常选绿色或者暖色，根据主色增加饱和度 warning - 通常选桔黄色，可暖可冷，如主色的对比色 error - 通常选红色，根据注册调整饱和度和灰度 info - 选个人畜无害的颜色，我一般很少用 accent - error和warning中间的颜色，如果二者接近，可考虑neutral的对比色 总之，MD的配色系统还是考虑到很多的，如果稍微多了解一些颜色配色基础，即便不是设计师也能做出不那么难看（难看如微信）的UI了。 参考： Material Design Color System…

首先什么是safe-area-inset-*？直接翻译是：安全区域内嵌上/下/左/右，意思是网页显示内容需要内嵌的方向和长度。「caniuse和mdn介绍」。比较常见的是iPhoneX开始的“刘海”（notch）和某些安卓手机的非直角屏幕显示。如下图： 为什么这是一个需要解决的问题？ 因为当页面中存在停靠在四个方向边缘的元素时，如果不预先考虑安全区域，就会造成内容的遮挡，影响功能使用和美观。比如顶部固定的功能栏、侧边悬浮的按钮、底部导航条等。 解决思路： 1. 通过设置viewport-fit:cover(铺满） | contain（包含） <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 优点：简单直接，可满足可视和功能，保证不会被遮挡 缺点：无法保证美观度和一些细节，可能会造成不统一的背景颜色 2. 通过设置全局css，将根容器的pandding-x设置成对应的安全区域高度， padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); 优点：简单，部分解决背景不统一问题 缺点：也无法保证美观和细节 3. 根据实际情况设置一组css，根据实际情况来处理 这里总结几种情况（只以top来举例）： 1. 固定(fixed)和绝对(absolute)定位的顶部元素（通知条、顶部功能栏、左上角的返回按钮） 处理方式：top: env(safe-area-inset-top) 但这里需要注意，如果元素后面还有元素，比如header下面的content区域，由于header的top修改，会遮挡content，还需要修改相应的padding-top。（比如增加css类：below-fixed-top{padding-top:env(safe-area-inset-top)} 另一种情况，如果元素本身有top或者padding-top的设置，就需要外套一个元素来处理。这里引出了一个经验，布局框架内的根元素、第一级元素最好不要有任何top/padding-top/margin-top的设置。 2. 全局容器（高度100%，全屏弹出页） 处理方式：padding-top:env(safe-area-inset-top) 3. 普通容器 处理方式：给父容器设置padding-top:env(safe-area-inset-top)，也可以通过增加伪元素(:before)来增加一个空的元素，这种方法可以设置显示内容。 不建议使用修改高度和margin的方式来处理，因为容器内通常还存在其他元素，可能会影响显示或布局，需要更多的适配。 特殊情况1: 比如在通常的fixed的左上角按钮，如果在其下部也有fixed的元素，则需要相应的下移。只能通过hardcode处理。