小程序中使用 canvas 制作 5 维雷达图(结合小学六年级三角函数知识)

背景

微信小程序项目中需要制作一个 5 维雷达图(如图一),许多人第一时间可能想到的就是去找插件解决问题,其实小程序的数据可视化的插件还真有,但就为了这一个小图非得去把整个笨重的图形库引进来,这就直接拖慢了小程序的加载速度。使用小程序里的 canvas,结合小学六年级三角函数几何知识,其实我们完全可以很快 DIY 一个 5 维雷达图出来 继续阅读“小程序中使用 canvas 制作 5 维雷达图(结合小学六年级三角函数知识)”

使用 wepy + wepy-redux + less 开发微信小程序的一些心得体会

背景

终于经历了 10 天加班加点后,把一个小程序赶了出来,晚上 10 点多提审,半夜 1点半审核通过(同事们都很惊奇,怎么可以那么快过审,因为我以前试过第一版提审,微信足足审了我两周的时间。估计是他们看到熟客,因为以前我提的一般都没什么问题,直接快快给我过审)。本次开发人员两个人,一个前端,一个后端,因为之前用 wepy 开发过几个小程序,比较顺手,很多坑已经踩过,所以再次选用了 wepy。其实,公司层面更倾向于使用 uni-app,而且我也为别的同事写过一些使用 uni-app 开发小程序的启动项目,但无奈,这次要写一个团队答题游戏类的,业务逻辑相对复杂,要亲自上马,时间太赶,不能花多余的时间去踩 uni-app 的坑 继续阅读“使用 wepy + wepy-redux + less 开发微信小程序的一些心得体会”

使用 Less + 各种框架开发小程序快速切图布局常用的自定义 Less 函数【原创】

前言

开发小程序已有一段时间了,之前使用过 wepy、uni-app 框架来开发小程序,切图布局时对比过原始 cssscss / sassless 三种方式来写样式,最后发现使用 less 来写样式是最省心的,高效的定义好 less 样式函数,可以让你写起代码来事半功倍 继续阅读“使用 Less + 各种框架开发小程序快速切图布局常用的自定义 Less 函数【原创】”

前端 Canvas 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图之二维向量 (vector2) 函数库

前言

上一篇《前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图》介绍了在 canvas 中如何使用矩阵(matrix),及如何使用矩阵进行图形变换(transform)。但里面有用到的向量并没有详细介绍,本篇通过结合一个向量的函数工具库来介绍一下向量的应用,因为向量主要是用来描述对象的长度 / 运动距离,一般会在 canvas 动画里面会派上用场, 继续阅读“前端 Canvas 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图之二维向量 (vector2) 函数库”

前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图

前言

使用 canvas 画布来操控图形或者图片的二维变化的方式一般是平移、缩放、和旋转。canvas 已相应提供了相关的 api。如:translate(), scale() 和 rotate(),但这些功能无法统一处理并且无法描述当前画布的处于某种状态。为了实现这种统一连贯性的状态描述,canvas 给我们提供了另外一种思路及方法,即使用:transform() / setTransform();因为画布上的每个对象都拥有一个当前的 3 x 3 变换矩阵, 继续阅读“前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图”

Vue 中递归调用节点组件自身实现无限节点的树

前言

在之前一篇《Vue 中使用渲染函数 render 实现无限节点的树》中我们介绍了如何使用 render 函数中的 h 函数来实现无限节点树的渲染,但这种方式有很多小伙伴们可能使用起来不是很习惯。有没有一种更加直观的方式来实现呢?其实是有的,就是我们可以递归调用树节点组件自身实现无限节点 继续阅读“Vue 中递归调用节点组件自身实现无限节点的树”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/collectionHandlers.ts

前言

接着上一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象, new Proxy(target, handler) 中的基础 handler(baseHandlers)。这一篇,我们将来介绍另外一种 handler 叫 collectionHandlers。collectionHandler 比 baseHandler 提供了更加丰富的 OperationTypes(set、add、delete、clear、get、has、iterate) 中更齐全的操作的 继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/collectionHandlers.ts”

前端开发工具大全(Web Front End Awesome)【不断更新,与时俱进】

前言

回顾 4、5 年前开始,我在 Github 上整理过一个 Repo 叫《web-frontend-awesome》当时的想法是把自己在日常工作中会常用到的前端相关的东西记录下来,方便查阅与使用。4、5 年前,那应该还算是一个 jQuery 一招鲜的年代,使用 require.js / sea.js + jQuery / zepto.js、开源的 jQuery 插件、自己扩展一些 jQuery 插件,基本可以解决一切的问题;但随着前端 MVC 的框架 backbone.js 已经被广泛应用,虽然 backbone.js 还是基于 jQuery 来实现。前端 MV+ 框架的思想已经开始逐渐深入人心,紧接着就是 AngularJS、React、Vue.js 的兴起,再到前端实现多端 / hybrid APP 广泛应用(React Native,Weex,phoneGap,Ionic,Electron / nw.js,Flutter);往后再有 微前端 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主,现下面重新整理一下,逐渐增加一些新的东西吧 继续阅读“前端开发工具大全(Web Front End Awesome)【不断更新,与时俱进】”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts

前言

回到之前有一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象,定义一个 Proxy 对象是怎么样呢?请看代码: new Proxy(target, handler) 可以看出来,是需要 targethandler 来实现,在本篇中我们就来看看实现这个 handler 的最基础的两种叫 mutableHandlersreadonlyHandlers继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/computed.ts

前言

前一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/effect.ts》中,我们学习了用于响应数据读写变化的方法(在 vue 3 中会把用户传入的响应方法/响应函数再次封装而成为 effect 或者叫 ReactiveEffect),现在我们来介绍一种依赖于一种依赖于 effect 的扩展于 Ref 的响应式数据类型 computedComputedRef),相信用过 vue 的人都大概会猜到 computed 应该于 vue 1.x / vue 2. x 中的 computed 有很大的 继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/computed.ts”