- 博客(27)
- 收藏
- 关注
RSS订阅原创 画板探秘系列：画板中的时光倒流术
最近，我完成了一个多端趣味画板项目。在这个项目的基础上，我会根据其中的技术细节和重要功能编写画板探秘系列文章，我会一一介绍其中的功能和逻辑，欢迎阅读
2024-01-11 09:15:00
952
原创 探索全栈魔法：Next.js + Prisma + Next-auth + vercel/postgres
本文记录了我构建全栈网站的流程，包括项目初始化、数据库连接、认证登录、Vercel部署等。项目已成功上线并开源。
2023-11-29 08:45:27
1579
原创 canvas画板之绘画元素的框选
canvas画板之绘画元素的框选，可以点击元素进行框选，并按住手柄进行缩放移动，且可以点击backspace键删除元素
2022-12-06 09:15:00
1249
原创 颜色选择器的纯JS实现
只用JS实现的页面颜色选择器，初始化创建实例后，只需在使用时调用open方法开启，原理是通过js创建canvas后，基于canvas对颜色数据进行处理
2022-11-07 09:00:00
1051
原创 基于markdown-it打造的markdown编辑器
基于markdown-it打造的markdown编辑器，已完成功能：同步滚动、目录列表生成、快捷编辑按钮、代码块主题切换、内容状态缓存
2022-10-13 08:33:20
2466
原创 基于canvas实现的多功能画板
基于canvas实现的多功能画板，目前已完成第一版，功能包括画笔、橡皮擦、撤回、清除画板、保存、图层、拖拽...
2022-09-23 08:45:00
798
原创 微信小程序前端登录模块设计
微信小程序登录基本上是每个小程序都必备的功能，但是随着业务的逐渐复杂，需要考虑的情况会越来越多，所以登录功能的健壮和高效是值得重点关注的，我会按照以往经验实现一个较优雅的登录方案
2022-09-13 08:45:00
1475
原创 React源码分析之diff核心算法
React的diff核心算法，在beginWork阶段的reconcileChildFibers中进行处理，我在本篇分单节点和多节点两种情况进行分析
2022-09-05 08:00:00
189
原创 微信小程序图片拖拽排序组件
图片拖拽排序是一个比较常用的组件，常用于发帖或者评论等内容上传模块，我通过transform实现了一个基于微信小程序原生语法的拖拽组件
2022-09-04 15:06:24
1704
4
原创 Vue3模版编译原理
Vue3模版编译就是把template字符串编译成渲染函数。我会按照编译流程分3步分析。parse, transform, generate
2022-08-31 11:44:20
444
原创 微信小程序图片上传&九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件，常用于发帖或者评论等内容上传模块，我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实现效果如下图实现原理：新增图片时，为每一个图片增加一个key属性，和tranX、tranY属性，用于transform位移，然后这个九宫格的拖拽新增删除都是以key为标记来修改tranX和tranY，从而达到拖拽效果使用了以下变量data: { ITEM_SIZE: 100, // 图片大小 单位
2021-09-08 23:09:13
2874
4
原创 微信小程序单指拖拽和双指缩放旋转
前言小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend<view style="height: 100vh; width: 100vw"> <image src="..." style="transform: translate({{translateX}}px, {{translateY}}px) scale({{scale}}) rotate({{rotat
2021-08-21 16:56:43
3749
8
原创 解析reactive---vue3响应式
解析reactive—vue3响应式系统想要了解vue3的reactive模块，就要对Proxy和Reflect有所了解，关于这两个知识我推荐看阮一峰老师的ES6入门教程我对reactive模块有一个大致梳理，见下图从上图可以大致理清一个值被创建响应式状态的过程，下面分四部分解析reactive文件：目标对象转化为proxy实例baseHandler文件：基本类型处理器collectionHandlers文件：Map、Set处理器effect文件：收集触发依赖reactive
2021-08-01 17:43:41
1081
原创 解析nextTick---vue3任务调度
nextTick定义：将回调推迟到下一个 DOM 更新周期之后执行，在更改了一些数据以等待 DOM 更新后立即使用它在实际中使用这个方法一般是用于组件更新，你需要获取更新后的数据，所以使用nextTick等待DOM更新// vue3中的语法对比vue2做了一些改动import { createApp, nextTick } from 'vue'const app = createApp({ setup() { const message = ref('Hello!') co
2021-07-17 15:36:45
834
原创 解决react状态管理---React Query
什么是React Queryreact-query是一个适用于react hooks的请求库，它可以为任何类型的异步数据提供React状态管理功能，使React中的获取、缓存、同步和更新服务器数据变得轻而易举react-query与一些传统的状态管理库如redux,mobx不同，它是负责管理服务器与客户端之间的状态，一些用户交互的中间状态，如loading状态，错误信息等都是通过hooks直接返回React Query官网初步使用yarn add react-query or npm i .
2021-06-12 17:58:42
5078
2
原创 H5跳转微信小程序
H5跳转微信小程序H5跳转小程序有两个方法，需要根据浏览器环境判断微信外使用URL Scheme，根据生成的一个link进行location跳转微信内使用wx-open-launch-weapp开放标签进行跳转，实测ios系统微信内也可以使用URL Scheme，根据自己的需求选择wx-open-launch-weapp官方文档注意事项：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上绑定域名: 登录微信公众平台进入“公众号设置”
2021-06-10 20:41:45
1351
2
原创 小程序滚动日历组件
小程序滚动日历容器前段时间产品提出这个需求，要求做一个日历容器，并要求是滚动，不能是那种每个月切换的容器，所以我就在网上大概查找了一下类似组件，滚动的容器较少，于是我就自己写了这个组件，以下是大概的js思路，wxml和css就不附上了，每个UI都有不同的想法在ready中初始化组件数据/** * @description: 初始化 */ready() { // 这两个数据是从页面中传过来的，起始时间和结束时间 // 数组类型 [year, month, day] const {
2021-04-13 19:50:35
286
原创 微信小程序蓝牙控制开门
小程序低功耗蓝牙控制开门整体流程初始化蓝牙模块openBluetoothAdapter获取本机蓝牙适配器状态getBluetoothAdapterState搜索外围蓝牙设备startBluetoothDevicesDiscovery监听寻找到新设备onBluetoothDeviceFound连接蓝牙createBLEConnection获取蓝牙设备的服务getBLEDeviceS...
2020-01-10 15:37:46
4789
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人