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

解决 UniApp 的雷达图在微信小程序里的多边形阴影问题

 UniApp 配合 Echart,问题还真不少。而且很多官网的例子为了兼容,居然都是引用的老版本,也就导致在查看参数的时候发现数据结构不对了。而且生成的也都是 Canvas,所以,引起问题的就是指 canvas 下的。

 
上一篇说了文字的阴影,解决了。。今天说的是雷达图多边形配上颜色后,在小程序员也会自带阴影,解决方法类似,但位置会有点变化。
在 series 的 data 中,在这里面加入:areaStyle,哪个值对应的多边形要加阴影,就在哪个里面加入这个节点。因为会配置阴影的颜色和透明度,其实在相应的 areaStyle 里本身也会有:color 和 opacity 的值,这时候 也是相应的加入:shadowBlur:10,至少得 10,否则 shadowColor:'transparent'就不起使用了。
 
这里的用值其实很奇怪,它不是你设置为 0 或者-1 就能解决,开始也是在这里走了很多弯路,后来想起文字模糊是通过改为 transparent 解决的,想着这里也应该是。果然,生效了。
 
至此,手机上的显示效果基本与 PC 端一致了。关键是和设计稿也差不多。安逸的很(这个阴影比较奇怪,在模拟器上根本看不出来,只有在真机上才行。但我真机模拟一直失败,只能通过一次次的发布来查看体验版,为此,利用微信开发工具的 cli 写了个管道解决快速上传的问题,后面单独讲)。

解决小程序 echart 中字体模糊的问题

 小程序里使用了 Echart 之后,会遇到字体模糊,但是在开发工具下又看不出来,只有在真机上才会体现出来

网上所谓的教程中,有一大堆是说 canvas 在 resize 后,分辨率不对了,才会导致模糊,建议是改分辨率,设置的高一点。然而这种改法在真机上无效(测试机上也看不到效果)
 
直到看到在微信的论坛里有一篇:https://developers.weixin.qq.com/community/develop/doc/0006469c3a83c8a7ab8fef30351000,其中有人提出来,应该是设置 textStyle 中的textShadowBlur:10,textShadowColor:'transparent'之后就 OK 了。
 
我因为对 axiaName 进行了自定义的处理,是把样式放在 rich 中进行自由定义的,就在每一个样式里都加上了这个(主要是每次上传太累,就没有多做测试,是否放在统一的 textStyle 里就可以直接解决)
 
至此,问题解决。
 
我的 formatter 是这样的:

JavaScript代码
  1. formatter: (value: any, indicator: any) => {   
  2.   return `{${indicator.titleColor}|${indicator.text}}\n{${indicator.color}|⦿} {${indicator.textColor}|${indicator.label}}`  
  3. },  
所以才需要手工加样式

解决orbstack的 data.img 过大而导致无法备份的问题

在Mac 用 orbstack 代替 docker 之后,确实方便不少,而且 orb 创建 debian/ubuntu 的虚拟机也很方便,几乎就是分分钟搞定。然后就可以通过 orb 进入默认的虚拟机,方便在 mac 上使用 linux 来进行操作很多事情。过多的 orbstack 的用法我就不讲了,网上有一堆堆的教程。

但随之带来的另一个问题就是,orbstack 几乎无法备份了。因为在他的目录下~/.orbstack/data/data.img,这个文件显示是8T,虽然说它是一个稀疏文件,然而却是很多软件不认,比如说 rsync。
你会发现你1T 的硬盘备着备着突然就磁盘满了。虽然`~/.orbstack/data/data.img`这个文件其实只有几 G 或者10几 G,但 rsync 认为他是8T,导致备份失败,所以在实际应用中,必须要加入 --exclude ".orbstack/data/data.img" ,否则备一次失败一次
 
看官方的 issue 中,也有不少人用苹果的time machine 备份也失败了。这真让人烦恼。官方也没有给出一个方法用来压缩成实际大小,这个 Parallels Desktop 和 virtual machine 好象都有。象 PD 默认创建的时候 可以指定大小,比如10G,实际使用中超过时,会随之增大,同时也可以压缩成实际大小(好象只支持 windows???记不太清)
 
如果 orb 也有这个功能就好了,就这样吧
 

Tags: orbstack

Resolve: Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
 
在用UNIAPP开发小程序的时候,只要运行pnpm dev:mp-weixin,就会报一堆这样的错误,但也没办法,毕竟你也不知道 哪些库就是用了一些旧方法,由于uniapp的cli模式默认用的是vite,所以搜了一下,网上的教程都是说,增加 css.preprocessorOptions.scss.api 为 modern或者modern-compiler就OK了。但试了一下,这根本就没用。
 
再看了一下github上,说增加这个,只对H5项目有效,其他项目均无效。
此时突然看到有人说,其实还要加一个参数,和api平级,silenceDeprecations:['legacy-js-api']就行了。
于是,加入后重启pnpm,果然干净了。
 
完整配置如下:
XML/HTML代码
  1. css: {  
  2.   preprocessorOptions: {  
  3.     scss: {  
  4.       api: 'modern-compiler',  
  5.       silenceDeprecations: ['legacy-js-api'],  
  6.     },  
  7.   },  
  8. },  
至此,一切OK
 
 

开始尝试在VSC下进行开发

看这个标题,估计要被很多人笑了。其实也很正常,我是一个重度Idea用户,也连续买了N年了。功能强大,附加功能也很优秀,用了就实在时抛不开了。

 
但随着现在Monorepo的项目越来越多。一个项目里同时前、后端代码都有的时候,单一功能的IDE就一点捉襟见肘了。但是打开一个IDEA吧,又感觉有点重,而且IDEA里默认的插件都是为了开发JAVA而来的。这个就更尴尬了。
 
这时候就感觉,VSC可以拿出来一用了(也不是没想过用fleet,但fleet经过3年多了,感觉仍然是像一个sublimetext一样的编辑器,而不是IDE)。
 
之前也用过VSC,就是因为插件太多,而且部分插件都不知道 是用来干嘛的,再加上不能为单个项目,只启动想启用的插件,才慢慢放弃的,现在感觉比以前好多了,但还是不能自定义插件,这个就有点烦。而且vsc的插件都在~/.vscode目录里,也就是在本地,为什么不能让workspace来选择要启用和关闭插件呢?哪怕像 pnpm管理的node_modules一样,是引用过来的也行啊。也可能其实已经有了,但我用的少,并不知道罢了
 
继续用,再体验一下,也许会有一个不一样Feel.
 

Tags: vsc, idea, jetbrains

Records:309912345678910»