自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(87)
  • 资源 (3)
  • 收藏
  • 关注

原创 flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载

在 Flutter 的开发过程中,经常会遇到图片的显示和加载处理,通常显示一个图片,都有很多细节需要处理,比如图片的加载、缓存、错误处理、图片的压缩、图片的格式转换等,如果每个地方都手动处理,就太麻烦了,这时候就

2023-12-29 11:40:26 2523 2

原创 flutter-使用GestureDetector识别手势事件

在 flutter 中,GestureDetector 是手势识别的组件,可以识别点击、双击、长按、拖动、缩放等手势事件,并且可以与子组件进行交互,构造函数属性如下

2023-12-28 13:55:36 2511

原创 flutter-使用permission_handler进行系统权限的申请和操作

在大多数操作系统上,权限不是在安装时才授予应用程序的。相反,开发人员必须在应用程序运行时请求用户的许可。在 flutter 开发中,则需要一个跨平台(iOS, Android)的 API 来请求权限和检查他们的状态,

2023-12-28 10:27:27 7349 1

原创 flutter学习-day20-使用SafeArea组件处理各机型的安全距离

安全区域,指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响,也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内

2023-12-26 10:02:11 1840 1

原创 flutter学习-day19-国际化支持

默认情况下,Flutter SDK中的组件仅提供美国英语本地化资源(主要是文本)。要添加对其他语言的支持,应用程序须添加一个名为“flutter_localizations”的包依赖,然后还需要在MaterialApp中进行一些配置。

2023-12-25 11:20:46 1566

原创 flutter学习-day18-网络请求

Dart IO库中提供了用于发起Http请求的一些类,我们可以直接使用HttpClient来发起请求。

2023-12-22 10:59:40 990

原创 flutter学习-day17-文件操作

Dart的 IO 库包含了文件读写的相关类,它属于 Dart 语法标准的一部分,所以通过 Dart IO 库,无论是 Dart VM 下的脚本还是 Flutter,都是通过 Dart IO 库来操作文件的,不过和 Dart VM 相比,Flutter 有一个重要差异是文件系统路径不同

2023-12-21 15:47:39 905

原创 flutter学习-day16-自定义组件

当Flutter提供的现有组件无法满足我们的需求,或者我们为了共享代码需要封装一些通用组件,这时我们就需要自定义组件。在Flutter中自定义组件有三种方式:通过组合其他组件、自绘和实现RenderObject

2023-12-20 10:35:10 1204

原创 day15-动画和路由过渡和切换

在任何系统的UI框架中,动画实现的原理都是相同的,即:在一段时间内,快速地多次改变UI外观;由于人眼会产生视觉暂留,所以最终看到的就是一个“连续”的动画。我们将UI的一次改变称为一个动画帧,对应一次屏幕刷新

2023-12-19 11:06:54 791

原创 flutter学习-day14-事件处理和通知

在移动端,各个平台或UI系统的原始指针事件模型基本都是一致,即:一次完整的事件分为三个阶段:手指按下、手指移动、和手指抬起,而更高级别的手势(如点击、双击、拖动等)都是基于这些原始事件的

2023-12-18 10:20:17 1304

原创 flutter学习-day13-功能型组件和状态共享

为了避免用户误触返回按钮而导致 App 退出,在很多 App 中都拦截了用户点击返回键的按钮,然后进行一些防误触判断,比如当用户在某一个时间段内点击两次时,才会认为用户是要退出。Flutter中可以通过WillPopScope来实现返回按钮拦截。

2023-12-17 15:31:44 1198

原创 flutter学习-day12-可滚动组件和监听

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大;如果要一次性将子组件全部构建出将会非常昂贵!为此,Flutter中提出一个Sliver(中文为“薄片”的意思)概念,Sliver 可以包含一个或多个子组件。Sliver 的主要作用是配合:加载子组件并确定每一个子组件的布局和绘制信息,如果 Sliver 可以包含多个子组件时

2023-12-16 14:35:03 1284

原创 flutter学习-day11-容器类组件

