自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(218)
  • 资源 (1)
  • 收藏
  • 关注

原创 Vue 实现 上传图片 二维码识别 + 条形码识别(qrcode-decoder插件)

1.web端H5 实现 上传图片 自动识别二维码内容2.具体业务 比如 上传电影票 自动识别取票码或者其他的二维码上传(主要是为增加用户体验)

2023-08-26 16:58:12 1623 2

原创 微信公众号 H5 jssdk 分享卡片功能实现(亲测使用)

微信公众号 H5 jssdk 分享卡片功能实现(亲测使用)

2022-08-11 18:52:50 2176

原创 vue3 computed 返回计算内容

列表中有每一项 根据每一项的数据 计算 或显示其他的内容。使用computed。

2024-06-13 16:08:52 92

原创 手写async await的最简实现(20行)

如果让你手写async函数的实现,你是不是会觉得很复杂?这篇文章带你用20行搞定它的核心。经常有人说async函数是generator函数的语法糖,那么到底是怎么样一个糖呢?让我们来一层层的剥开它的糖衣。有的同学想说,既然用了generator函数何必还要实现async呢?这篇文章的目的就是带大家理解清楚async和generator之间到底是如何相互协作,管理异步的。示例对于这个实例 我们使用 generator 函数 表达出来。

2024-06-13 10:40:23 401

原创 实现一个vue js小算法 选择不同的时间段 不交叉

以上图片选择了时间段 现在需要判断 当前选择的时间段 不能够是 有交叉的所以现在需要循环判断。

2024-06-12 16:38:43 235

原创 前端中vue url 截取 中的参数方法

其实就是一段代码 能够 截取当前的 url 路径参数。直接传入当前的url 就行了 直接行~~~

2024-06-07 16:19:47 262

原创 web端中使用vue3 实现 移动端的上拉滚动加载功能

原生html 中的滚动我这里也有部分代码 我就不详细解释了 大家都能看懂的 原生html 用的也少了 移动端中有封装好的scroll-view 所以就更简单了。这个是vue3 里实现的功能 因为是web端 一般没有这样的滚动效果 既然问题出来了 就肯定有解决办法 所以就是以上的写法。在这个里面就可以实现滚动的监听 滑动到底部 就可以知道 然后可以实现分页。给这个盒子一个ref 的属性 以及 有原生滚动事件 scroll。这个盒子里的内容就能立马滚动起来。能够在web端实现滚动分页。

2024-06-07 09:41:27 305

原创 css文字超出元素省略,单行、多行省略

通用CSS。

2024-06-05 17:42:57 434

原创 vue -ant -design 卡片是布局 实现动态计算 当前的 左右间距 实现居中

我们好像就没有什么好的办法了 我们这自己写的 肯定没有组件牛 如果有这样的组件 那就直接用如果没有组件呢怎么实现呢。3. 使用box 的宽度 减去所有的item加起来的宽度 以及设置的item的margin 等。是这样的一个样式 我们使用display :flex 布局的时候 我们全部剧中。2.计算 整个box 的宽度 除去 padding margin 等以后的宽度。如果是上述的代码来说的话 总是最后的一个也是会居中的 这样就比较丑。这是我计算当前margin 的方法。这个是一个开发中的解决问题的思路。

2024-06-05 11:43:56 169

原创 ant-design vue3 中上传图片组件的回传图片显示问题

