Skip to main content

14 posts tagged with "feature"

View All Tags

前端工程化

· One min read

Git工作流​

git协作工作流 – URCloud

组件按需加载​

antfu/unplugin-vue-components: 📲 On-demand components auto importing for Vue (github.com)

图标管理​

svg icon集成方案 – URCloud

常量枚举管理​

ts中enum的使用方式 – URCloud

代码规范​

vue项目集成husky,lint-staged,commitlint – URCloud

cos,cdn部署​

zenonux/oss-deploy: cli tool for deploy assets to tencent cos. (github.com)

相关参考​

大公司里怎样开发和部署前端代码？ · Issue #6 · fouber/blog (github.com)

svg icon集成方案

· 2 min read

背景​

在svg还不流行时，图标的通用方案是png sprite图片。随着浏览器对svg的支持程度，目前都在接入svg图标。

开源解决方案​

  • iconify

优点：支持按需加载，方便使用各类开源图标库。内部后台管理系最佳选择。

缺点：图标部署在iconify网站上，离线方式使用没有按需加载的优势。

iconify/iconify: Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (100+ icon sets, 100,000+ icons). SVG framework, React, Vue and Svelte components! (github.com)

  • unplugin-icons

优点：支持按需加载，大量开源前端ui库都采用此方式。前台应用最佳选择。

缺点：不支持动态图标。有动态图标需求的谨慎考虑。

antfu/unplugin-icons: 🤹 Access thousands of icons as components on-demand universally. (github.com)

  • vite-plugin-svg-icons

不推荐，基于vite2，已经不再维护，目前仍有一些后台管理系统基于此方案。

vbenjs/vite-plugin-svg-icons: Vite Plugin for fast creating SVG sprites. (github.com)

相关参考​

CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks - CSS-Tricks

小程序问题合集

· 2 min read
  • 底部自定义tabbar闪烁问题

深坑，很多年没有解决。本质原因初始设计时每个页面底部tabbar不是共用的，还是不同的页面生成不同的实例。目前的解决方案有三个。

方案一：自定义导航和自定义tabbar不同时使用，需要设计上妥协，目前官方给的tabbar demo这种情况是不会出现闪烁的。

方案二：单页应用，不使用微信官方的tabbar。自己基于组件模拟一个。缺点是开发要做的工作多，首页比较简单的情况下会好点。首页多个tab过于复杂的情况会导致dom渲染太多，引起卡顿问题。

方案三： 等微信修复。。。

相关issue：自定义tabbar切换时会闪烁 | 微信开放社区 (qq.com)

  • 上传文件进度条进度不准

相关issue：UploadTask.onProgressUpdate 进度秒到100 | 微信开放社区 (qq.com)