Javascript

浏览模式: 标准 | 列表 | 图文
Rolldown-vite ,我尝鲜并选择暂不用

Rolldown-vite ,我尝鲜并选择暂不用

Rolldown-vite,这可是尤雨溪最新的推出的整合,说是下一版本要完全整合进去。

用了一下,在部分小项目里,速度出奇的快,毕竟 rolldown 是 rust 的。但是我在另一个项目里就报错了。
原因是针对一个 element-ui 的项目中。写了这样的代码:
.t-form__item :deep(.t-input--focused,.t-is-focused) {
/*@apply !border-red-500;*/
border: none;
}
理论上这没有错,但在 rolldown-vite 中编译的时候报错:
[lightningcss minify] 'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo?
3071| }
3072| /*.t-form__item :deep(.t-input--focused,.t-is-focused) {*/
3073| :deep( .t-form__item .t-input--focused) {
| ^
3074| /*@apply !border-red-500;*/
3075| border: none;
没有测试是否一一定无效,但我也就先弃用了。毕竟快1 秒和快0.1 秒,对我来说其实区别没有那么大,毕竟都是中小型项目,不是那种 纯前端项目动辙几百 M,这种才比较明显。
4 月了,用 windsurf 写个 chrome 的插件

4 月了,用 windsurf 写个 chrome 的插件

网上一堆说使用 cursor 来写 chrome 插件实现某某功能,这个我其实很相信,因为 chrome 的功能相对稳定,而且插件机制也已经有 10 年+以上的历史了。javascript 什么的,又是 ai 的强项。但我还是一直没下决心,直到我想做站的时候。

chrome 插件这玩意吧,开发的时候就是你要和 windsurf/cursor 说明白你要什么功能。然后基于什么方式实现,就 OK 了。剩下的就是微调。

我在处理图片上传的时候,花了 3 天。。当然也是断断续续的,总算是搞定了,因为你得和 AI 说明,我应该要什么方式来处理图片或者附件之类的。

先慢慢用着,一点点更新。

uniapp 打包 H5,如何直接部署到 OSS 或者其他平台?

uniapp 打包 H5,如何直接部署到 OSS 或者其他平台?

UNIAPP 这玩意吧,你要说有用吧,也有,要说没用吧,也不至于。

uniapp 之前都是拿来做小程序或者 APP的,因为做 H5,就没必要了,对吧。但偶尔其实做做 H5 也挺快的,特别是不需要什么特别权限的时候,毕竟用它自带的 pages.json 连路由也省了。
H5 默认打包的时候是打包在 dist/build/h5的目录下面,但事实上我们在部署静态网站的时候,不可能都是叫 H5 的。所以这时候要注意几个点
1、打包到指定目录:在 package.json 中 build:h5 的命令前,指定 UNI_OUTPUT_DIR=dist/build/xxx。
2、此时要注意,在 API 里请求,仍然是/h5,如果这里也要改,得注意 manifest.json 的 H5 节点下,有一个:route.base,设置为和 UNI_OUTPUT_DIR 同名
3、如果要考虑在编译的时候指定域名。则在 H5节点下面,增加:domain
4、如果整体部署在其他平台,类似 oss\qiniu\cos 等。则调整 publicPath 的路径。
弄好之后,可以考虑用一键工具进行上传。七牛有 qshell,cos 和 oss 也有其他工具(网上可以搜一下有现成的)。上传前先清空服务器目录,或者进行覆盖 性处理。
到此,整体完成
解决 UniApp 的雷达图在微信小程序里的多边形阴影问题

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

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

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

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

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

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

formatter: (value: any, indicator: any) => {
return `{${indicator.titleColor}|${indicator.text}}\n{${indicator.color}|⦿} {${indicator.textColor}|${indicator.label}}`
},
所以才需要手工加样式
Resolve: Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

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,果然干净了。
完整配置如下:
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler',
silenceDeprecations: ['legacy-js-api'],
},
},
},
至此,一切OK
uniapp的button如何去除边框

uniapp的button如何去除边框

在使用uniapp的时候,不可避免会用到他的button组件,如果需要对button进行自定义,就会发现他的边框怎么都占了坑位,如果你还有自定义radius,就会发现整个圆角全是毛边。这时候 就想着要去除边框了。

