LH_R-优快云博客

微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件，常用于发帖或者评论等内容上传模块，我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实现效果如下图实现原理：新增图片时，为每一个图片增加一个key属性，和tranX、tranY属性，用于transform位移，然后这个九宫格的拖拽新增删除都是以key为标记来修改tranX和tranY，从而达到拖拽效果使用了以下变量data: { ITEM_SIZE: 100, // 图片大小单位

2021-09-08 23:09:13 3078 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 4587 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 1174

原创解析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 909

原创解决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 5262 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 1432 2

原创小程序滚动日历组件

小程序滚动日历容器前段时间产品提出这个需求，要求做一个日历容器，并要求是滚动，不能是那种每个月切换的容器，所以我就在网上大概查找了一下类似组件，滚动的容器较少，于是我就自己写了这个组件，以下是大概的js思路，wxml和css就不附上了，每个UI都有不同的想法在ready中初始化组件数据/** * @description: 初始化 */ready() { // 这两个数据是从页面中传过来的，起始时间和结束时间 // 数组类型 [year, month, day] const {

2021-04-13 19:50:35 310

原创微信小程序蓝牙控制开门

小程序低功耗蓝牙控制开门整体流程初始化蓝牙模块openBluetoothAdapter获取本机蓝牙适配器状态getBluetoothAdapterState搜索外围蓝牙设备startBluetoothDevicesDiscovery监听寻找到新设备onBluetoothDeviceFound连接蓝牙createBLEConnection获取蓝牙设备的服务getBLEDeviceS...

2020-01-10 15:37:46 4991 5

weixin_44719258的博客

原创画板探秘系列：结合 Transformers.js 实现图像智能处理

原创画板探秘系列：创意画笔第三期

原创画板探秘系列：创意画笔第二期

原创画板探秘系列：创意画笔第一期

原创画板探秘系列：画板中的时光倒流术

原创探索全栈魔法：Next.js + Prisma + Next-auth + vercel/postgres

原创 canvas画板之画笔的多种效果

原创 canvas画板之绘画元素的框选

原创颜色选择器的纯JS实现

原创基于markdown-it打造的markdown编辑器

原创基于canvas实现的多功能画板

原创微信小程序前端登录模块设计

原创 Hexo搭建详细教程

原创 React源码分析之diff核心算法

原创微信小程序图片拖拽排序组件

原创 Vue3模版编译原理

原创 Vue3+Vite3 SSR基本搭建

原创解析Vue3patch核心算法patchKeyedChildren

原创 pnpm的node_modules结构设计

原创微信小程序瀑布流和虚拟列表

原创微信小程序图片上传&九宫格拖拽组件