Flutter里的padding和EdgeInsets是用来控制组件的填充和边距的。Padding一般包含一个child,以及一个EdgeInsetsGeometry抽象类,开发中,我们一般都使用EdgeInsets类,它是EdgeInsetsGeometry的一个子类,定义了一些设置填充的便捷方法

2023-12-15 10:38:59 1367

原创 flutter学习-day10-布局类组件

布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排列(layout)方式不同。

2023-12-14 09:55:11 1197

原创 flutter学习-day9-基础组件

主要是一些flutter的基础组件的应用和实例fonts:- family: myIcon

2023-12-13 11:47:14 1125

原创 flutter学习-day8-资源文件加载和管理

和包管理一样,Flutter 也使用pubspec.yaml文件来管理应用程序所需的资源,如下例子

2023-12-12 10:06:44 586

原创 flutter学习-day7-包和插件的引入和管理

包就是可以复用的模块化代码。其中一些可能包含Flutter的特定功能,因此对Flutter框架具有依赖性,这种包仅用于Flutter,例如fluro包。而一个最小的Package包括

2023-12-11 09:44:24 1151

原创 flutter学习-day6-路由和传参和守卫

MaterialPageRoute继承自PageRoute类,PageRoute类是一个抽象类,表示占有整个屏幕空间的一个模态路由页面,它还定义了路由构建及切换时过渡动画的相关接口及属性

2023-12-08 11:12:16 1072

原创 flutter学习-day5-认识widget

widget的功能是描述一个UI元素的配置信息。它不仅可以表示UI元素,也可以表示一些功能性的组件如:用于手势检测的 GestureDetector

2023-12-07 09:50:33 970

原创 flutter学习-day4-库和库的导入

如果导入两个具有冲突标识符的库,则可以为一个或两个库指定前缀。例如,如果 library1 和 library2 都有一个 Element 类

2023-12-06 14:19:38 718

原创 flutter学习-day3-dart基础

类似于 JavaScript 中的var,它可以接收任何类型的变量,但最大的不同是 Dart 中 var 变量一旦赋值,类型便会确定,则不能再改变其类型

2023-12-05 11:09:55 1195

原创 flutter学习-day2-认识flutter

Flutter 是 Google 推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App,一套代码同时运行在 iOS 和 Android平台。Flutter 提供了丰富的组件、接口,开发者可以很快地为 Flutter 添加 Native扩展。

2023-12-05 11:09:24 1336

原创 flutter学习-day1-环境搭建和启动第一个项目

启动 Android Studio,然后跟着安装向导操作。勾选安装最新的 Android SDK、Android SDK 平台工具和 Android SDK 构建工具

2023-12-05 11:09:03 1220

原创 使用TS进行Vue-Router的Meta类型扩展

使用Vue-Router时,会将一些字段信息附加到路由的Meta对象里面,比如图标icon,标题,权限等

2023-11-08 16:10:52 700

原创 Web Woeker和Shared Worker的使用以及案例

最近做的项目出现了界面卡顿的问题,经过一番排查,发现是因为有个数据做了一些格式化和生成转换,本来只有1000条数据,处理完之后变成了 N 万条数据(业务需求),导致页面渲染很慢,甚至会崩溃。

2023-11-01 16:41:26 672 1

原创 使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

最近在做一个文件夹管理的功能,要实现一个树状拖拽文件夹面板。里面包含两种元素,文件夹以及文件。

2023-09-25 17:48:18 1627 2

原创 ECharts动态修改series节点显示隐藏

要求将图表分组,根据用户选择的组,来确定ECharts要显示那些线条和柱子,也就是动态的显示series系列。

2023-08-29 18:29:46 2545

原创 拖拽宫格vue-grid-layout详细应用及案例

vue-grid-layout是一个适用于vue的拖拽栅格布局库,功能齐全,适用于拖拽+高度/宽度自由调节的布局需求,本文将讲述一些常用参数和事件,以及做一个同步拖拽的Demo。

2023-08-07 11:09:14 4272 3

原创 vue2的指令和自定义指令

自定义指令。是Vue暴漏了自定义指令的API给我们,让我们除了使用内置指令外,我们还可以自己定义指令(比如:复制粘贴指令,图片懒加载指令,防抖指令等等)