最近在做web端的上传图片 有一个数据列表中的编辑功能 是之前上传的图片 点击编辑进入编辑页面 会显示之前写的数据 现在需要把原来上传的图片 显示出来。因为 a-upload 需要这样的数据格式 所以要将数据处理一下 循环 添加字段 就可以了。因为之前给后端上传的 图片格式 是一个数组 ["图片链接",“图片链接”。所以回传给 a-upload 组件的时候 显示不出来。后端给我返回的数据也是这杨。

2024-06-04 10:17:44 230

原创 cesium 的初步认识

Cesium是一个基于JavaScript开发的WebGL三维地球和地图可视化库。它利用了现代Web技术,如HTML5、WebGL和WebAssembly,来提供跨平台和跨浏览器的三维地理空间数据可视化。目前就是一个案例 直接打开就可以了 我们就可以看到当前的地图 上述操作时直接将一定位到了一个点 flyTo。在cesium 包中 使用的有两个 一个js 一个css 样式。也可以 根据你安装的npm 包 把这两个文件引入进去。大家可以去官网看看一下 这个的文档。3.导入相关的cesium 包。

2024-06-03 10:57:09 410 1

原创 React + Taro 项目 实际书写 感受

我们写的是函数式组件 在参数中 有tab s 以及 onTabChange 方法 都是父组件 传递过来的 所以我感觉react 让我更加理解了 父子组件之间的传值 其实和vue 是一样的 有可能写法不太一样。当我们想进入这个组件或者页面的时候 就执行某一个函数的时候 我们就需要使用生命周期或者监听函数 在vue 中我们之前使用的是onMounted 生命周期。突然去写这个代码 你会很不习惯 的 因为之前 用的就是ref reactive 直接就定义了 直接就使用了 而这个不太一样。

2024-05-31 17:35:58 828

原创 Vue-draggable 插件的使用 (vue3)

将拖放功能添加到 Vue.js 应用可以改善用户体验。因为拖放功能允许用户以更直观的方式与应用程序交互,所以用户可以更轻松地组织和操作数据。Vue-draggable 是实现拖放功能的绝佳工具,因为它简化了流程,即使是刚接触 Vue.js 的开发人员也可以轻松使用。将这个插件添加到 Vue.js 应用程序,你就可以创建更具吸引力和动态的用户体验,提高用户回头率。我使用 这个 腾讯云 tdesign 的web端框架来演示这个问题。使用这个页面上的内容 给大家演示这个东西。

2024-05-31 09:59:16 215

原创 Git提交时出现Merge branch ‘master‘ of ...之解决方法

最近遇到了一个问题 我是用git提交代码的时候 分支上 显示的是merge 意思是 合并代码了 每次都会 创建一个分支 因为我和另一个小伙伴共同 开发一个项目 所以 小伙伴告诉我 总是创建新的分支 我细细看了一下 测试了一下。我们两个人 修改不同的文件 同时修改 他提交了 我再提交 就会出现 合并分支的问题 我想着 这是因为 两个人都修改代码了 代码本来就是要合并代码的。这个配置就是告诉git在每次pull前先进行rebase操作。当然我去晚上搜了一下。

2024-05-27 10:19:27 654

原创 开发框架类型详细对比

MVC 中的Controller 只知道 Model 的接口,因此它没有办法控制 View 层的更新,MVP 模式中,View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起,以此来实现 View 和 Model 的同步更新。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。Model 负责存储页面的业务数据,以及对相应数据的操作。View 负责页面的显示逻辑,

2024-05-25 10:01:13 415

原创 前端中 dayjs 时间的插件使用(在vue 项目中)

dayjs

2024-05-25 09:44:05 441

原创 js无感删除url搜索部分,不刷新页面

【代码】js无感删除url搜索部分,不刷新页面。

2024-05-24 16:35:47 406

原创 前端javascript 中 JSON.parse() 的作用

1.解析 JSON 字符串。

2024-05-24 16:34:43 240

原创 前端开发技巧 --判断文本是否溢出

实现javascript 判断文本是否溢出。

2024-05-24 16:32:06 363

原创 前端优化的时间库

day.js的体积比moment.js小。moment.js有70多kb,但是day.js只有2kb。像微信小程序这种对代码包大小有要求的情况下,day.js会是比moment.js更好的选择。很多官方的框架和库都已经将moment.js换成了day.js。从moment.js迁移到day.js学习成本并不高,因为day.js是moment.js的微缩版,api相似度极高。moment已经好几年没更新了。但是day.js仍在持续更新中。

2024-05-24 16:24:34 504

原创 vue3 中判断一个变量是否位数字

判断变量是否为 数字

2024-05-24 10:54:15 341

原创 React中的使用ref 操作Dom

以匹配渲染输出,因此组件通常不需要操作 DOM。但是,有时可能需要访问由 React 管理的 DOM 元素——例如聚焦节点、滚动到此节点,以及测量它的尺寸和位置。React 没有内置的方法来执行此类操作,所以需要一个指向 DOM 节点的 ref 来实现。跟vue 中的类似 也有ref 操作dom。由于 React 会自动更新。

2024-05-24 09:59:25 344

原创 React 中的响应时间详解

使用 React 可以在 JSX 中添加。其中事件处理函数为自定义函数,它将在响应交互(如点击、悬停、表单输入框获得焦点等)时触发。

2024-05-23 17:56:57 1200 1

原创 React中 将UI 视为树

当 React 应用程序逐渐成形时,许多组件会出现嵌套。那么 React 是如何跟踪应用程序组件结构的?React 以及许多其他 UI 库,将 UI 建模为树。将应用程序视为树对于理解组件之间的关系以及调试性能和状态管理等未来将会遇到的一些概念非常有用。

2024-05-23 17:50:58 568

原创 react 保持组件纯粹

部分 JavaScript 函数是的,这类函数通常被称为纯函数。纯函数仅执行计算操作,不做其他操作。你可以通过将组件按纯函数严格编写,以避免一些随着代码库的增长而出现的、令人困扰的 bug 以及不可预测的行为。但为了获得这些好处,你需要遵循一些规则。

2024-05-21 10:30:51 429

原创 react组件中的共享数据

值会被作为 prop 传递给每个按钮,因此它们每次展示的都是最新的值。通过向上移动 state,我们实现了在组件间共享它。说白了 就是我们vue 中传递的prop 参数 父向子组件传值 然后子组件接受一下 这个才是react 中的重点语法问题。并一起更新,你需要将各个按钮的 state “向上” 移动到最接近包含所有按钮的组件之中。函数,所以函数内的代码会被执行。,当每个按钮被点击时,只有被点击按钮的。中的两个 count。此刻,当你点击任何一个按钮时,中的点击事件处理函数以及。在前面的示例中,每个。

2024-05-20 14:38:23 561

原创 react中hook 函数的使用

开发者可以自定义 Hook作为 JavaScript 函数。

2024-05-20 14:31:04 1451

原创 react中的更新界面问题

这个 更新界面也就是像我们在vue中使用的响应式数据的问题 因为vue是数据渲染视图 这两个框架说法 概念不同 但是其实主题解决的问题还是相同的。这个和vue中说的ref reactive 让某些数据 能够变成响应式数据 这样就能够实现数据渲染视图的特性 实现前端开发需求。通常你会希望你的组件 “记住” 一些信息并展示出来,比如一个按钮被点击的次数。要做到这一点,你需要在你的组件中添加。如果你多次渲染同一个组件,每个组件都会拥有自己的 state。并将新的值传递给它。React 将再次调用你的组件函数。

2024-05-20 14:02:28 263

原创 react 中的响应事件

当用户点击按钮时 React 会调用你传递的事件处理函数。你可以通过在组件中声明。事件处理函数:你只需。

2024-05-20 13:50:08 225

原创 react 中的渲染列表

用于在其兄弟节点中唯一标识该元素。通常 key 来自你的数据,比如数据库中的 ID。如果你在后续插入、删除或重新排序这些项目,React 将依靠你提供的 key 来思考发生了什么。对于列表中的每一个元素,你都应该传递一个字符串或者数字给。你将依赖 JavaScript 的特性,例如。函数将这个数组转换为。

2024-05-20 13:46:36 302

原创 react中的条件渲染

React 没有特殊的语法来编写条件语句,因此你使用的就是普通的 JavaScript 代码。所有这些方法也适用于有条件地指定属性。如果你对 JavaScript 语法不熟悉,你可以从一直使用。如果你喜欢更为紧凑的代码,可以使用。以上就是使用的方法 条件渲染。分支时,你还可以使用。

2024-05-20 13:32:43 110

原创 React中显示数据

他是这样使用的 跟咱们平常写的vue2 vue3 不一样 所以我们一开始写react 肯定很别扭 当然我们目前首先是要搞懂这个语法 说白了 咱去学习所有的新框架 语言 就是为了 更好的 挣钱 跳槽拿更高的薪资 先去懂这门框架 再根据公司要求 重点学。SX 会让你把标签放到 JavaScript 中。而大括号会让你 “回到” JavaScript 中,这样你就可以从你的代码中嵌入一些变量并展示给用户。你还可以将 JSX 属性 “转义到 JavaScript”,但你必须使用大括号。变量,然后将该值作为。

2024-05-20 11:43:16 309

原创 react中样式的书写

如果你使用了构建工具或框架,请阅读其文档来了解如何将 CSS 文件添加到你的项目中。React 并没有规定你如何添加 CSS 文件。最简单的方式是使用 HTML 的。来指定一个 CSS 的 class。在 React 中,你可以使用。

2024-05-20 11:34:48 418

原创 React 中的jsx 的语法使用

你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中,比如。它是可选的,但大多数 React 项目会使用 JSX,主要是它很方便。JSX 比 HTML 更加严格。react 中是使用 JSX 编写标签的。必须在view 包裹中书写你的代码。都开箱即用地支持 JSX。

2024-05-20 11:28:35 295

原创 React 组件创建以及使用

是以大写字母开头的。你可以据此识别 React 组件。React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母。一个组件是 UI(用户界面)的一部分,它拥有自己的逻辑和外观。组件可以小到一个按钮,也可以大到整个页面。我们现在有一个index 组件 可以把这个当成一个组件。我们要去创建一个组件 myTest 组件。目前这个组件的简单使用完成了。在index 页面中引入使用。React 应用程序是由。

2024-05-20 11:25:01 454

原创 Taro 框架中的React

当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。我们学习一门新的javascript的时候 我们首先会考虑到 框架 我们经常使用的框架有uni-app Taro 因为现在我们开发前端项目 都是用框架去开发 比较简洁 而且快 都是写好以及配置好的选项 所以我们使用框架i。我们从Taro中创建的框架 再加上这个React 的官网去自己学习 还比较好了解 我推荐大家这样去学。react 的版本是18 最新的。

2024-05-20 11:05:22 427

原创 React 的了解

你将会遇到开发者和设计师、初学者和专家、研究人员和艺术家、教师和学生等各行各业的人士。它们的样式和体验都和原生应用程序一样,因为它们的用户界面是真正的原生用户界面。这不是一个 Web 视图——你的 React 组件由平台提供的真实 Android 或 iOS 视图来渲染。React 让你使用相同的技能构建 Web 应用程序和原生应用程序。使用 React,你可以成为 Web 和原生应用的开发人员。你的团队可以在不牺牲用户体验的情况下发布到各个平台。人们希望原生应用程序都有和自己使用的平台相一致的体验。

2024-05-20 10:52:48 266

原创 vue和react 的简单对比

Vue框架和React框架都是现代前端开发中广泛使用的JavaScript库,它们各自具有独特的特点和优势。综上所述,Vue和React都是优秀的JavaScript库,各自具有独特的特点和优势。选择哪个框架取决于项目的具体需求和开发者的个人偏好。

2024-05-17 15:43:59 436

原创 前端一些 优化性能的技术和方式

前端开发中还有许多其他的优化技术,这些技术旨在提高网页的性能、减少资源消耗以及改善用户体验。以上是一些常见的前端优化技术,根据具体的项目需求和场景选择合适的技术进行优化,可以显著提高网页的性能和用户体验。

2024-05-17 15:37:47 253

原创 前端节流总结

1. 节流(throttle)简介场景:用户在一段时间频繁点击执行某个函数/事件,那么在这段时间,用户点击一次/多次(调用事件),都不会影响计时器执行,并且该函数/事件只执行一次。应用示例理解:技能冷却中,玩家在某种情况下使用了闪现这个技能,但是这个技能的冷却时间是120s,在这段时间里,玩家遇到危险,想要再使用闪现这个技能,频繁的点击它,但是并没用,闪现不会执行,计时器依然还在倒计时,等到120s倒计时为0才能再使用一次闪现的技能。2.应用场景窗口调整页面滚动抢购和疯狂点击。

2024-05-17 15:10:31 184

Taro + vue3 +ts + pinia的前端小程序/h5 框架模板

Taro + vue3 +ts 的前端小程序/h5 的框架模板,其中将request.js 的请求封装好了 使用的数据状态管理时pinia 其中的store 文件都已经建好 手动封装的tabbar 我们可以直接从这个基础上去开发,我们会节省很大的成本,请求函数以及请求文件 ,还有util中的tool.ts 一些封装的现成方法提供我们使用 大家可以去看看

2024-03-22

(一)什么是vue.md

vue基础的学习哦整理的笔记 有后续哦

2021-10-16

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除