- 博客(162)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 TypeScript 中的 is 关键字（类型谓词）的用法
is是 TypeScript 中的一个特殊关键字，用于，它允许你在自定义类型守卫函数中明确指定变量的类型。
2025-03-27 19:30:00
280
原创 开发vue小游戏：数字华龙道
1、历史背景数字华容道脱胎于传统华容道，后者源自三国时期“曹操败走华容道”的故事。传统玩法是通过移动不同形状的木块，帮助“曹操”从出口逃脱。而数字华容道将棋子替换为数字，目标是通过滑动方块，将乱序的数字按1至N的顺序排列整齐（例如4×4棋盘需排列1-15，留一空格作为移动空间）。2、基本规则棋盘分为3×3、4×4、5×5等不同难度等级，数字范围随棋盘大小递增。每次只能移动与空格相邻的数字方块，通过滑动调整顺序，最终达成从左到右、从上到下的数字连贯性。
2025-03-07 19:00:00
857
原创 var、let、const的区别
var是最早的变量声明方式，但因为其宽松的规则（如变量提升和全局污染风险）在现代JavaScript中较少推荐使用。let提供了更严格的块级作用域，解决了var的一些问题，适用于大多数变量声明情况。const则用于声明那些不应该被重新赋值的变量，适合于那些一旦赋值就不应改变的场景，如API的URL或数学常数等。在ES6及以后的版本中，let和const通常被视为更佳的实践，因为它们提供了更好的控制变量生命周期和作用域的能力。
2024-05-07 18:18:59
430
原创 vue实现点击选中以下内容按钮选中按钮位置以下的所有数据项
该需求的由来，是公司的产品为了实现如飞书这款应用中，IM聊天界面多选消息时一个快捷选择消息的操作功能。pointer-events 是否为 none ，即可得知是通过选择按钮触发，还是直接点击数据项触发。使鼠标点击释放后事件穿透到按钮下方的元素，以此取得该元素信息；由此，当数据项触发 mouseup 事件时可通过判断触发时。1. 使选择按钮悬浮在列表试图上方；2. 在鼠标按下按钮时在其样式添加。3. 触发后再将按钮恢复到。
2024-05-07 14:58:04
442
原创 uniapp/微信小程序实现加入购物车点击添加飞到购物车动画
1. 为每个点击元素设置不同的class，才能通过uni.createSelectorQuery来获取每个元素的节点信息；每次点击添加按钮时，往该按钮上方添加一个悬浮元素，通过位移动画将元素移到目标位置。4. 计算动画元素到目标位置的距离，获得xy坐标执行位移动画；3. 获取点击元素的节点信息将动画元素放置到点击元素上方；5. 等待每个动画元素执行动画完毕后移除该元素。2. 添加一个与点击元素一模一样的动画元素；
2024-05-06 14:19:58
2253
1
原创 uniapp生成二维码（uQRCode）与自定义绘制样式与内容
原本是可以先通过UQRCode插件把二维码生成并保存为图片，再绘制到新的画布上，但考虑到绘制时长和性能问题，我还是更想直接在二维码的画布上进行绘制。4.1 定义配置信息qrcodeTitle: '二维码标题',logo: '二维码中间logo链接',/** 是否为标题logo *//** 是否有标题 */其中borderWidth为边框宽度，qrcodeTitlePosition为二维码标题位置枚举值效果条件center标题在二维码中间。
2024-05-06 12:13:27
9344
原创 vue3 双向绑定：如何在自定义组件中修改props定义的属性值，并更新父组件绑定的响应式变量值
在子组件中声明一个countprop，通过触发事件更新父组件值。
2024-05-05 16:09:23
6076
2
原创 uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
1.自定义裁剪尺寸2.定点等比例缩放：移动端以双指触摸中心点为缩放中心点，PC端以鼠标所在点为缩放中心点3.自由拖动：支持限制滑出边界，也支持回弹效果（滑动时可滑出边界，释放时回弹到边界）4.图片翻转：在裁剪尺寸非 1:1 的情况下，翻转时宽高无法铺满裁剪区域时，图片会自动放大到合适尺寸5.裁剪生成新图片6.本地选择图片7.可定制样式：可自由选择是否渲染裁剪边框、可伸缩裁剪顶角、参考线8.裁剪圆角图片：圆形、圆角矩形
2022-12-05 11:14:09
9748
6
原创 微信小程序wxs调用callMethod报渲染层错误Call method on a non-custom-component node is invalid......
[渲染层错误]Call method on a non-custom-component node is invalid. Call on the owner component or page instead. To avoid this error hint, try not to call method on `event.instance` , but on `ownerInstance` instead.
2022-12-02 09:30:21
970
原创 【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
如果你对于canvas接触的比较少，在需要处理canvas绘制图表或图片的拖动、缩放等问题时可作参考。支持手势或鼠标滚轮定点缩放，可从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变。
2022-11-09 15:23:48
6219
原创 Ant Design Vue的a-tree组件实现点击文字选中/取消选中节点
Ant Design Vue的a-tree组件实现点击文字选中/取消选中节点
2022-08-03 10:53:34
6302
2
原创 css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素）
核心知识点：CSS radial-gradient() 函数，用径向渐变创建 "图像"
2022-07-12 14:06:29
4193
原创 input宽度随输入内容自适应（以el-input为例）
1.input用绝对定位，使其宽度与父容器保持一致2.利用一个隐藏的div对齐input的内容，以此来撑开父容器宽度
2022-05-27 14:06:38
9994
原创 css阻止IOS长按弹出系统菜单
touch-callout: none;-webkit-touch-callout: none;-ms-touch-callout: none;-moz-touch-callout: none;
2021-04-17 16:42:40
627
原创 css仿微信抢红包动画（uniapp）
效果演示：代码：<template> <view> <view v-if="packerState != 3" class="packer-box flex-column"> <view class="packer-bg anim-ease-in" :class="{ 'anim-fade-out': packerState == 2 }"></view> <view class="packer-bottom-
2021-03-27 15:53:46
1868
3
原创 uniapp图片编辑器，支持自定义尺寸、缩放、拖动、裁剪
支持功能：1.自定义裁剪尺寸2.等比例缩放3.自由拖动5.裁剪生成新图片6.本地选择图片
2021-03-03 14:15:50
9439
原创 隐藏scroll-view滚动条
::-webkit-scrollbar { width: 0; height: 0; color: transparent;}
2021-03-02 09:45:35
256
原创 微信小程序或uniapp调整checkbox、radio、switch组件选中时颜色
微信小程序.wx-checkbox-input-checked,.wx-radio-input-checked,.wx-switch-input-checked { background-color: #0099ff !important; border-color: #0099ff !important; color: #fff !important;}uniapp.uni-checkbox-input-checked,.uni-radio-input-checked,.uni
2021-03-02 09:43:29
2163
原创 css适配iphonex底部安全区
.safe-area-inset-bottom { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2 padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2}注：H5设置meta标签viewport-fit值为cover才有效（小程序默认），即令页面内容充满可视窗口，而非默认auto/c..
2021-03-02 09:34:51
2739
原创 css限制文字行数
限制单行文字.single-text { min-width: 0; // 防止其他元素被挤压 text-overflow: ellipsis; // 超出文字显示... word-break: break-all; overflow: hidden; white-space: nowrap;}限制两行以上文字.double-text { min-width: 0; // 防止其他元素被挤压 overflow: hidden; text-overflow: ellipsi.
2021-03-02 09:14:11
733
原创 uniapp中背景音频管理器（getBackgroundAudioManager）中onPrev和onNext不生效/回调
// #ifdef APP-PLUSconst player = plus.audio.createPlayer();player.addEventListener('prev', () => { });player.addEventListener('next', () => { });// #endif
2020-12-07 20:24:27
1348
原创 获取微信公众号关注页链接
登录公众号 点击“账号详情” 右键查看网页源代码 搜索‘uin_base64’获取对应值 赋值给如下跳转链接的__biz参数：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=#wechat_redirect
2020-10-24 20:12:19
1167
3
原创 解决使用 Transporter 上传 ipa 到 App Store 时，会卡住或者非常慢
原因Transporter 安装上第一次打开后，会在硬盘目录：~/Library/Caches/com.apple.amp.itmstransporter 目录下下载一些缓存文件，这些缓存文件没有下载完，或者下载失败没下载完时，使用Transporter去提交应用这个页面就会卡住或者这个页面很慢。使用到https://github.com/iOSDevLog/com.apple.amp.itmstransporter/releases 下载zip 包，或者 git clone https://.
2020-10-24 16:21:54
2661
原创 connectSocket成功后不触发onSocketOpen
链接方式应该使用wss://，而非ws://，否则会导致偶尔无法触发onSocketOpen，甚至完全无法触发。
2020-10-16 10:36:53
4103
3
原创 vue/uniapp/小程序中修改基本类型的变量值后没有触发界面更新
必须保持原变量类型与新变量类型一致，否则只要判断值相等则不会触发界面更新。例如'1.00'==1、'10.0'==10等
2020-09-08 22:53:43
1147
原创 CSS的3D应用：立方体沿边翻滚动画
实现效果：代码实现：<view class="page"> <view class="m-30" style="margin-top: 90rpx;">翻滚吧！立方体！</view> <view class="board"> <!-- start 参考线 --> <view style="position: absolute; font-size: 0; transform: translateZ(-72rpx);"
2020-07-21 17:28:42
427
原创 CSS的3D应用：绘制长方体
实现效果：绘制步骤：① 绘制6个面，2个正方形 + 4个长方形② 旋转各个面的角度③ 摆放各个面的位置代码实现：<div class="cuboid"> <div class="bottom">下</div> <div class="top">上</div> <div class="right">右</div> <div class="left">左</div>
2020-07-21 17:08:54
2544
原创 CSS的3D应用：绘制立方体
实现效果：绘制步骤：① 绘制6个正方形② 旋转各个正方形的角度③ 摆放各个正方形的位置代码实现：<div class="cube"> <div class="bottom">下</div> <div class="top">上</div> <div class="right">右</div> <div class="left">左</div> <div c
2020-07-21 16:52:08
1257
原创 将微信支付安全证书（.p12类型文件）转为字节数组并取得HEX(16)加密后的字符串
import java.io.ByteArrayOutputStream;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;public class test { public static void main(String[] a...
2020-04-19 20:22:51
1406
原创 微信服务商统一下单吊起微信支付报错：“支付验证签名失败”
1.检查签名是否能通过“微信支付接口签名校验工具”：https://pay.weixin.qq.com/wiki/doc/api/jsapi_sl.php?chapter=20_12.统一下单接口需要对签名进行二次签名后才可供吊起微信支付接口使用//二次签名只需如下参数即可MD5.Encode( "appId=" + sub_appid + "&nonceStr...
2019-11-14 21:05:44
2005
3
原创 微信服务商调用接口返回“appid和openid不匹配”
sub_appid是小程序的APPID时，接口参数中无需使用openid，应使用sub_openid。
2019-11-13 21:29:24
7161
4
原创 微信支付服务商邀请预约商户授权分账（“没有分账权限”）
Step 1：登录服务商平台 >> 产品中心 >> 特约商户授权产品 >> 服务商分账Step 2：① 预约商户绑定微信会收到“微信支付商家助手欧”的授权信息进行设置分账比例后输入支付密码授权② 登录商户平台授权：产品中心 >> 我授权的产品 >> 服务商分账授权（右上角第一个菜单“消息中心”也可查看授权信息）...
2019-11-13 21:21:45
6809
3
原创 微信服务商配置特约商户的APPID（“sub_mch_id与sub_appid不匹配”）
特约商户的APPID配置需在服务商后台配置Step 1：登录服务商平台 >> 服务商功能 >> 特约商户管理 >> 配置（指定某个商户号的开发配置）Step 2：在特约商户APPID配置中添加关联的APPID...
2019-11-13 20:43:31
8703
3
原创 error: RPC failed; curl 18 transfer closed with outstanding read data remaining
error: RPC failed; curl 18 transfer closed with outstanding read data remaining配置的缓存空间不够导致的，调大就行了（如下调整为500M）$ git config --global http.postBuffer 524288000查看配置情况$ git config --list...
2019-11-09 16:32:03
325
1
原创 清除button所有样式
button { margin: 0; padding: 0; outline: none; border-radius: 0; background-color: transparent; line-height: inherit; width: max-content;}button:after { border: none;}
2019-10-24 23:40:59
6829
5
原创 IOS上input/textarea组件输入光标太高/太长的调整办法
假如希望input的高度是40px，把height/line-height的值设置为足够显示内容的值或者光标的最大理想高度，其余高度用padding填充保证输入组件有足够的响应区域。input { padding: 10px 0; height: 20px; line-height: 20px;}...
2019-10-19 10:41:12
1463
小程序自定义组件可滑动切换选项卡tab-view
2018-08-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人