2022-12-26 12:16:04 2059 1

原创 cll创建的uniapp小程序动态更改manifest.json

事情的起因是这样的,项目是用cli搭建的uni-app小程序。申请了两个appid,一个用作开发人员调试使用,体验版和正式版都是dev环境。一个体验版是测试环境或者beta环境,而正式版是线上环境。

2022-11-08 10:52:15 1832 2

原创 手把手教你搭建规范的团队vue项目,包含commitlint,eslint,prettier,husky,commitizen等等

本文主要分享一个项目的规范约束从0到1的流程,从通过vue-cli创建项目,到团队协作插件安装(husky、eslint、commitlint、prettier等)

2022-09-01 17:19:02 1705

原创 vue-cli4升级到vue-cli5过程记录

本文主要分享vue-cli从4.x升级到5.x的过程,以及更新后的变化。

2022-08-25 14:05:27 4325

原创 微信小程序检查版本更新并重启

最近开发小程序时候碰上了一个问题,当发布新版本小程序后,需要用户能赶紧用上最新的,避免出问题。总结出几个情况如下

2022-08-15 11:49:54 5071 4

原创 jsx/tsx使用cssModule和typescript-plugin-css-modules

不管是vue还是react,都可以写jsx/tsx,为了避免样式污染,常用的方式有两种。一种是每个组件都用一个唯一类名class包裹,使用less/scss嵌套样式。另一种是使用cssModule模块化。

2022-07-25 13:47:24 2751

原创 uniapp小程序webSocket封装、断线重连、心跳检测

最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小程序适用的Socket类

2022-06-06 10:08:55 3824 5

原创 微信小程序AP配网局域网通信

最近在做IOT的项目,里面有个小程序要用到AP配网,和设备做一个局域网通信。

2022-05-30 11:37:00 2584 1

原创 使用webpack-bundle-analyzer查看vue项目打包依赖图

项目写完了准备上线,发现打包后的包很大怎么办?,但是打包后的文件晦涩难懂,如何了解打包文件的细节,到底是哪里占了体积,了解某一个文件是由哪些内容打包而成,从而针对性的优化项目体积。

2022-04-18 17:34:26 2239

原创 uniapp小程序图片前端压缩上传

这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线,使用无问题

2022-03-28 10:34:17 3677 1

原创 Vue3中setup语法糖学习

是在单文件组件中使用Composition API的编译时语法糖。相比于普通的语法,它具有更多优势

2022-03-14 13:14:24 8799

原创 TypeScript学习第二天:认识ts的数据类型

目录,类型总览2,基本类型2.1,布尔2.2,数字2.3,字符串2.4,Null2.5,undefined2.6,symbol2.7,bigint3,引用类型3.1,数组 Array3.2,对象 Object3.3,函数 Function4,TypeScript新增类型4.1,元祖 Tuple4.2,枚举 enum4.3,Any4.4,Void4.5,Never4.6,Unknown4.7,字面量

2022-03-07 22:08:01 1823 1

前端层级拖拽文件夹组件(Vue3+elementPlus的Tree组件实现)

功能:使用Vue3和ElementPlus的Tree组件,实现了一个具有创建、删除、重命名文件夹和文件功能的树形结构。用户可以通过拖拽操作来添加、移动或删除节点,同时在拖拽过程中显示辅助线。 能做到什么: 1. 创建、删除、重命名文件夹和文件:通过拖拽操作,用户可以在树形结构中创建、删除和重命名文件夹和文件。 2. 拖拽功能:支持将文件拖拽到文件夹中,或将文件夹拖拽到文件夹中,实现节点之间的移动。 3. 展开文件夹:点击文件夹节点时,可以展开显示其中的所有子节点。 4. 显示辅助线:在拖拽过程中,会显示一条辅助线,帮助用户更好地理解拖拽的方向和位置。

2024-01-05

js前端Web Woeker和Shared Worker使用案例demo

