前端大杂烩
文章平均质量分 83
集成了所有博主在开发与学习中接触过以及使用过的前端技术,以及相关的使用和介绍,例如:React、Vue、Redux、React-Redux、Vuex、Express以及各种技术
断水流大撕兄
十几年寒冰沉浮,IT界的老油条程序猿!
展开
-
【快速搞定Webpack5】处理字体图标资源(六)
在实际开发中,几乎每个项目都需要用户icon图标以及部分项目会用到有特色的字体需求。今天我们学习的内容就是如何在webpack中处理字体及icon图标的使用。原创 2024-02-21 11:21:06 · 460 阅读 · 0 评论 -
【快速搞定Webpack5】修改输出文件目录及自动清理上次打包文件(五)
默认情况下webpack打包后,我们的图片和js等文件都会被打包到dist目录下,文件多了混淆在一起一方面不利于文件的查找和管理,另外一方面看上去也不美观。所以今天我们学习的内容就是控制输出后的文件进入不同的目录。原创 2024-02-21 10:06:57 · 414 阅读 · 0 评论 -
【快速搞定Webpack5】处理图片资源(四)
过去在webpack4中,我们处理图片资源通过file-loader和url-loader进行处理现在webpack5已经将两个loader功能内置到webpack中了,我们只需要简单配置即可处理图片资源。原创 2024-02-21 10:02:24 · 1407 阅读 · 0 评论 -
【快速搞定Webpack5】处理样式资源(三)
webpack本身是不能识别样式资源的,所以我们需要借助loader包来帮助webpack解析样式资源我们找loader都应该去官方文档中查找对应的loader,然后学习使用。官方文档找不到的话,可以从社区、GitHub中搜索查询css-loader | webpack 中文文档●css-loader:负责将css文件编译成webpack能识别的模块●:会动态创建一个style标签,里面放置webpack中引入的css模块内容此样式就会以style标签的形式在页面上生效●:负责将less。原创 2024-02-21 09:53:41 · 1201 阅读 · 0 评论 -
【快速搞定Webpack5】基本配置及开发模式介绍(二)
开发模式顾名思义就是我们开发代码时使用的模式。1、编译代码,使浏览器能识别和运行。开发时我们有样式资源、字体图片、图片资源、多媒体资源、HTML资源等,webpack默认都不能处理这些,我们需要加载配置来编译这些资源2、代码质量检测,树立代码规范提前检查代码的一些可以消除一定隐患与Bug、代码运行起来更加健壮。提前检查代码规范和格式,统一团队编码风格,让代码更优雅与美观。原创 2024-02-20 14:35:29 · 353 阅读 · 0 评论 -
【快速搞定Webpack5】介绍及基本使用(一)
webpack 是一个静态资源打包工具。他会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以在浏览器端运行了。我们将 webpack 输出的文件叫做 bundle 。(将浏览器不识别的语法编译成识别的语法)原创 2024-02-20 14:26:30 · 485 阅读 · 0 评论 -
【HarmonyOS应用开发】三方库(二十)
常用的三方库可以分为UI、动画、网络、图片、多媒体、数据存储、安全、工具等。@ohos/textlayoutbuilder:可以定制任一样式的文本构建工具,包括字体间距、大小、颜色、富文本高亮显示等。@ohos/roundedimageview:可以生成圆角矩形、或者椭圆形等图片形状。@ohos/axios:可以运行在node.js 和浏览器中,基于Axios 原库v1.3.4版本进行适配,并沿用其现有用法和特性。原创 2024-02-20 10:01:10 · 1207 阅读 · 0 评论 -
【HarmonyOS应用开发】云开发(十九)
HarmonyOS云开发是新推出的功能,可以让您在一个项目工程中,使用一种语言完成端侧和云侧功能的开发。基于构建的云侧能力,让您无需构建和管理云端资源,随需使用,大大提高构建应用/元服务的效率。随着我们应用功能越来越丰富,很多应用的运行都依赖云侧的支撑。相比于传统开发模式,云开发模式具备成本低、效率高、门槛低等优势。原创 2024-02-20 10:00:29 · 1205 阅读 · 0 评论 -
【HarmonyOS应用开发】应用数据管理(十八)
首选项为应用提供Key-Value键值型的数据存储能力,支持应用持久化轻量级数据,并对其进行增删除改查等。该存储对象中的数据会被缓存在内存中,因此它可以获得更快的存取速度,下面详细介绍下首选项的开发过程。常用接口有:保存数据(put)、获取数据(get)、是否包含指定的key(has)、删除数据(delete)、数据持久化(flush)等,后面依次详细介绍接口使用。常用接口使用前提1、需要导入模块到开发环境中,实例名字命名为,同时定义两个常量。原创 2024-02-05 11:24:16 · 921 阅读 · 0 评论 -
【HarmonyOS应用开发】HarmonyOS应用/元服务上架(十七)
当您开发、调试完HarmonyOS应用/元服务,就可以前往申请上架,华为审核通过后,用户即可在华为应用市场获取您的HarmonyOS应用/元服务。HarmonyOS会通过数字证书与Profile文件等签名信息来保证应用的完整性,需要上架的HarmonyOS应用/元服务都必须通过签名校验,所以上架前,您需要先完成签名操作。原创 2024-02-05 11:23:48 · 1227 阅读 · 0 评论 -
【HarmonyOS应用开发】后台提醒(十六)
应用可能需要在指定的时刻,向用户发送一些业务提醒通知。假设用户在8点新增这个喝水提醒,应用根据用户设置的信息生成提醒实例并发布提醒。后台代理提醒服务提供统一的提醒管理能力,在应用退居后台或退出后,计时和提醒通知功能被系统后台代理接管。提供后台代理提醒功能,在应用退居后台或退出后,计时和提醒通知功能被系统后台代理接管。到9点时,系统唤醒后台代理提醒服务发布通知,最终由通知服务触发桌面显示通知。若是修改提醒流程,则需要先删除旧的提醒,再新增新的提醒。如果需要修改提醒,则需要先进行旧提醒的删除,再新增新的提醒。原创 2024-02-04 15:01:50 · 958 阅读 · 0 评论 -
【HarmonyOS应用开发】APP应用的通知(十五)
通知会在不同场景以不同形式提示用户,例如通知在状态栏上显示为图标、在通知栏上会显示通知详细信息。重要的信息还可以使用横幅通知,浮动在界面顶部显示。下面以基础的文本通知为例,介绍通知的基本结构。通知小图标:表示通知的功能与类型。通知名称:应用名称或功能名称。时间:发送通知的时间,系统默认显示。展开箭头:点击标题区,展开被折叠的内容和按钮。若无折叠的内容和按钮,不显示此箭头。内容标题:描述简明概要。内容详情:描述具体内容或详情。本文将介绍几种常见类型通知的创建,在创建通知前需要先导入notificationMa原创 2024-02-04 14:55:44 · 1103 阅读 · 0 评论 -
【HarmonyOS应用开发】HTTP数据请求(十四)
日常生活中我们使用应用程序看新闻、发送消息等,都需要连接到互联网,从服务端获取数据。例如,新闻应用可以从新闻服务器中获取最新的热点新闻,从而给用户打造更加丰富、更加实用的体验。HTTP数据请求功能主要由http模块提供,包括发起请求、中断请求、订阅/取消订阅HTTP Response Header 事件等。在进行网络请求前,您需要在module.json5文件中申明网络访问权限。原创 2024-02-04 14:43:07 · 1437 阅读 · 0 评论 -
【HarmonyOS应用开发】Web组件的使用(十三)
相信大家都遇到过这样的场景,有时候我们点击应用的页面,会跳转到一个类似浏览器加载的页面,加载完成后,才显示这个页面的具体内容,这个加载和显示网页的过程通常都是浏览器的任务。ArkUI为我们提供了Web组件来加载网页,借助它我们就相当于在自己的应用程序里嵌入一个浏览器,从而非常轻松地展示各种各样的网页。Web组件的使用非常简单,只需要在Page目录下的ArkTS文件中创建一个Web组件,传入两个参数就可以了。其中src指定引用的网页路径,controller为组件的控制器,通过controller绑定原创 2024-02-02 10:28:16 · 1420 阅读 · 0 评论 -
【HarmonyOS应用开发】ArkTS 属性动画的使用(十二)
属性动画,是最为基础的动画,其功能强大、使用场景多,应用范围较广。常用于如下场景中: 一、页面布局发生变化。例如添加、删除部分组件元素。 二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素,或者将部分元素从一端移动到另外一端。 三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。简单来说,属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示,其原理是,当组件的通用属性发生改变时,组件状态由初始状态逐渐变为结束状态的过程中,会创建多个连续的中间状态原创 2024-02-02 10:09:10 · 1516 阅读 · 0 评论 -
【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-应用弹窗(十一)
选择类弹窗用于方便用户选择相关数据,比如选择喜欢吃的水果、出生日期等等。下面我们以TextPickerDialog和DatePickerDialog为例,来介绍选择类弹窗的使用。TextPickerDialog为文本滑动选择器弹窗,根据指定的选择范围创建文本选择器,展示在弹窗上,例如下面这段示例代码使用TextPickerDialog实现了一个水果选择弹窗。示例代码中使用selected指定了弹窗的初始选择项索引为2,对应的数据为“香蕉”。当用户点击“确定”操作按钮后,会触发onAccept事件回调,在回原创 2024-02-01 10:50:51 · 1819 阅读 · 0 评论 -
【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-Video组件的使用(十)
在手机、平板或是智慧屏这些终端设备上,媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集,还是视频的播放、切换、循环,亦或是相机的预览、拍照等功能,媒体组件都是必不可少的。以视频功能为例,在应用开发过程中,我们需要通过`ArkUI`提供的`Video`组件为应用增加基础的视频播放功能。借助`Video`组件,我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频,也包括查看我们存储在本地的视频内容。原创 2024-02-01 09:46:00 · 1756 阅读 · 0 评论 -
【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-管理组件状态(九)
在应用中,界面通常都是动态的。下图所示,在子目标列表中,当用户点击目标一,目标一会呈现展开状态,再次点击目标一,目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。ArkUI作为一种声明式UI,具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时,状态的变化会触发组件自动更新。所以在ArkUI中,我们只需要通过一个变量来记录状态。当改变状态的时候,ArkUI就会自动更新界面中受影响的部分。原创 2024-01-31 15:21:36 · 1067 阅读 · 0 评论 -
【HarmonyOS应用开发】ArkUI 开发框架-基础篇-第二部分(八)
一个丰富的页面需要很多组件组成,那么,我们如何才能让这些组件有条不紊地在页面上布局呢?这就需要借助容器组件来实现。容器组件是一种比较特殊的组件,它可以包含其他的组件,而且按照一定的规律布局,帮助开发者生成精美的页面。容器组件除了放置基础组件外,也可以放置容器组件,通过多层布局的嵌套,可以布局出更丰富的页面。ArkTS为我们提供了丰富的容器组件来布局页面,本文将以构建登录页面为例,介绍Column和Row组件的属性与使用。原创 2024-01-31 11:56:29 · 1094 阅读 · 0 评论 -
【HarmonyOS应用开发】ArkUI 开发框架-基础篇-第一部分(七)
组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元,包括Text、Image、TextInput、Button、LoadingProgress等,例如下面这个常用的登录界面就是由这些基础组件组合而成。原创 2024-01-30 15:05:13 · 1206 阅读 · 0 评论 -
【HarmonyOS应用开发】UIAbility实践第一部分(五)
UIAbility是一种包含用户界面的应用组件,主要用于和用户进行交互。UIAbility也是系统调度的单元,为应用提供窗口在其中绘制界面。每一个UIAbility实例,都对应于一个最近任务列表中的任务。一个UIAbility可以对应于多个页面,建议将一个独立的功能模块放到一个UIAbility中,以多页面的形式呈现。例如新闻应用在浏览内容的时候,可以进行多页面的跳转使用。原创 2024-01-29 14:36:45 · 795 阅读 · 0 评论 -
【HarmonyOS应用开发】ArkTS开发实践(四)
ArkTS以及ArkUI开发框架还很年轻,还有很多其它方面也会持续演进,比如UI自定义能力的进一步完善,语言运行时以及跨语言交互的进一步优化,跨OS平台能力的扩展,分布式开发范式等等。作为应用生态的底座,应用开发框架的创新永无止境。我们希望和广大的开发者一起,持续围绕着开发效率、运行体验、跨设备/跨平台等相关方面一起合作,一起创新,共建繁荣的应用生态。原创 2024-01-26 13:36:10 · 1164 阅读 · 0 评论 -
【HarmonyOS应用开发】TypeScript快速入门(二)
ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。要了解什么是ArkTS,我们首先要了解下ArkTS、TypeScript和JavaScript之间的关系:- `JavaScript`是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。原创 2024-01-26 10:22:55 · 961 阅读 · 0 评论 -
【HarmonyOS应用开发】开发介绍 DevEco Studio安装与使用(一)
- 在`HarmonyOS`应用开发学习之前,需要进行一些准备工作,首先需要完成开发工具`DevEco Studio`的下载与安装以及环境配置。- 进入`DevEco Studio`下载官网,单击“立即下载”进入下载页面。原创 2024-01-25 15:51:04 · 1525 阅读 · 0 评论 -
【保驾护航】HarmonyOS应用开发者基础认证-题库-2024
通过系统化的课程学习,熟练掌握ArkTSArkUI预览器模拟器SDK等HarmonyOS应用开发的关键概念,具备基础的应用开发能力。原创 2024-01-25 15:07:44 · 8458 阅读 · 1 评论 -
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpackwebpack工作就是打包,只要你安装的插件就可以打包一切,并且会自动解析依赖项,是前端的热门工具。BabelEcmascript的代码一直在更新 但是浏览器的兼容却没有根上,babel就实现了利用服务端node的 导入导出特性,实现了js代码的渐进增强、平稳退化。让我们可以随意使用新语法而不用考虑浏览器的兼容性问题。原创 2023-06-15 14:18:04 · 655 阅读 · 1 评论 -
React高级特性解析
使用API React.createContext 返回的是组件对象 可以利用结构的方式。组件里面使用函数 函数返回一个组件 函数的参数为Context初始化的参数。异步处理 多次增加数据会导致数据返回不到预期 可以使用函数形式处理。实际上就是一个回调函数 作用都是获取外部数据。HOOK提供了一系列函数式组件的钩子。则是个函数 需要设置值直接调用。ref则会成为叶子组件的ref。包裹的组件都可以获取提供者的。传入需要设置的值即可。区别点: 前者自带通过。为什么使用异步处理?原创 2023-06-13 13:59:45 · 1115 阅读 · 0 评论 -
Redux 异步解决方案2. Redux-Saga中间件
因为Generator。结合yield yield操作符会获取右边表达示的值返回 可以用于异步变同步操作中间件的特性: 以前的现在的。原创 2023-06-13 13:53:02 · 1589 阅读 · 0 评论 -
Redux异步解决方案 1. Redux-Thunk中间件
简单介绍一下thunk,这是一个中间件,是解决redux异步问题产生的。我们都知道,在使用redux的时候,通过dispatch一个action发生到reducer然后传递给store修改状态 一系列都是同步的,那如果说我dispatch一个action这个action帮我请求一下接口数据,你发现接口请求是异步的,没有办法等接口数据返回再传递给reducer 这个时候中间件就产生啦。redux比较常用的中间件有redux-sagae等 都是为了解决异步处理问题。原创 2023-06-13 13:48:06 · 2197 阅读 · 0 评论 -
React-Redux 对Todolist修改
在单独使用redux的时候 需要手动订阅store里面 感觉特别麻烦 不错的是react有一个组件可以帮我们解决这个问题, 那就是。提供了Provider和connent给我们使用。先说一下几个重点知道的知识话不多说,直接实战首先安装我们前面说了 子组件想要使用store里面的数据 得先使用Provider进行包裹index.js虽然已经提供了store里面的状态 但是子组件还是没有状态,正常的话需要手动订阅store里面的改变 当使用了之后 直接使用connent连接store。原创 2023-06-09 15:07:23 · 835 阅读 · 0 评论 -
React-Router 5.0 制作导航栏+页面参数传递
应用(单页面应用),要想实现页面间的跳转,首先想到的就是使用路由。的都会渲染这个组件 可以用这个增加用户体验 实现一个友好404页面。Link一般作用于跳转到其他页面 实则就是A链接。中,常用的有两个包可以实现这个需求,那就是。类似于编程语言的条件控制语句,匹配到一个。已经介绍过了 两种url不同的展现形式。以上代码已经实现了一个基本的导航。原创 2023-06-09 14:52:03 · 1564 阅读 · 1 评论 -
Vue3.0快速入门(速查)
Vue也是基于状态改变渲染页面,Vue相对于React要好上手一点。有两种使用Vue的方式,可以直接导入CDN,也可以直接使用CLI创建项目,我们先使用CDN导入,学一些Vue的基本概念。原创 2023-06-08 14:28:16 · 660 阅读 · 0 评论 -
react-native 修改包名
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。原创 2023-06-08 09:57:24 · 519 阅读 · 0 评论 -
初识TypeScript -基础一
在开始工作之前,就听朋友提过TypeScript,之前也没多想学习,直到vue3出来之后,感觉TypeScript 后面会成为主流,只能硬着头皮学学吧。读完本片文章,你会收获1、TypeScript的历史及其优势2、TypeScript和JavaScript的差别3、TypeScript的安装及编译4、TypeScript的基本类型TypeScript 是由微软公司在 2012 年正式发布,现在也有 8 年的不断更新和维护。原创 2023-06-06 16:07:58 · 356 阅读 · 0 评论 -
前端必知必会-BFC案例剖析
说了那么多的废话终于到我们今天的主题了,相信看了上面的一些介绍大家应该对BFC多多少少有一些了解了吧。没错,BFC块级格式化上下文,页面中独立的一块渲染区域,只作用于块级元素,内部的所有块级元素会按照它的一套渲染规则来排列。原创 2023-06-06 15:40:40 · 50 阅读 · 0 评论 -
React-Router 5.0 制作导航栏+页面参数传递
使用`React`构建`SPA`应用(单页面应用),要想实现页面间的跳转,首先想到的就是使用路由。在`Reac`t中,常用的有两个包可以实现这个需求,那就是`react-router`和`react-router-dom`。本文主要针对`react-router-dom`进行说明。原创 2023-05-23 17:24:47 · 167 阅读 · 0 评论 -
React结合Redux实现Todolist
使用了redux进行状态管理 删除一个用户首先dispatch了一个deleteTodoList的 action 然后在reducer中返回删除后的数据 store更新数据 组件订阅了store的更新后 更新了内部状态 页面更新成功。action和reducer之间并不存在一对一的关系。一个action是可以被多个模块的reducer处理的,尤其是当模块之间存在关联关系时,这种场景更为常见。原创 2023-05-25 15:57:57 · 75 阅读 · 0 评论 -
webpack4 快速上手
`module bundler`, `JavaScript `的模块打包器,大概意思就是,能够将一堆关系错综复杂的` .js, .css, .sass` 等文件,打包成几个静态的文件,在 `html `里面直接插入实用,`webpack`中包含了`gulp`自动打包工具、包含了`babel`转`es5`压缩等...另外,`Webpack4`正式发布以后。只要使用`npm install webpack`命令,默认安装的就是版本4。`webpack3`和`webpack4`的搭建区别还是挺原创 2023-05-23 17:46:32 · 222 阅读 · 0 评论 -
JS事件,你真的懂吗(捕获,冒泡)?
所有的js事件都会分为两个阶段捕获和冒泡。那么问题来了,我们通常看到的事件都是直接触发之后就执行了,那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的呢,这里给大家准备了一个例子原创 2023-05-26 17:39:34 · 317 阅读 · 0 评论 -
React-Native iOS打包
通过React Native的react-native bundle命令来进行打包的。react-native bundle的详细命令选项。,ios或者android入口的js名称,比如index.ios.js–platform,平台名称(ios或者android)–dev,设置为false的时候将会对JavaScript代码进行优化处理。, 生成的jsbundle文件的名称,比如release_ios/main.jsbundle图片以及其他资源存放的目录,比如release_ios/导出。原创 2023-05-24 16:19:22 · 586 阅读 · 0 评论