- 博客(47)
- 收藏
- 关注
原创 【微信小程序】绘制二维码实现及解决canvas层级问题最佳实践
很久没写微信小程序的需求了,今天来活儿要做个二维码扫码相关的需求,本来以为是洒洒水的事情,谁知道也折磨了大半天,今天特此记录一下~:点击按钮,弹出二维码,二维码内容固定为test。
2023-11-23 11:32:06
1350
原创 【ant-design-vue】ant-design-vue在uniapp使用时,auto-import失败报错
在我的 uniapp + vue3 + vite 项目中,使用了 ant-design-vue @4.x 组件库,同时我还使用了 vite 插件用于自动导入vue3的组合式api。当我全局引用antd-vue时,开发模式下可以正常运行,却不能正常打包,于是开始了漫长的踩坑……
2023-09-15 19:04:21
1748
原创 【unocss】apply聚合语法,unocss配置
最近在使用unocss时,我感觉原子化CSS把这些类名堆在一个标签里,实在谈不上精致美观,那我们有没有办法将这些样式类名搬到style里呢?有的,unocss、tailwindCSS都给出了一种语法#apply。
2023-09-15 11:56:29
2020
原创 【vue3】一些关于hooks的使用经验
最近接到了一个需求,隔壁嵌入式部门希望我们用前端解析渲染Kconfig表单。这篇文章用来记录一下本次使用的经验。
2023-09-08 16:51:05
686
原创 【echarts】手把手喂饭教学!最容易懂的微信小程序 echarts 项目实践入门教程
手把手喂饭教学!最容易懂的微信小程序 echarts 项目实践入门教程
2023-08-08 10:44:31
1710
4
原创 【前端】鼠标事件计算与圆心形成的角度
在业务需求中,常常出现一些我们无法完成的效果图,这时需要UI切图给我们,而切图后不可避免的一些点击事件无法方便的监听。如该图圆环,其实是一张单独的图片,这种情况下只能通过js判断用户点击、拖动的鼠标位置,以此计算出是哪一个色块区域。
2023-08-05 09:41:07
390
转载 【前端】CSS绘制三角形、梯形
border 绘制等腰梯形 (在绘制好三角形后如上图,将div内容的宽度设置一下,可得到一个等腰梯形,如对梯形宽度有需求,需注意内容的宽度与边框宽度)border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形、等腰梯形、直角梯形等图形。border 绘制三角形 (将div中内容设置为0即宽高为0,可出现4个不同方向三角形)border 绘制直角梯形 (去掉上边框和左边框宽度,添加内容宽度,即可得到直角梯形)CSS 如何用border绘制三角形、等腰梯形、直角梯形。
2023-07-17 11:05:35
1357
原创 【前端】TypeScript 在 .d.ts 声明文件中使用import语法导入报错解决方案
把他注释掉就不会飚红了,可我们怎么引入已经写好的类型呢?因为外面找不到这个声明文件了。这样就行了,避免了每次要修改两个地方的困境。声明文件中,规定不允许。
2023-03-16 14:57:28
2238
原创 【uniapp】uniapp项目vue2/vue3引入使用vant组件库
vant是一个优秀的移动端组件库,他支持VUE2、VUE3、微信小程序三个框架,这期就来尝试在uniapp中,vue2和vue3分别引入vant组件库注意:本教程只适用H5,无法运行到微信小程序。
2023-02-23 15:27:48
7986
9
原创 【微信小程序】原生微信小程序ts模板下引入vant weapp
本文章适合微信开发工具的ts项目,指的是项目目录结构如下图从上图可以看到,小程序的ts初始化项目,与之前常见的不同,主要在于miniprogram外层多了些东西,此时我们在终端里 npm 一下,你会发现node_modules也是装在外面的。这其实是正常现象,但当时我对此感到疑惑并认为配置要对此做些改变。。。没有变!没有变!没有变!我们依然跟着官网走就可以了!坑在哪里,坑在我们更改 project.config.json 后,工具无法及时识别,导致构建npm错误。
2023-02-21 14:32:33
2207
1
原创 【前端】get fncName 与 function fncName 声明函数的区别
曾经见到有个声明函数的方式很独特,特意去搜索后未果,还是不明白是什么意思。今天终于得到了答案。项目中使用可以在视觉上一目了然,区分该函数的作用。计算属性,一个对取值进行额外处理再返回的操作。根据demo所示,它更像是 vue 中的。遇事不决,问问大佬。大佬没有说话,甩了张图给我。我们再去浏览器打印一下看看。,常用法是监听对象上属性。它还相似于 Vue 中的。进行对象上属性的监听。打印发现,它有点类似。破案了,它就是等价于。
2022-10-30 09:52:49
410
原创 【Vue3源码】1.搭建Monorepo环境进行Vue3学习开发
Monorepo是管理项目代码的一个方式,指在一个项目仓库repo中管理多个模块/包package。Vue3源码就是采用 monorepo 方式进行管理,将模块拆分到package目录中。
2022-10-29 16:34:29
1576
原创 【微信小程序】底部有安全距离,适配iphone X等机型的解决方案
微信小程序开发常常需要适配机型问题,如iPhoneX/XR等机型,底部有黑色横杠(称为安全距离),这时如果直接加css样式。能计算出安全距离,我想到一个通用的写法,具体做法是将页面高度。是不行的,不会计算底部安全距离,而会与之重叠。的高度限制为屏幕高度减去安全距离,代码实现是。经过搜索后,我们知道。...
2022-07-30 11:51:45
4533
原创 【web】vue实现拖拽DOM元素效果
这周接了个小外包,要求用vue实现如下图的拖拽效果监听鼠标按下,按下后开启监听器,并根据计算出元素新的top高度进行赋值,实现元素跟随。具体源码如下参考链接:另一个Vue拖拽的学习参考链接:关于clientY等参数的具体计算按下时元素要跟随鼠标,这就需要计算鼠标在按下时相对元素的位置,移动时重赋值时也需要计算上这个相对位置。这并不是一件很好理解的事情,让我绕了好久,还是看上文的参考链接学会的。本文只是实现拖拽功能,记录一下,希望日后再面对相似需求时可以做到炉火纯青。......
2022-06-11 11:40:55
853
原创 【生活随笔】前端学习总结
自大二接触前端以来,已经快一年了。从一开始迷茫了好久该如何做项目,到现在有些迷茫不知如何找实习。我发现其实,每个阶段都有属于自己的挑战与问题,而怎样面对并完成它们,才是最凸显人格魅力与能力的时候。现在是2022年6月8日,这个暑假因事无法去找实习,因此我希望大四上学期的寒假一定要找到关于前端的工作。凭借自己的项目经验,随便来个静态页面都没问题了(除非特效难实现)。因此自认为三剑客的基础还是不错的。但是对框架不太熟悉,对酷炫实用的js特效也所知甚少(也真搜不到)。另外自己的代码实现思路也有点绕弯,在自己项目中
2022-06-08 15:54:12
397
转载 【前端】flex布局,让两个高度不固定的子元素沾满屏幕
例如有这样的一个容器<div class="outer"> <div class="head"></div> <div class="content"></div></div>outer 的高度是屏幕的高度head 的高度是不确定的,由内容撑高如何通过纯css使得 content 的高度是 outer 减 head 后的呢?.outer { height: 100vh; display: f
2022-05-21 14:10:36
2026
原创 【微信小程序】transparent 在不同设备的兼容问题
当我们想实现一个渐变到透明的效果时,利用 CSS 很轻易的写出:// 从透明到红色background-image: linear-gradient(transparent, red)在安卓手机就没有这种差异性。造成这种差异的原因未知,但总而言之,我们希望在 ios 上也能像开发者工具里显示的一样。因此我们修改代码:background-image: linear-gradient(rgb(255,255,255,0), red)这样就成功了!...
2022-05-20 19:04:26
652
原创 【前端】CSS入门第二天
案例1:绘制3个变长为20px的正方形,颜色分别为 green black white最外层盒子给阴影 颜色purple,XY轴各偏移10px,模糊度10px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
2022-03-11 20:53:50
290
原创 【前端】CSS入门第一天
案例:绘制一个边长为100px的正方形,背景颜色为pink设置角弧度15px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
2022-03-11 08:46:05
315
转载 ES6 使用解构赋值从嵌套对象中分配变量
使用与前面的例子中类似的对象:const user = { johnDoe: { age: 34, email: 'johnDoe@freeCodeCamp.com' }};这是解构对象的属性值赋值给具有相同名字的变量:const { johnDoe: { age, email }} = user;这是将对象的属性值赋值给具有不同名字的变量:const { johnDoe: { age: userAge, email: userEmail }} = user;原
2022-02-26 02:00:49
610
转载 ES6 map和filter的区别
map和filter参数完全相同array.filter(function(currentValue,index,arr), thisValue)currentValue:数组元素;index:索引arr:原数组;thisValue:作为该执行回调时使用,传递给函数,用作 “this” 的值用途不同:1、map方法返回的新数组是原数组的映射,何为映射?就是和原数组的长度相同,数值做相应处理。2、filter方法返回的值是过滤原数组后的新数组,和原数组长度不同,数值不变。示例:let
2022-02-26 01:09:17
1148
原创 【微信小程序】text-overflow失效
overflow:hidden; text-overflow: ellipsis; white-space: nowrap;上面三个缺一不可,如果仍不行,加下面两行 width: xxx display: inline-block;
2022-02-22 22:49:19
1212
原创 【微信小程序】emoji表情在控制台中打印呈现乱码
今天开发需求测试时,发现emoji表情在小程序端正常显示,遍历得到却是乱码,尝试后发现,是因为表情后边的空格,导致控制台无法识别出emoji利用正则匹配 item.match(/[^\s]/g) 将空格去除即可效果如下:...
2022-02-11 23:49:24
1269
原创 【微信小程序】scroll-view与fixed不可混用
今天实现需求时,遇到一个bug:<scroll-view scroll-y="{{true}}"> <image src="xxx" style="position:fixed"/> <view wx:for="..." style="z-index:1"></view></scroll-view>html结构如上。固定背景image,且实现上下滑动。此时会发现有些区域无法上下滑动解决方案:<scroll-view scro
2022-02-08 23:50:52
1134
原创 【JavaScript】正则表达式
文章目录1.正则匹配文字返回布尔值2.match匹配文字返回3. 正则匹配规则1.正则匹配文字返回布尔值结果为 true / false2.match匹配文字返回若匹配不成功,则返回null3. 正则匹配规则上面为大小写相关,若想取消大小写匹配,则let myRegex = /Hello/i 取消大小写匹配let myRegex = /Hello/g 多次匹配let myRegex = /Hello/gi 也可以复用多个规则let m
2022-02-07 14:23:41
467
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人