前言

自从小程序自定义组件和 npm 功能面世之后，组件化和开源思想逐步开始萌芽了。我们可以将一些通用的部件，如自定义导航栏之类的封装到一个自定义组件中，然后借由 npm 平台开源出去给其他开发者使用，这样可以省去很多劳动。相信各位开发老爷们应该或多或少都有过使用开源包的经历，但是在使用前，这个开源包得能赢取我们的信任，一个很重要的指标就是单元测试通过率和覆盖率。

但是因为小程序独特的运行环境和不完全开源的基础款，使得对小程序自定义组件的单元测试稍微有点困难。目前市面上无论是 vue 还是 react，这些组件化框架都有一套完善的单元测试解决方案，但是对于小程序自定义组件来说却寥寥无几，因此这个工具集—— miniprogram-simulate 便应运而生了。

写在前面

Omi 框架 正式发布了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

作为 Omi 组件化开发特效运动解决方案，让你轻松在 Omi 项目里快速简便支持 CSS3 Transform 设置。css3transform 是经受过海量项目洗礼的，作为移动 Web 特效解决方案，在微信、手 Q 兴趣部落、日迹、QQ 群、QQ 附近等项目中广泛使用，以激进的修改 DOM 属性为代价，带来极为便利的可编程性。

你可以通过 css3transform 官方首页快速了解它。

李成熙，腾讯高级工程师，专注于性能优化、工程化和小程序服务。微博 | 知乎 | Github

概念回顾

在掘金开发者大会上，在推荐实践那里，我有提到一种云函数的用法，我们可以将相同的一些操作，比如用户管理、支付逻辑，按照业务的相似性，归类到一个云函数里，这样比较方便管理、排查问题以及逻辑的共享。甚至如果你的小程序的后台逻辑不复杂，请求量不是特别大，完全可以在云函数里面做一个单一的微服务，根据路由来处理任务。

李成熙，腾讯高级工程师，专注于性能优化、工程化和小程序服务。微博 | 知乎 | Github

小程序诞生以来，业界关注小程序前端的技术演进较多，因此众多小程序前端的框架、工具也应运而生，前端开发效率大大提高，而后台的开发技术则关注不多，痛点不少，具体痛在哪里呢？

李成熙，腾讯高级工程师。专注于性能优化、工程化和小程序服务。微博 | 知乎 | Github

什么是小程序·云开发

小程序·云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力，简言之就是：云能力将会成为小程序的基础能力。整套功能是基于腾讯云全新推出的云开发 (Tencent Cloud Base)所研发出来的一套完备的小程序后台开发方案。

小程序·云开发为开发者提供完整的云端流程，简化后端开发和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代。

该解决方案目前提供三大基础能力支持：

• 存储：在小程序前端直接上传/下载云端文件，在小程序云控制台可视化管理

• 数据库：一个既可在小程序前端操作，也能在云函数中读写的文档型数据库

• 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码

未来，我们还会集成更多的服务能力，为小程序提供更强有力的云端支持。

原文地址

“抓娃娃” 并不陌生，存在两种结果: 抓到与抓不到。在 Web 动画中，如上图，“抓到” 与 “抓不到” 对应着两个动画，可以使用不同的动画图片资源来实现，似乎毫无异义。

细做观察，不难发现：两个动画中 “动画初始到抓取” 及 “抓取结束到动画结束” 的区间中存在相同动画 (滑动和晃动抓杆)。既然动画相同，那么可以通过引用同一份动画图片资源，不做相同图片的重复加载，从而减少总资源大小。

“两个动画间存在部分相同的动画，相同部分可以引用同一份动画图片资源，来减少图片的总大小。”

肉眼进行辨别哪些动画是一样的？那是不可能的。gka 提供一键式制作多个动画的方式，支持多种图片优化方案 (含图片去重)。

gka 是一款简单的、高效的帧动画生成工具，图片处理工具。

官方文档：https://gka.js.org

Github：https://github.com/gkajs/gka

原文地址

多倍图的适配在前端开发还是比较常见的，像在 Retina 屏幕，一般会使用二倍图从而让图片保持清晰，而在开发帧动画中使用的图片实际上同样需要做这样的适配处理。gka 提供一键式的制作多倍图帧动画的方式。

gka 是一款简单的、高效的帧动画生成工具，图片处理工具。

官方文档：https://gka.js.org

Github：https://github.com/gkajs/gka

原文链接

最近几个月一直有些事情没有想通，但可幸的是，有些问题的答案逐渐开始明朗起来了。好久没写文章，籍此献上一篇短文。

当初准备毕业的时候，其实并没有想过要当前端工程师，毕竟当时基本都是全栈（PHP + jQuery）。但由于并不是科班出身（大学读 Business），自信心不足，以及机缘巧合，就成为了一名前端工程师。

选择这份职业，其实也领略到它所拥有的魅力，更快捷的开发方式，更紧贴时代的发展，跨端的兼容等等，可以算是享受了前端这几年飞速发展的红利。但工作三年之后，也逐渐发现只是围绕前端来发展，有很大的局限性。

大约是有那么两件事触动到我吧。

前言

在现在表情包横行的年代，相信大家对表情动图已经不陌生了，这些动图通常就是我们使用的 gif 图（比如下图）。所谓动图就是会动的图片，而其会动的原理跟动画、影视剧一样，通过连续播放图片让我们从视觉感官上认为图片会动。那么 gif 图片又是如何将动图中的每一帧存储下来的呢，这下就需要我们动起刀子，解剖一下 gif 图。

简介

gif 图本身无需过多介绍，相信这个星球上的人类基本上没有没接触过的吧。但是从专业的角度上来介绍的话，gif 图是一种基于 LZW 算法的 8 位连续色调的无损压缩格式，某种程度上来说和 png 图的格式有点相似（索引、无损压缩等）。其中 LZW 算法上一种压缩算法，需要注意的是 gif 使用的 LZW 算法并不是原本的 LZW 算法，而是经过稍微改造后的 LZW 算法。

介绍

近期在弄富文本编辑器相关的内容，其中项目中使用了 Quill Editor（后面简称 Quill）。Quill 自称是一个现代化强大的富文本编辑器，它与其它富文本编辑器（例如 UEditor）不同的地方在于，过去的编辑器操作的数据和展现给用户的视图层是同一份 HTML／DOM，HTML 是树状结构，显然树状结构不如线性结构好处理，而 Quill 内部就是通过使用线性结构的方式使操作富文本编辑器变得简单，而且数据层和视图层是分离的，这让 Quill 对现在很流行的 React、Vue 或者 Angular 都能很好的支持。下面我简单介绍下 Quill 的使用：