- 博客(46)
- 收藏
- 关注
RSS订阅原创 【微信小程序】绘制二维码实现及解决canvas层级问题最佳实践
很久没写微信小程序的需求了，今天来活儿要做个二维码扫码相关的需求，本来以为是洒洒水的事情，谁知道也折磨了大半天，今天特此记录一下~：点击按钮，弹出二维码，二维码内容固定为test。
2023-11-23 11:32:06
726
原创 【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
987
原创 【unocss】apply聚合语法，unocss配置
最近在使用unocss时，我感觉原子化CSS把这些类名堆在一个标签里，实在谈不上精致美观，那我们有没有办法将这些样式类名搬到style里呢？有的，unocss、tailwindCSS都给出了一种语法#apply。
2023-09-15 11:56:29
1081
原创 【vue3】一些关于hooks的使用经验
最近接到了一个需求，隔壁嵌入式部门希望我们用前端解析渲染Kconfig表单。这篇文章用来记录一下本次使用的经验。
2023-09-08 16:51:05
391
原创 【echarts】手把手喂饭教学！最容易懂的微信小程序 echarts 项目实践入门教程
手把手喂饭教学！最容易懂的微信小程序 echarts 项目实践入门教程
2023-08-08 10:44:31
877
1
原创 【前端】鼠标事件计算与圆心形成的角度
在业务需求中，常常出现一些我们无法完成的效果图，这时需要UI切图给我们，而切图后不可避免的一些点击事件无法方便的监听。如该图圆环，其实是一张单独的图片，这种情况下只能通过js判断用户点击、拖动的鼠标位置，以此计算出是哪一个色块区域。
2023-08-05 09:41:07
287
转载 【前端】CSS绘制三角形、梯形
border 绘制等腰梯形 （在绘制好三角形后如上图，将div内容的宽度设置一下，可得到一个等腰梯形，如对梯形宽度有需求，需注意内容的宽度与边框宽度）border 有宽度后，四角交接处会产生斜线，可根据此原理绘制三角形、等腰梯形、直角梯形等图形。border 绘制三角形 （将div中内容设置为0即宽高为0，可出现4个不同方向三角形）border 绘制直角梯形 （去掉上边框和左边框宽度，添加内容宽度，即可得到直角梯形）CSS 如何用border绘制三角形、等腰梯形、直角梯形。
2023-07-17 11:05:35
886
原创 【前端】TypeScript 在 .d.ts 声明文件中使用import语法导入报错解决方案
把他注释掉就不会飚红了，可我们怎么引入已经写好的类型呢？因为外面找不到这个声明文件了。这样就行了，避免了每次要修改两个地方的困境。声明文件中，规定不允许。
2023-03-16 14:57:28
1432
原创 【uniapp】uniapp项目vue2/vue3引入使用vant组件库
vant是一个优秀的移动端组件库，他支持VUE2、VUE3、微信小程序三个框架，这期就来尝试在uniapp中，vue2和vue3分别引入vant组件库注意：本教程只适用H5，无法运行到微信小程序。
2023-02-23 15:27:48
6131
7
原创 【微信小程序】原生微信小程序ts模板下引入vant weapp
本文章适合微信开发工具的ts项目，指的是项目目录结构如下图从上图可以看到，小程序的ts初始化项目，与之前常见的不同，主要在于miniprogram外层多了些东西，此时我们在终端里 npm 一下，你会发现node_modules也是装在外面的。这其实是正常现象，但当时我对此感到疑惑并认为配置要对此做些改变。。。没有变！没有变！没有变！我们依然跟着官网走就可以了！坑在哪里，坑在我们更改 project.config.json 后，工具无法及时识别，导致构建npm错误。
2023-02-21 14:32:33
1684
原创 【前端】get fncName 与 function fncName 声明函数的区别
曾经见到有个声明函数的方式很独特，特意去搜索后未果，还是不明白是什么意思。今天终于得到了答案。项目中使用可以在视觉上一目了然，区分该函数的作用。计算属性，一个对取值进行额外处理再返回的操作。根据demo所示，它更像是 vue 中的。遇事不决，问问大佬。大佬没有说话，甩了张图给我。我们再去浏览器打印一下看看。，常用法是监听对象上属性。它还相似于 Vue 中的。进行对象上属性的监听。打印发现，它有点类似。破案了，它就是等价于。
2022-10-30 09:52:49
366
原创 【Vue3源码】1.搭建Monorepo环境进行Vue3学习开发
Monorepo是管理项目代码的一个方式，指在一个项目仓库repo中管理多个模块/包package。Vue3源码就是采用 monorepo 方式进行管理，将模块拆分到package目录中。
2022-10-29 16:34:29
1270
原创 【微信小程序】底部有安全距离，适配iphone X等机型的解决方案
微信小程序开发常常需要适配机型问题，如iPhoneX/XR等机型，底部有黑色横杠（称为安全距离），这时如果直接加css样式。能计算出安全距离，我想到一个通用的写法，具体做法是将页面高度。是不行的，不会计算底部安全距离，而会与之重叠。的高度限制为屏幕高度减去安全距离，代码实现是。经过搜索后，我们知道。...
2022-07-30 11:51:45
3804
原创 【web】vue实现拖拽DOM元素效果
这周接了个小外包，要求用vue实现如下图的拖拽效果监听鼠标按下，按下后开启监听器，并根据计算出元素新的top高度进行赋值，实现元素跟随。具体源码如下参考链接：另一个Vue拖拽的学习参考链接：关于clientY等参数的具体计算按下时元素要跟随鼠标，这就需要计算鼠标在按下时相对元素的位置，移动时重赋值时也需要计算上这个相对位置。这并不是一件很好理解的事情，让我绕了好久，还是看上文的参考链接学会的。本文只是实现拖拽功能，记录一下，希望日后再面对相似需求时可以做到炉火纯青。......
2022-06-11 11:40:55
744
原创 【生活随笔】前端学习总结
自大二接触前端以来，已经快一年了。从一开始迷茫了好久该如何做项目，到现在有些迷茫不知如何找实习。我发现其实，每个阶段都有属于自己的挑战与问题，而怎样面对并完成它们，才是最凸显人格魅力与能力的时候。现在是2022年6月8日，这个暑假因事无法去找实习，因此我希望大四上学期的寒假一定要找到关于前端的工作。凭借自己的项目经验，随便来个静态页面都没问题了（除非特效难实现）。因此自认为三剑客的基础还是不错的。但是对框架不太熟悉，对酷炫实用的js特效也所知甚少（也真搜不到）。另外自己的代码实现思路也有点绕弯，在自己项目中
2022-06-08 15:54:12
363
转载 【前端】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
1863
原创 【微信小程序】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
537
原创 【前端】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
255
原创 【前端】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
270
转载 ES6 使用解构赋值从嵌套对象中分配变量
使用与前面的例子中类似的对象：const user = { johnDoe: { age: 34, email: '[email protected]' }};这是解构对象的属性值赋值给具有相同名字的变量：const { johnDoe: { age, email }} = user;这是将对象的属性值赋值给具有不同名字的变量：const { johnDoe: { age: userAge, email: userEmail }} = user;原
2022-02-26 02:00:49
493
转载 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
1098
原创 【微信小程序】text-overflow失效
overflow:hidden; text-overflow: ellipsis; white-space: nowrap;上面三个缺一不可，如果仍不行，加下面两行 width: xxx display: inline-block;
2022-02-22 22:49:19
1029
原创 【微信小程序】emoji表情在控制台中打印呈现乱码
今天开发需求测试时，发现emoji表情在小程序端正常显示，遍历得到却是乱码，尝试后发现，是因为表情后边的空格，导致控制台无法识别出emoji利用正则匹配 item.match(/[^\s]/g) 将空格去除即可效果如下：...
2022-02-11 23:49:24
1043
原创 【微信小程序】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
961
原创 【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
405
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人