浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2024, November 10, 10:54 PM
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 也有其他工具（网上可以搜一下有现成的）。上传前先清空服务器目录，或者进行覆盖 性处理。
到此，整体完成
Javascript | 评论:0
| 阅读:287
Submitted by gouki on 2024, November 8, 8:29 AM
UniApp 配合 Echart，问题还真不少。而且很多官网的例子为了兼容，居然都是引用的老版本，也就导致在查看参数的时候发现数据结构不对了。而且生成的也都是 Canvas，所以，引起问题的就是指 canvas 下的。
上一篇说了文字的阴影，解决了。。今天说的是雷达图多边形配上颜色后，在小程序员也会自带阴影，解决方法类似，但位置会有点变化。
在 series 的 data 中，在这里面加入：areaStyle，哪个值对应的多边形要加阴影，就在哪个里面加入这个节点。因为会配置阴影的颜色和透明度，其实在相应的 areaStyle 里本身也会有：color 和 opacity 的值，这时候 也是相应的加入：shadowBlur:10，至少得 10，否则 shadowColor:'transparent'就不起使用了。
这里的用值其实很奇怪，它不是你设置为 0 或者-1 就能解决，开始也是在这里走了很多弯路，后来想起文字模糊是通过改为 transparent 解决的，想着这里也应该是。果然，生效了。
至此，手机上的显示效果基本与 PC 端一致了。关键是和设计稿也差不多。安逸的很（这个阴影比较奇怪，在模拟器上根本看不出来，只有在真机上才行。但我真机模拟一直失败，只能通过一次次的发布来查看体验版，为此，利用微信开发工具的 cli 写了个管道解决快速上传的问题，后面单独讲）。
Javascript | 评论:0
| 阅读:204
Submitted by gouki on 2024, November 5, 1:02 AM
小程序里使用了 Echart 之后，会遇到字体模糊，但是在开发工具下又看不出来，只有在真机上才会体现出来
网上所谓的教程中，有一大堆是说 canvas 在 resize 后，分辨率不对了，才会导致模糊，建议是改分辨率，设置的高一点。然而这种改法在真机上无效（测试机上也看不到效果）
直到看到在微信的论坛里有一篇：https://developers.weixin.qq.com/community/develop/doc/0006469c3a83c8a7ab8fef30351000，其中有人提出来，应该是设置 textStyle 中的textShadowBlur:10,textShadowColor:'transparent'之后就 OK 了。
我因为对 axiaName 进行了自定义的处理，是把样式放在 rich 中进行自由定义的，就在每一个样式里都加上了这个（主要是每次上传太累，就没有多做测试，是否放在统一的 textStyle 里就可以直接解决）
至此，问题解决。
我的 formatter 是这样的：
JavaScript代码
- formatter: (value: any, indicator: any) => {
- return `{${indicator.titleColor}|${indicator.text}}\n{${indicator.color}|⦿} {${indicator.textColor}|${indicator.label}}`
- },
所以才需要手工加样式
Javascript | 评论:0
| 阅读:236
Submitted by gouki on 2024, October 19, 1:30 PM
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代码
- css: {
- preprocessorOptions: {
- scss: {
- api: 'modern-compiler',
- silenceDeprecations: ['legacy-js-api'],
- },
- },
- },
至此，一切OK
Javascript | 评论:0
| 阅读:1058
Submitted by gouki on 2024, October 7, 11:19 AM
在使用uniapp的时候，不可避免会用到他的button组件，如果需要对button进行自定义，就会发现他的边框怎么都占了坑位，如果你还有自定义radius，就会发现整个圆角全是毛边。这时候 就想着要去除边框了。
网传的方法大致 有两种
1、如果全部要自定义的，可以直接 button::after{ border: none;}
2、还有一种是针对button的plain模式，这种模式下button样式简单，可以 button[plain]{ border: none;}
Javascript | 评论:0
| 阅读:1145