网传的方法大致 有两种
1、如果全部要自定义的,可以直接 button::after{ border: none;}
2、还有一种是针对button的plain模式,这种模式下button样式简单,可以 button[plain]{ border: none;}
小程序字体的处理

小程序字体的处理

小程序里自定义字体实话实说是一件很痛苦的事情。如果为了好看,只弄英文字体硬实还没那么让人纠结,但事实上中文才是让人最头疼的。一个正常的中文字体少说8M左右,如何字库全一点的。20多M也不是不可能。放进APP可能还能接受,但放到小程序,好吧,直接放不下。

所以网上就有各种不同的工具,而且小程序也支持引入全部字体,常见的方法就是那么几种
1、非中文字体,比如图标,直接用iconfont,因为他支持网络字体和本地字体两种,如果不大就本地字体吧
2、英文,转成woff后,估计也没多少了,毕竟正常使用也就26个英文字母+10个数字,再不济加上一些标点符号。ASCII的可见字符基本上就可以在正常的页面里全部使用到了
3、中文,这才是大头,之前写过一篇:字体转换相关 ,但其实现在想想,这个有点偏手动了。
所以针对3,我们需要重新整理一下,原贴里的sfntool仍然需要,但这个工具有个小缺点,即不支持woff2,但也有个优点,即eot可以压缩,这样的话,处理英文字体就可以更小了。
处理中文分这么几步
1、获取项目中所有出现的中文,比如src目录下,针对vue/js/ts/jsx/tsx等文件,忽略css文件和图标等,将中文取出来去个重(不去也影响不大)。这个脚本可以自己写也可以用网上的一些开源库,象字蛛之类的。如果懒得找,问一下狗屁通,估计就能直接写了
2、传入sfntool中,生成相应的字体,目前看来,如果不压缩,woff会是比较小一点的
3、最重要的就是这一步,有多种处理:a.如果字体不大,就直接扔static里,建一个font.scss就行;b.如果字体不是太大,比如只有7、80K,可以考虑base64一下在font-family的url里,直接用base64;c.如果超过80K以上,建议直接上传到CDN去,毕竟这玩意其实还没有小程序的素材大,现在哪个图片不是要上百K的?
在这样的基础下,再利用package.json创建一个命令,就可以一键生成了,比如我现在就是这样,类似:java -jar sfntool.jar -s "$(node chinese.ts)" infile outfile && node base64.ts && node font-upload.ts
只是一个简单的描述处理方式 ,其实都可以在base64.ts里进行判断和处理,但基于一事一做的原则还是多拆开了。
字体处理就是这样,说方便也方便说复杂也复杂。
第一次 node 编译前端项目到内存不够

第一次 node 编译前端项目到内存不够

在编译前端项目的时候报错:FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

真的是第一次遇到,PHP 就不会出现这种问题,哈哈
内存还是小了点。然后估计我还是要清理和合并掉一些包,不然在小内存(1G)的机器上估计还会有问题。
小内存的机器看来可以利用 git 的 action,在编译好之后把构建复制过去,也是个办法。
字体转换相关

字体转换相关

小程序里最烦人的就是自定义字体了。设计师们总喜欢用一些看起来很好看的字体。但对于小程序来说简直是个灾难。

所幸,如果是英文字体的话,一般都只有8~10K,但那些 OTF 其实还是很大,而且不少字体中有一些特殊的符号,比如@这些。但事实上很多时候我们都不需要。所以这时候就要转换一下。。。
1、convert OTF to TTF
2、用 sfnttools.jar 包(网上都是这个名儿)。来进行转换,类似 java -jar sfnttool.jar -s '内容,也可以是文件' 源字符.ttf 生成的.ttf
3、如果字体还大于50K 的话,转换成 base64
4、如果小于50K,直接就可以引用了。。。。
大致这样。。
1、https://cloudconvert.com/otf-to-ttf
2、https://www.giftofspeed.com/base64-encoder/
3、
参考:https://blog.zengrong.net/post/font_trim_replacement_converting/
jar 包的详细用法可以直接命令行看
java -jar sfnttool.jar -h
subset [-?|-h|-help] [-b] [-s string] fontfile outfile
prototype font subsetter
-?,-help print this help information
-s,-string string to subset
-b,-bench benchmark (run 10000 iterations)
-h,-hints strip hints
-w,-woff output woff format
-e,-eot output eot format
-x,-mtx enable microtype express compression for eot format