- 博客(115)
- 收藏
- 关注
RSS订阅原创 AI电子秤---顶尖电子秤对接+AI服务
难点是在于dll文件的调用，笔者这里踩了很大的坑，最后采取定时轮询解决重量方案解决问题，其此，AI服务第三方文档会写的比较详细，所以只简单介绍思路。其实还是一个问题，比如：如何确定重量的稳定呢？大家不妨思考下，欢迎和笔者一起讨论。
2023-12-18 22:07:06
678
原创 2023了，前端实现AI电子秤思路分析
思路已经整明白了，再总结几个要素：1、算法—用于提取商品特征2、通信电子秤—需要以重量变化为媒介，触发AI识别以上两者是基本要素，笔者将会在下篇以具体代码逻辑实现对应业务。
2023-12-16 20:34:23
496
原创 学习微信小程序 Westore
以上就是笔者对整个过程的分析，从简单来看，可以理解为重点对 setData 进行了 diff 的优化，用法是上显得直观，官方也给出了 多页面时几种情况 store 的拆分，不过笔者还没想好应该怎么写，跟优雅。
2023-09-02 21:55:45
1676
2
原创 微信小程序实现一个文字展开收起功能
其实还有一个问题，就是，当确定要显示省略号时，右边切换的dom是需要定位到当前行的末尾，同时，当前行业需要一个padding，而这个padding就是切换按钮的宽度，所以这里也有一点点逻辑。笔者认为，实现该功能的难点是如何判断当前行是否应该省略，这里采取一个高度差的办法，基本就没有兼容性问题，不过实际中发下，文字会有。剩下的，大概就是高度差的判断，决定是否有省略号，以及动态添加、移除css类名，这个过程不算复杂。需求很常见，就是当一行文字过多时，显示省略号，然后显示。两个字，点击，文字完全展示开，点击。
2023-06-13 16:20:25
3589
3
原创 微信原生小程序自定义顶部导航
都2023了，自定义顶部导航应该不是什么新鲜事了，这里只是简单记录下微信自己也提供了自定义顶部导航，大概看了下，可配置的也不少，所以看需求了，如果简单可以采用微信提供的，老规矩，先看效果。
2023-06-09 17:59:04
1998
原创 vue简单实现一个类似微信左右滑动更多功能
左右跟手滑动核心思路是通过计算滑动的距离，动态设置css位移量，这个过程看似简单，但也有几个小细节，比如边界值的限定弹性效果其实是设置的响应距离、元素移动的距离不是一味的使用偏移量（当处于收起状态时，移动距离 = 偏移量，当处于某一侧展开时，移动距离 = 初始位移距离 + 偏移量）最后也可以再扩展一些api，比如：手动打开、关闭、以及结束后的回调完整代码如下/** 偏移量 **/ offsetValue : {return {return {if(!
2023-06-04 16:02:13
1828
原创 分享一个Vue输入框获取焦点自动选中指令
看似一个小功能，其实也些许问题，其实还有可以扩展，比如：部分组件如果输入控件比较多，为了节约性能，有可能输入框是动态的，即，没有点击的时候是文本，当用户点了才切换成输入框，对于这种情况，目前笔者未进行探索，只是感觉可能需要围绕vue指令的生命周期进行操作，感兴趣的朋友可自行探索。
2023-04-17 21:51:35
1329
1
原创 今儿，小计一则开源模板 template_js 读后笔记
再回到template.js中，作者处理更为细致些，同时也额外提供一些api，可以自定义注入一些配置项，总之学习一些优秀的库，可以学到更规范更合理的开发规则和思路。
2023-04-05 18:17:47
308
原创 electron 桌面端通信 （三）
之前，我们知道了如何快速将一个转化为应用，同时也知道了针对某些行业如何添加副屏。不过，在有些场景下，可能需要通过获取一些桌面端（系统）信息，传递给网页，或者副屏需要需要接收主屏传过来的数据等等场景，此时，我们就需要通过解决。
2023-03-19 18:13:19
1194
3
原创 书接上文 electron 桌面端之副屏展示 （二）
上文写到，借助可以简单且快速的实现桌面端应用，对于部分业务需求可能也想实现副屏的展示（比如零售行业，副屏显示结算信息之类的）老规矩，思路分析，首先上一篇我们知道，我们可以利用去创建窗口，然后加载对应的网页，那么副屏页可以用同样的思路，1、我们要知道怎么检测有没有副屏 2、，知道有副屏后，此时就应该去创建窗体，加载网页…，既然知道了思路，老规矩，去看看文档。
2023-03-11 22:17:57
1642
3
原创 积跬步，才能以至千里（2023 新年伊始 生活贴）
好久没有回到CSDN了，一来是今天无意间看到曾经的领导在分享自己在社区的收获，二来想着自己最近时间确实有点堕落了，于是打算不忘初心，不让热爱技术的热血结霜，还是该继续自己的小计划。接下来是对自己的几个反问，算是给自己一个审判吧！
2023-03-09 23:51:04
64
原创 记录一笔 个人理解的函数式编程
对于函数式编程个人一直不是很了解，于是抽空查看相关资料整理笔记下1、概念在编程思想上讲，目前有三类：命令式（面向过程）、面向对象、函数式，简单介绍下这三种命令式编程 ———— 求和let a = 10let b = 20let sum = a + b可以看到是多个语句或者指令等让计算机执行一些动作面向对象编程 ———— 把现实中的事物抽象成程序中的类和对象，通过封装、继承、多态来演示事物之间的联系函数式编程 ———— 求和 function add(x,y) { return
2022-04-23 22:18:56
991
原创 小程序模仿抖音上下滑动视频
前景知识要实现小程序类似抖音上下滑动预览视频，就我了解的，方案可以分为两种1、利用原生组件swiper（据说很卡，我也试过，好像是有点不流畅）2、自己实现一个上下滑动效果（只需要监听一组事件，判断上拉还是下拉，接着就是移动dom）这里就采用第二种方案自己实现 ps: （本案例基于字节小程序，由于字节已经实现原生组件同层渲染，所以这里不考虑组件层级问题，如果是其他平台，可能需要结合实际解决同层渲染问题，思路应该是一致的）先看效果：开始实现（一） 布局笔者准备在视频列表外嵌套一个大盒子，这个大盒
2022-04-14 18:11:32
5435
14
原创 记一笔虚拟列表渲染理解
之前也有被问或者听说 如果给你一万条数据，你怎么渲染？，当时觉得为什么会这么问，不是有分页或者上拉加载吗？分页和上拉加载确实能解决这个问题，不过这和虚拟列表是两码事。解释： 不管是分页，还是上拉加载，有一万条数据其实就会渲染一万条dom，dom过多无疑对滚动的流畅性或性能都有一定的影响。区别： 虚拟列表在于，哪怕有一万条数据，列表中只会渲染一部分dom（通常是正常可见的部分dom）。相信看到这里应该就明白不同之处了吧！过程分析：如上图，这是一个正常列表的模型，当我们往上滑动时，dom就会不断加载
2022-03-21 22:56:03
789
原创 关于vue组合式api（setup）一些理解
记得vue刚推出 setup 时，也看过不少相关介绍，但始终没能get到那个点，时间一久，也就懵懂的那样过去了。最近又重新看起了vue3+突然对这个 组合式api 有了更新的认识，于是记录一笔吧！照例，来点需求吧！需求：给你一个输入框，用户输入时，同时把输入的信息转成base64（这个栗子可能不太好，没办法，刚好在看vueuse这个库，也正好看到useBase64这个hook，没办法就它了）大概就是下面这个样子可能在vue2的时候，我们采取的措施可能是利用 v-model 去双向绑定 input
2022-03-17 13:40:36
1457
原创 前端事件委托那些事儿
相信事件委托对于前端来说都不陌生，无非是对于一个列表ul中有很多li，而每一个li都有一个事件处理程序；如果数据量过大，绑定事件过多势必会影响性能，因此有了事件委托的概念。本意：将事件绑定在ul上，因为有事件冒泡，所以当点击li时，就会冒泡到ul上；这样只需判断下当前触发源是哪一个li，就可以处理对应的事件情况一：正常情况//这里就简单以vue渲染方式来处理<ul @click="onClick" > <li v-for="item in 10" :key="item" :dat
2022-03-14 17:07:30
394
原创 记录一则二分法查找数组元素
今天遇到一个问题：给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。栗子：对于给定排序数组 [1,3,5] 和 目标值 4，如果数组中能找到4就返回其下标，如果不能就插入对应排序位置（也就是3后面），且返回对应下标，且题目要求时间复杂度为 O(log n) 的算法，那就是用二分法了1、首先解决查找下标问题function getIndex(arr,num){ let len = arr.length, st
2022-03-03 10:39:16
97
原创 记录 二叉树之前序、中序、后序遍历
记录一下关于二叉树的三种遍历方式，开阔下思维前序遍历前序遍历规则是： 根—>左—>右，结合运用栈相关知识，思路应该为：先打印根节点，按照右，左节点顺序（因为栈是后进先出）依次进栈const stack = []const result = []stack.push(tree)while(stack.length && tree) { // 弹出最后一个 stack.pop() result.push(tree.value) // 按照 右、左依次进栈 if
2022-02-10 10:40:26
219
原创 用 canvas 画一个时钟
无意间在某篇博客中看到一个用canvas画的时钟，觉得有趣，便去找了源码学习下思路1、画时钟大概模型可分为几个步骤：画圆，画时间读数，以及每一个小刻度，这里会用到正切、余弦计算位置function drawBackground() { ctx.save(); ctx.translate(r, r); ctx.beginPath(); //每次开始前必须开始一条路径 //按比例输出边框宽度，width/200=x/10=rem; 即 x=10 *rem ctx.
2022-02-08 17:22:49
147
原创 js 理解模块化
经常在面试或者其他文章看到关于模块化的问题，之前也只是寥寥看了几次，对于 CommonJS，AMD，ES6也说不出个所以然，于是今天抽空好好看了 红宝书第4版关于模块化的介绍，这里记录一下。理解模块模式初衷在开发中肯定有设计大量三方库或者业务逻辑代码，较好的方式是将其分割为多个小模块，最后以一定的方式连接起来使用，这就是模块化兴起的初衷。模块化一般包含什么？模块化通常需要含一下几个点。模块标识符模块系统本质上是键/值实体，每个模块都有引用它的标志符，一般是路径或者文件名，部分模块系统也支持自定
2022-01-12 09:46:21
278
原创 数组分块思路 记一笔
当面临某些不需要考虑执行顺序、同步的且耗时较长的任务，可以考虑分块思路js 代码 const ul = document.getElementById("ul") //创建测试数组 function cerateArr(size) { let arr = [] for (let i = size; i > 0; i--) { arr.push(i)
2021-12-16 11:05:31
843
原创 移动端适配问题的理解
最近无意间再次接触了适配问题，虽然之前也一直在使用诸如rem类的方案，也研究过引入的适配代码，突然让自己说出其中原委，却模棱两可，真是尴了个大尬，说到底还是没有彻底弄清除。1、网络求助自己没弄懂，就只有寻求网络，但是查找了许多博客、笔记好像都写的有点不清晰，很多上来就是 1rem = 100px，看得我也是一头雾水，最后找到一篇文章，按照其理解貌似懂了。原文链接2、rem适配原理首先要知道rem是一个相对单位，相对于根节点大小来的，假设根节点大小为 50px，则1rem = 50px，2rem =
2021-12-07 15:34:14
616
原创 前端搞一个扭蛋抽奖小动画？
最近新增一个抽奖小模块，就是扭蛋机的形式，产品给了参考网页，奈何不好扒下来用，只得自己动手干了，不多bb，先看效果吧！效果图：动画分析由上面gif可看出，整个动画分为四个部分扭蛋随机（也不算随机吧）在固定盒子内跳动中奖扭蛋下落中奖扭蛋移动到中心，并且逐渐放大中奖扭蛋做出扭开姿势，缓慢打开整个过程分析好了，貌似还不难，那就一步一步来实现实现步骤一，盒子内随机跳动在实现跳动前，先要做的一步是，尽可能把蛋摆放的随机，自然一点，怎么做？当然是定位啦。 我比较懒，于是计算了大概边界位置（我将
2021-10-26 11:34:56
4133
7
原创 记 flip 简单的动画思路
flip 一种简单的动画思路无意间看到某博主文章，介绍关于 filp 如何制作动画，觉得有趣，便自己动手将dome实现了一遍，参考原文链接在此FLIPf - first 记录动画开始前的位置、大小等信息 （ translateY(0px) ）l - last 记录动画结束时的位置、大小等信息 （ translateY(100px) ）i - invert 对动画前后数据信息的计算（translateY --> 100px，同时利用translate等操作，将dom恢复到 first位置）
2021-10-13 14:07:36
952
原创 记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧（四）
J - Z 系列获取数组元素下标（findIndex的实现）const linearSearch = (arr, item) => { for (const i in arr) { if (arr[i] === item) return +i; } return -1;};linearSearch([2, 9, 9], 9); // 1linearSearch([2, 9, 9], 7); // -1// 只返回数组中的第一个绑定事件一次（前面也有类似函数）co
2021-10-11 11:31:45
128
原创 记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧（三）
G - I 系列获取元素距离顶部的距离const getVerticalOffset = el => { let offset = el.offsetTop, _el = el; while (_el.offsetParent) { _el = _el.offsetParent; offset += _el.offsetTop; } return offset;};offsetTop 是相对其父元素的距离，这里主要通过累加的方式来获取对于嵌套较深的
2021-09-24 11:33:27
88
原创 记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧（二）
D - F 系列防抖函数，限制高频触发const debounce = (fn, ms = 0) => { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => fn.apply(this, args), ms); };};可以运用在监听屏幕缩放，或者input 搜索时，做一些性能优化转换首字母（或其他）大小写co
2021-08-17 14:21:50
119
原创 记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧 （一）
A - C 系列1、+ 号的隐式类型转换使用+[3] //3+[1,2,3].slice(-1) //将 [3] 转换为了32、日期的转换const addDaysToDate = (date, n) => { const d = new Date(date); d.setDate(d.getDate() + n); return d.toISOString().split('T')[0];};addDaysToDate('2020-10-15', 10); // '2
2021-08-06 14:00:00
306
原创 input placeholder信息输入效果
可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果，咋眼一看好像很简单，但是一些又说不上具体细节，如下图一眼一看，这不动态改变 placeholder 的值就好了吗？仔细看人家还有一个类似光标的东西呢，其实也简单，在拼接的时候再拼接个 | 不就好了吗？代码如下：const input = document.getElementById('input') let str = '女子否认拔病人尿管女子否认拔病人尿管' let str2 = '' let strArr = str
2021-07-13 17:45:21
223
原创 vue 实现一个有趣的围绕圆弧动画
前几天在好朋友楼上小黑的介绍下，看到了某个平台的官网，里面有一个人物介绍的模块，里面的动画感觉不错，于是就自己动手写了一个。1.0 原官网示例当然这里去掉了具体信息，原网站是里面圆圈中是人物的头像，旁边是介绍信息，每个人物就沿着圆弧移动到指定位置2.0 我们实现的结果当点击中间开始时，几个小球一次转动到固定角度3.0 简单分析下要让小圆在圆弧上动，我们只需要知道圆心在圆弧上的坐标（x,y）就行了所以当我们知道外圆的半径，小圆的半径，以及角度再利用三角函数就可以计算出 小圆在圆弧上定位的位
2021-07-09 14:32:21
1459
原创 从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用，以及到后面结合 promise 实现 es7中的 async 原理，你将学习到js中异步流程控制相关知识1、认识生成器思考如下代码： let x = 1 function foo() { x++ bar() console.log(x) // 3 } function bar() { x++ } foo()如上代码，我们确定知道，运行foo函数时，bar函数一定也会在 x++后执行，于是得到 x = 3，那
2021-06-22 16:22:58
135
1
原创 vant 组件库中 toast组件 是怎么写的（vue2版本）
经常使用vant组件库，今天也是有空去看了看vant源码，看看能不能薅到点什么骚操作，菜是原罪，于是选择了个人认为的软柿子 Toast 来学习。1、回忆写法我们在使用中经常是 this.$toast({ option })，或者单纯的使用 Toast(xxx),里面可以传递对象，也可以传递单个内容，也可以通过指定的方法（success，fail）等方式来调用2、Toast小细节多次调用只会有一个Toast存在多次调用Toast的层级会递增可以配置forbidClick实现阻止背景穿透…正如
2021-05-20 10:42:45
2218
原创 抽奖老虎机
今天突然要做一个竖直滚动老虎机，可以设置中奖位置，以及中奖回调，然后再带点常规的滚动动画，还是有点意思，和之前的转盘抽奖有点类似，有兴趣可以看下。简单分析下UI，ui的话，就简单点，三个列表从下往上滚动，搞个框罩住 css的活，应该简单。动画，老规矩，我们采用之前的方案，动态设置 css，可以搞定。设置中奖位置，我们可以想传递一个数组，类似 [1,2,3] 这样，数组每一项代表停留位置，那我们就可以计算得css应该平移的距离值，至于动画结束后，还是参照以前的，监听动画结束就可以了。先看看效果h
2021-04-02 17:36:44
575
原创 js 惰性载入函数（ 能力检测 ）
今天在做项目时，需要对地址栏参数做处理，于是便作了如下处理getUrlParam() { let params = {}; const url = window.location.href.replace(/#\//g,'').replace(/\?/g,'&'); url.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m, key, value) { params[key] = value; }
2021-03-16 11:44:36
95
原创 vue 简单实现 营销 转盘抽奖
1.0 思路整理转盘抽奖很常见，之前也没写过，现在有空来写写，分析如下：1.1 转盘旋转 ? ----- 可以用 transform 的 rotate 来解决1.2 旋转动画 ? ----- transition 过渡来处理1.3 停留目标位置及中奖提示 ？ ------ 通过控制旋转角度控制停留位置，中奖提示，考虑添加回调1.1 开始行动上面的思考，我们知道了大概要实现的步骤，首先我们搞张图片这个圆盘有 10 份，每一份 360/10 = 36deg，假设要停留在第二个---->
2021-03-05 11:44:25
564
1
原创 记录一个 列表上拉淡入动画
1.0今天在看小米11官网介绍时，看到淡入的动画，觉得不错，于是来写写看https://www.mi.com/mi11 官网地址2.0简单分析其实原理很简单，就是添加一个动画.fade-in-bottom { animation: fade-in-bottom 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.1s both;}@keyframes fade-in-bottom { 0% { transform: tra
2021-01-04 15:32:42
159
1
原创 苹果官网 iphone12 文字渐变效果
1、0今天无意间在看视频时，发现了一个up主实现iphone12官网的文字效果，闲来无事，自己也来弄弄看，先看看官网效果这里搞了一个gif，不过也可以看出效果啦，由于本人是米粉，就不奉上苹果官网链接了。2、分析要实现文字渐变颜色，其实是 css 将文字设置为透明，背景图 颜色渐变，可以理解为 字是透明的，背景是黑的，所以映过来，字就是白色的了，这部分代码可以直接百度栗子：background: linear-gradient(90deg,#e8a93f,#fff8aa);-webkit-ba
2021-01-04 10:44:20
1253
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人