公司:古茗
古茗是中国大陆连锁调饮品牌,由王云安等人于2010年在浙江省台州温岭市创立。该品牌主打三、四线城市市场,是浙江加盟店数量最多的茶饮品牌。至2021年,全国门店数量已经突破5000家,分布在全国18个省市、139座城市。现由浙江古茗科技有限公司运营,总部在浙江省温岭市大溪镇。口号是“每天一杯喝不腻”。
古茗是如何将小程序编译速度提升3倍的
随着业务的发展,小程序的代码量也在飞速膨胀,古茗最大的 B 端小程序页面已经超过 260+,dev 模式下 dist 目录近 35M,性能稍差的设备从 『代码改动 - Taro 热更新 - 小程序IDE build - 页面reload』这个过程超过 13s;而这个过程在日常需求开发时每天可能重复上百次,这会极大的降低开发效率。
钉钉小程序实现签名板
为了对门店做规范管理,会进行巡店且输出巡店报告,此时就需要有一个老板签名的功能,证明老板认可且了解当前结果。由于我们巡店用到的是钉钉小程序,所以下面将会为大家展示如何在小程序中实现一个签名板功能。
小程序主包体积的优化方案与技术实现
在使用Taro开发偏大型小程序应用过程中,我们可能经常会遇到这么个问题:小程序的主包体积超过了2M,没办法发布。针对这个问题,本文讲一讲我在业务中经常使用到的4种优化手段。
JSPDF + html2canvas A4分页截断
最近在业务上遇到了一个问题是要将页面打印输出成pdf文件,通过点击一个按钮,就能够将页面写在一个pdf上,并下载下来,需要保证pdf的内容具有很好的可读性。
经评估要实现这个需求,一种可行的方案是将HTML页面转为PDF,并实现下载。通过技术调研,最终的方案确定为通过html2canvas + jspdf这两个库来实现,通过使用html2canvas提供的方法,将页面元素转为base64图片流,然后将其插入jspdf插件中,实现保存并下载pdf。
html2canvas + jspdf方案是前端实现页面打印的一种常用方案,但是在实践过程中,遇到的最大问题就是分页截断的问题:当页面元素超过一页A4纸的时候,连续的页面就会因为分页而导致内容被截断,进而影响了pdf的可读性。
古茗是如何做前端数据中心的
古茗的前端数据中心包含了前端监控、性能、日志、埋点等能力,还支持错误分析、埋点分析报表等功能 不仅支持小程序、web 还支持客户端 flutter、服务端 nodejs 等。由于我们有不少的 nodejs 应用,所以 nodejs 的监控也是必不可少的。
你一定要知道的「React组件」两种调用方式
使用React框架的开发过程中,我们常常会使用两种方式调用组件:一种是组件式,另一种是函数式,但是这两种用法究竟有何不同?
中后台业务开发(一)「表单原理」
在中后台的业务开发中,表单必不可少,合理的借用表单组件的设计模式来组织自己的代码结构是我们需要上的第一课。
手摸手教运营小姐姐搭建一个表单
团队开发了一个表单搭建平台,通过可视化搭建和配置,解决了运营人员频繁找开发配置表单的问题。平台自研,选择自研的原因是为了满足内部业务需求和定制化功能。平台使用formily + 组件库对表单进行渲染,并将表单配置转化为jsonSchema。布局属性主要用于配置FormItem的props属性,例如标题、输入类型等。通过通信管道实现主站和编辑器的解耦和表单样式的一致性。
前端开发者需要了解的「设计体系」
设计体系的目的是为了实现产品的目标,而设计体系中的内容都应该为此进行优化。团队在设计时需要根据一系列原则来判断如何实现产品目标,这样可以保持团队的一致性和凝聚力。界面设计通过模式来表达设计意图,功能性模式支持用户的行为和操作,感知性模式关注产品给人的直观感受。无论在保护品牌还是满足业务需求时,我们都要意识到新的需求可能需要定制化的模式和一次性的调整,以避免削弱品牌性。
门店智能设备间「通信」原理
古茗门店的后厨放着有很多设备,功能不一样,类型不一样,而且通信机制也不一样。
像最基本的前端和服务端通信,我们需要定义各种接口去实现我们的业务功能,然后依赖http服务进行通信。但是当两台设备需要通信时,我们必须以物理方式或无线方式将它们连接起来,接着再去通信。
我们经常使用的通信方式有:串口通信(USB、CAN)、蓝牙通信、TCP通信。虽然通信方式各种各样,但是原理上基本一致。
作为通信中最为复杂,但也是最被人所熟知的网络通信,这里先大概讲解一下网络通信的原理,那么再讲其他通信方式时也就很好理解了。
「前端添加水印」你真的了解全面吗?
古茗公司通过使用canvas + 伪类的方式实现了页面水印。他们通过设置position: absolute来实现定位,并使用display: block、top: 0、left: 0、height: 100%、width: 100%等属性来覆盖整个页面。通过设置background-image和background-repeat来添加水印图像,并通过pointer-events: none来禁用水印的交互。这样可以在特定区域增加水印,保护内部资料的安全,并且防止盗取和泄露。
一文了解Webpack中Tapable事件机制
Webpack 是前端工程化常用的静态模块打包工具。在合适的时机通过 Webpack 提供的 API 改变输出结果,使 Webpack 可以执行更广泛的任务,拥有更强的构建能力。
Webpack 的插件机制本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,Webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。
古茗打印机技术的演进
不要在碰到一些小票打印出来模糊的时候说没墨了,他根本没有墨!核心在纸,这就是为什么我们点外卖或者堂食给到我们的小票用指甲划一下就能变黑。
怎么办,代码发布完出问题了
回滚是每个开发者必须熟悉的操作,它的重要性不言而喻,必要的时候我们可以通过回滚减少错误的代码对用户影响的时间。回滚的方式有很多种,方式有好也有坏,比如说使用 git 仓库回滚有可能会覆盖其他业务的代码,不稳定,构建产物的回滚最安全,便于优先解决线上问题。
深入Git:4个关键步骤解锁版本控制机制
本篇文章主要面向对git的使用有一定了解的同学,通过对Git底层命令的介绍来理解git内部的工作机制,从而更好的学习并理解如何使用Git与为何是如此运作的。
如何优化 electron 应用在低配电脑秒启动
古茗门店使用的收银机,有些会因为使用年限长、装了杀毒软件、配置低等原因性能较差,导致进钱宝启动响应较慢。然后店员在双击进钱宝图标后,发现没反应,就会重复点击,因此我们希望优化到即使在这些性能不太好的收银机上,也能让进钱宝有较快的启动体验。