手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表全部文章

引入unplugin-auto-import无效

 前段时间用React,这段时间用Vue3(用uniapp写小程序的时候也尝试切换到vue3了),本来觉得很累的,毕竟在每次使用都要import {vue} from 'vue'之类的,在使用了unplugin-auto-import插件后,真的少写了好多。但也要看unplugin-auto-import是不是支持。

 
比如我现在直接引用了vue,象现在onMounted/ref等都不再定义了。
 
然而刚开始的时候却是怎么都没法用,这时候才发现虽然我代码都是用JS写的,但auto-import插件是ts写的,必须要引入typescript组件,然后他才生成一个:auto-imports.d.ts的文件,这时候配合<script setup>这个所谓vue3的黑魔法,才是妥妥的。
 
没什么大东西,就是这么记录一下

华为平板M5的webview的一个BUG

用flutter的webview来展示一个数据页面,因为这个页面如果用原生开发,得费不少时间,而且中间还要显示图表,也可能随时要调整,所以最后改用了webview。

项目是检测内容的结果,因为要检测七大类,每个类都有一个图表和相应的数据呈现,但因为设计稿已经预先有了外框结构,因此内嵌的这个webview的宽度大约在800左右 ,触发了tailwind的sm的效果。所以原来一个检测结果 两列显示的,变成了一列,也因此400左右的高度的,变成了800左右,而有7个项目,则成了5600的高度。
利用webview的jschannel,在resize获取到高度后通过postmessage发送回flutter,flutter获取高度后再setState一下。看起来没差,在小米上很轻松的就显示了。但华为的机器就是不行。中间一块黑屏。
查看LOG,发现一堆bindTextureImage的错误,抛的异常也是Exception updateTextImage,可是我页面上并没有TextImage,所以就开始怀疑Webview了。之前为什么没有怀疑呢,就是因为其他页面上的webview是正常的。
1、将元素中用到Image的先屏蔽一下,仍然报错
2、将webview禁用,无错
3、打印postmessage的值,发现是49xx左右 ,于是强制设定webview的高度为1024,正常
4、不停调整webview的高度,直到3200左右直接黑屏
5、本来在考虑是否用Scrollbar,但事实上因为这个页面的设计稿正好将检测报告放在正中,四周都有内容,不方便全屏到底
最后,将检测报告改用tabbar的HTML来展示 。这样单个Tabbar的高度就算扩展到1000左右也不影响显示,经过测试一切正常。
 
华为这台机器真LOW啊,然后查了一下,海思960s,还是960的降频版,内存4G,鸿蒙2.0,用了大概3小时,无故大崩了3次,其中2次重启一次是refresh。虽然这是2~3年前的机器,但这也太。

navicat连接腾讯云轻量数据库的一个小坑

 买了腾讯云的轻量数据库,便宜(其实现在和直接买1c1g的数据库也差不多了)。在做数据迁移的时候直接用了navicat的data transfer(这功能真方便)

因为数据库不大,只有2~300M,用datatransfer走起来非常快。基本上3分钟左右 就搞定了。如果我dump sql,再upload & import sql,反而比这个速度还要慢一点。
然后问题就来了,查询的时候,全是乱码,这个很明显,是latin1的问题了,于是上数据库 执行了一下:SHOW SESSION VARIABLES LIKE 'character\_set\_%';果然 
character_set_client latin1
character_set_client_handshake ON
character_set_connection latin1
character_set_database utf8mb4
character_set_filesystem binary
character_set_results latin1
character_set_server utf8mb4
character_set_system utf8
这个就纠结了,即使我set names utf8mb4,用datatransfer也是这个问题。
我导数据过来的那一台,也是轻量级数据库,理论上不应该会有这个问题,于是我看一下connection的相关信息。发现正常的那台,encoding居然选的是auto,而这台不正常的选择的是utf-8,难道是因为这个原因?于是切回auto重连。
再次运行SHOW SESSION VARIABLES LIKE 'character\_set\_%';果然 character_set_client 已经恢复成utf8mb4了。
 
这个问题也真是妖~
 

之前没有注意过的tailwindcss的响应式设计

 tailwindcss现在用的人越来越多了,大量的flex以及固定的text-[],w-[]等自定义的class,确实让人用起来非常方便,然后在页面上也可以用sm:/md:/等前缀符可以直接设置相应大小屏幕所对应的class。如果class太多太长,还可以用@apply来进行自定义的缩短等

 
之前一直没有注意,在写一些样式的时候就直接<div class="w-full lg:w-1/2 sm:w-1/2 md:w-1/2" >结果发现在更小的屏幕下无法设置,因为sm:是代表了640px,而象手机一般是320px/414px,这时候就没办法设置了。在想着自定义xs:前缀的时候,看了一下官方文档,结果发现上面有标明一个非常重要的话:【不要使用 sm: 来定位移动设备,而应该使用无前缀的功能类来定位移动设备,并在较大的断点处覆盖它们】参考(响应式设计 - Tailwind CSS 中文文档)。
官方提示:【因此,通常最好先为移动设备设计布局,接着在 sm 屏幕上进行更改,然后是 md 屏幕,以此类推。】
 
所以其实所有的样式理论上应该都是基于小屏幕写的,而比sm还大的屏幕,反而是需要加前缀进行自定义的。比如你需要小屏幕全屏,中屏幕1/2,大屏幕1/3,应该是这样写<div class="w-full sm:w-1/2 md:1/3" >因为lg比md还大,所以lg反而不需要设置了。
 
纯记录一下。这一个月我是从vue2写到react再返回vue3,快崩溃了。

手贱,把后台和部分前台从React全部换成了Vue3

如题的手贱,其实也不能怪我啊。react格式化的时候老是将换行或者空格生成了{' '}这样的玩意,虽然我另外设置了快捷键来处理它,但总还是嫌麻烦。把pretty等各种插件装了删,删了装,各种配置都用上了,还是不行。除非不自动格式化。

 
基于这个原因,我暂时忍了忍,还是先vue3吧。
虽然知道这是配置的原因,但真是短时间内找不到了。项目是laravel+react的,要拆开也不是一下子就OK的。等下个版本拆成独立的再从头开始试吧。
吐血。所幸写的几个重要组件(比如canvas画的图,是纯JS的)不受影响。