功能:通过使用JavaScript的Web Worker技术,实现了一个在前端运行的后台任务处理程序。用户可以通过发送消息给Web Worker来执行特定的任务,而不会阻塞主线程的执行。同时,该示例还展示了如何与Web Worker进行通信和共享数据。 能做到什么: 1. 后台任务处理:通过创建Web Worker实例,可以在前端实现后台任务的处理,提高页面的性能和响应速度。 2. 消息传递:通过使用postMessage方法,可以实现主线程与Web Worker之间的消息传递,实现数据的交互和共享。 3. 数据共享:Web Worker可以访问主线程的全局变量和函数,从而实现数据的共享和跨域通信。 4. 异步处理:由于Web Worker是在后台运行的,因此可以并行处理多个任务,提高系统的并发性能。 5. 跨平台兼容性:由于该示例是基于JavaScript编写的,因此可以在不同的操作系统和设备上使用,具有良好的跨平台兼容性。 6. 灵活性高:用户可以根据自己的需求自定义Web Worker的任务处理逻辑,具有很高的灵活性。

2023-11-02

js前端浏览器打开本地exe程序的demo

功能:在web浏览器页面上有一个按钮,点击按钮,调起本地的.exe程序客户端。通过添加注册表的方式实现该功能。 能做到什么: 1. 打开各种应用:用户可以通过点击按钮来启动本地的.exe程序客户端,从而实现打开各种应用程序的功能。无论是游戏、办公软件还是其他类型的应用程序,都可以通过该功能进行快速启动。 2. 提高用户体验:通过将常用的应用程序集成到网页中,用户可以方便地在浏览器中直接打开所需的应用程序,无需繁琐的寻找和启动过程,提高了用户的使用体验。 3. 跨平台兼容性:由于该功能是基于浏览器实现的,因此可以在不同的操作系统和设备上使用,具有良好的跨平台兼容性。 4. 简化开发和维护:通过添加注册表的方式实现该功能,可以简化开发和维护工作。开发人员只需要编写相应的代码,将其部署到服务器上即可,无需对每个用户的计算机进行额外的配置。

2020-10-16

js前端实现的组合快捷键demo(类似QQ截图快捷键等)

功能:通过JavaScript代码,实现用户自定义的组合快捷键功能。用户可以在网页上设置多个快捷键组合,当按下这些组合时,会触发相应的事件或执行特定的操作。 能做到什么: 1. 提高交互性:通过组合快捷键,用户可以更快速地执行常用操作,提高了网页的交互性。 2. 简化操作流程:用户可以通过设置组合快捷键来替代传统的鼠标点击操作,从而简化了操作流程,提高了工作效率。 3. 增加用户体验:通过提供多种组合快捷键选项,可以根据用户的使用习惯和需求进行个性化设置,从而提高用户体验。 4. 跨平台兼容性:由于该功能是基于JavaScript实现的,因此可以在不同的操作系统和设备上使用,具有良好的跨平台兼容性。 5. 灵活性高:用户可以根据自己的需求自定义组合快捷键,不受限制,具有很高的灵活性。

2020-09-09

js前端jsPlumb插件使用案例demo(流程图效果)

功能:通过使用jsPlumb库,实现了一个简单的流程图编辑器。用户可以通过拖拽节点和连接线来创建和编辑流程图。同时,该示例还使用了JsRender模板引擎、jquery、jquery-ui和bootstrap图标等插件。 能做到什么: 1. 流程图编辑:用户可以在网页上拖拽节点和连接线来创建和编辑流程图,实现对工作流程的可视化表示。 2. 模板引擎:使用JsRender模板引擎,可以方便地将数据渲染到页面上,实现动态内容的展示。 3. 交互性:通过jquery和jquery-ui库,可以实现与用户的交互操作,如缩放、拖拽等。 4. 样式支持:使用bootstrap图标库,可以提供丰富的样式和图标选择,使界面更加美观和易用。 5. 跨平台兼容性:由于该示例是基于JavaScript编写的,因此可以在不同的操作系统和设备上使用,具有良好的跨平台兼容性。 6. 灵活性高:用户可以根据自己的需求自定义流程图的内容和样式,具有很高的灵活性。

2019-10-20

空空如也

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

TA关注的人

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