前端大杂烩
文章平均质量分 88
各种前端知识
北极光之夜。
生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命!
展开
-
微信小程序子页面自定义tabbar组件
有时候微信小程序会遇到代码合并,就比如把B小程序代码迁移到A小程序,要使得B作为A小程序的一个子页面子功能。因为本身小程序都有tabbar,原来B也有,这时候就要给B子功能自定义一个tabbar底部导航栏。(注意,这个不是微信小程序自定义tabBar,不需要app.json中设置一个属性custom,因为A的tabbar是不修改不动的,只是在子功能模块多加一个tabbar,相当于只是自定义一个组件。)原创 2023-03-28 14:56:13 · 2371 阅读 · 2 评论 -
微信小程序wx.canvasToTempFilePath压缩上传图片,ios压缩成功但是数据sm2加密后无法发起请求,安卓一切正常
在写微信小程序的时候,采用wx.canvasToTempFilePath压缩图片且上传的时候,安卓一切正常,我在开发工具上也一切正常,偏偏ios上就不正常,不正常不是指压缩失败,而是明明也压缩成功了,竟然发不起网络请求,离大谱。因为所有请求的入参都会经过sm2加密,ios压缩成功后想要发起请求,就卡在了加密这步,无法执行下面的请求方法,打印出来加密前的参数也都没问题,但就是卡住了不往下走了,导致压根没发起请求,玄学。更玄的是去年ios都没问题,代码也没动过,现在ios就不行了。浅浅的记录下日常遇到的问题~原创 2023-03-22 15:52:56 · 1540 阅读 · 2 评论 -
发光立方体效果 html+css
css简单创意特效~原创 2023-03-17 17:26:04 · 4528 阅读 · 1 评论 -
(基于Vue.js的在线教学平台)源代码+数据库表 Vue.js+Node.js+MySQL 源码免费分享
毕业已经快一年啦,工作总时长也一年半左右了啦。现在也毕业季,想着与其吃灰,不如把去年写的毕设可以分享给大家,大家可以做过参考什么的,毕竟社区里秉承分享快乐原则~当然,这个项目其实很简单(大佬勿喷),技术什么的也简单,最基础的vue2,和最基础node里的express,最基础的mysql增删改查,因为当时想着过就好,所以觉得没必要写太复杂哈哈,当时也是实习下班后偶尔弄弄。虽然简单,不过还好去年答辩也顺利通过啦(当然分数不会太高哈哈)。。现在分享源代码给大家,gitee仓库自取~原创 2023-03-06 14:15:40 · 2388 阅读 · 7 评论 -
微信小程序富文本修改图片的大小
3年了,3年了啊!疫情终于快要结束了啊原创 2023-02-07 10:18:16 · 2924 阅读 · 8 评论 -
简易聊天室代码分享 js+socket.io
js+node+socket.io 只是单纯的代码分享哈,不算正式文章~只是单纯的代码分享哈,不算正式文章~只是单纯的代码分享哈,不算正式文章~重要的话说三遍。原创 2022-12-15 10:04:18 · 2072 阅读 · 2 评论 -
【微信小程序系列:五】小程序适老化自动适配工具miniprogram-elder-transform---微信老年关怀模式下小程序字体适配微信字体
这个工具我网上基本找不到任何一篇文章说这个miniprogram-elder-transform的使用的,==,既然没有,那咱就自己写第一篇~原创 2022-11-25 14:09:57 · 3845 阅读 · 1 评论 -
【微信小程序系列:四】前端利用wx.setStorageSync缓存设置有效时间
简单来说,就是利用缓存,进行有效期的保存,以此前端加以判断,在如登录状态过期,操作过期等场景使用,扩展性还蛮多的。原创 2022-11-11 16:25:23 · 5581 阅读 · 7 评论 -
五万字142道超全前端面试题---送给在校招的你
不知不觉,又到校招时间啦。这份面试宝典,是我在去年,在无数个月的黑夜下,奋笔疾书,呕心沥血,织帘诵书,映雪读书,废寝忘食,停停写写,巴拉巴拉能量,集大成之作。近80%内容都是按自己的理解收集与纯手打的题与答案。包括我自己以前在面试中经常遇到的问题也有收录。本着社区分享快乐原则,现在分享给各位同学,希望你能有所收获。当然,都是一些比较基础简单的内容,如果发现有误的地方,大概是我头昏眼花了,欢迎在评论区指出,一起讨论。原创 2022-10-25 14:16:25 · 1201 阅读 · 2 评论 -
【微信小程序系列:三】前端实现微信支付与代扣签约
微信支付算是比较常见的功能了,这里主要说下整个流程中前端负责实现的一些方面原创 2022-10-31 13:48:53 · 4580 阅读 · 2 评论 -
【微信小程序系列:二】小程序常用功能:跳转地图、扫一扫、人脸识别、拍照、拨打电话、调整屏幕亮度、文字可复制、监听截屏...
(~ ̄▽ ̄)~,hello,微信小程序系列第二篇,介绍下小程序里的常用功能api,可以快速copy使用~原创 2022-10-24 11:39:18 · 4413 阅读 · 2 评论 -
【微信小程序系列:一】携带参数跳转半屏微信小程序 先 A->B 后 B ->A
普通的小程序里跳转其它小程序大家都知道,用wx.navigateToMiniProgram,而跳半屏的小程序比较少,是用wx.openEmbeddedMiniProgram。效果大概如下,一般把跳转的小程序当个工具使用。原创 2022-10-21 10:40:32 · 2615 阅读 · 2 评论 -
3D立体相册不过是冷锋蓝plus版 html+css
转念一想,好像很久很久没出css特效的文章了,特别是工作之后,更少了。偶然翻看电脑内存的时候,发现这个自己1年多以前写的特效,甚美,又勾起我一段尘封的回忆。。。我原来也发过3D立体相册特效的,对于基础理念可以看那篇,看完再回来看这篇plus版。实现并不难,如下(完整源码在最后)。......原创 2022-08-29 14:51:22 · 916 阅读 · 5 评论 -
微信小程序用canvasToTempFilePath压缩图片,开发工具压缩正常而真机上比例失调
上传图片时有些图片太大了,需要压缩质量大小再上传。下面展示压缩质量大小上传,也是我踩过得坑:开发工具上压缩正常而在真机上比例失调。主要是用 wx.canvasToTempFilePath 方法。原创 2022-08-23 14:57:02 · 3680 阅读 · 3 评论 -
浅谈typescript及语法
标题强类型不允许随意的隐式类型转换,而弱类型是允许的标题1.声明原始数据类型:在变量后面指定一个关键字表示其只能为什么类型。string类型:const a: string = 'auroras'number类型:const b: number = 666 // 包括 NAN Infinityboolean类型:const c: boolean = truenull类型:const d: null = nullundefined类型:const e: undefined原创 2022-02-14 14:16:21 · 384 阅读 · 1 评论 -
Es6新特性Proxy代理用法解析
一.什么是Proxy:Proxy 对象是ES6新出的一个特性,用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。需要知道的是,在Vue2中双向数据绑定原理(数据劫持)采用Object.defineProperty,而在Vue3中数据劫持原理采用的是Proxy代理。为什么Proxy会取代Object.defineProperty:Object.defineProperty只能劫持对象的属性,不能监听数组。也不能对 es6 新产生的 Map,Set 这些原创 2022-02-14 14:15:26 · 9796 阅读 · 2 评论 -
vue封装echarts并实现大小动态自适应变化---超有用哇
大家好呀~echarts不就是去官网复制然后粘贴吗,为什么要封装?1.减少代码量,每次只要传宽度,高度与option配置项便能快速生成图表。2.原先的echarts并不能自适应屏幕大小变化。3.原先的echarts并不能自适应父盒子大小变化。原创 2022-01-14 16:03:55 · 5675 阅读 · 12 评论 -
初学福音,手把手带你vue封装弹框组件并全局注册使用~
大家好呀,好久不见,最近还好吗?今天分享个vue封装弹框组件的内容,并全局注册它,虽然内容比较简单,但是刚入门vue的小伙伴可以友好的了解组件封装思想~ (最后有完整源码)原创 2022-01-07 10:54:08 · 2560 阅读 · 4 评论 -
极简之SVN使用,入职必备
SVN是入职(学生)必备的版本控制工具,下面带你快速上手SVN的基本使用~SVN是subversion的缩写,是一个开放源代码的版本控制系统,通过采用分支管理系统的高效管理,简而言之就是用于多个人共同开发同一个项目,实现共享资源,实现最终集中式的管理。原创 2021-11-15 15:41:23 · 9502 阅读 · 5 评论 -
小方块上升组成背景特效 html+css+js
一.先看效果:二.详细实现(后面有完整代码):1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后面将通过js快速生成:<div class="container"> <div class="item"></div></div>2.定义全局css样式,.container的css样式: * { margin: 0; padding: 0; bo原创 2021-10-24 15:40:11 · 1658 阅读 · 8 评论 -
webpack5快速入门,船新版本,建议收藏 (ฅ´ω`ฅ)
目录一. 快速上手:1.1 Webpack功能:1.2 安装webpack:1.3 快速模拟搭建一个项目目录:1.4 webpack打包:二.基本使用:2.1.配置文件:2.2.loader:2.2.1 css-loader:2.2.2 style-loader:2.2.2 less-loader:2.3 browserslist:2.4 postcss-loader:2.5 importLoaders:2.6 file-loader处理图片:2.6.1 在js里通过src导入的:2.6.2 在css里通过原创 2021-10-16 16:21:30 · 490 阅读 · 5 评论 -
ES6模块化用法全解析
以前浏览器常用的模块化规范有 AMD(代表Require.js)和 CMD(代表Sea.js),但是都落伍了。服务端有 CommonJS规范。不过也不是标准的。最终ES6官方提出了大一统的模块化规范,这也是目前浏览器与服务端的通用规范。原创 2021-09-21 15:57:06 · 1976 阅读 · 3 评论 -
人类高质量JS函数柯里化
一. 速识概念????: ????????????你好呀,最近还好吗?JS函数柯里化是比较常见也是比较重要的内容。基础并不难理解,下面带你快速了解并使用js函数柯里化~ 芜湖,起飞 ???? 百度百科对柯里化的定义为:在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。概念枯燥难懂,直接看下面的例子。比如有个add函数,计算两个参数相加的值,一般我们这样写:function add原创 2021-09-14 20:48:39 · 642 阅读 · 1 评论 -
如何实现一个朴实无华的Canvas时钟效果
一.先看效果: ???????????? 大家好呀,很久没有写canvas小案例了,今天写一个canvas的时钟案例。效果可能看起来比较简单,没有那些花里胡哨的,不过,它涉及的canvas知识点是比较多的,初学canvas那是必定要会的。下面手把手带你快速实现~二.实现步骤(源码在最后):1. 设置基本的标签与样式: <div class="clock"> <canvas width="300" height="300" id="canvas"></原创 2021-09-11 16:56:26 · 812 阅读 · 2 评论 -
人类高质量JS函数继承
一. 函数继承是在JS里比较基础也是比较重要的一部分,而且也是面试中常常要问到的。下面带你快速了解JS中有哪几种是经常出现且必须掌握的继承方式。掌握下面的内容面试也差不多没问题啦~ 当然,这需要一定的原型链基础,对原型链不熟悉的可以看我这篇文章:速识js原型链。二.原型链继承: 原型链继承的要点在于父类的实例作为子类的原型。直接看下面这个例子: // 父函数 Person function Person(name, age) { // 定义一些属性 this.name原创 2021-09-05 12:01:31 · 827 阅读 · 9 评论 -
人类高质量JS防抖与节流机制
一.速识防抖: Hello呀,大家好????????????。防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~在这之前,比如我们先定义一个按钮,并绑定一个点击事件,执行要触发的事件:<!-- 定义一个按钮 --><input type="button" id="btn" value="按钮" /><script>// 获取标签 var btn = document.getElementById("btn");//原创 2021-08-29 17:30:59 · 2840 阅读 · 19 评论 -
前端必会的图片懒加载,你造吗?
一.何为懒加载: 在我们访问一个图片展示比较多的网页时,加载速度慢很多时候正是因为图片多导致,大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面,若用户只查看了网页的前面部分便离开,许多已经加载却因为处于网页底部而未呈现在视口区的图片,它们极大加重服务器压力了但是用户看都没看,白白浪费了性能。 为了解决上面的问题需要引入图片懒加载,懒加载其实很好理解,重点就是一个‘懒’字。当用户滚动相应可视区域,若可视区域有图片便加载,而在可视区域外未加载过的图片它原创 2021-08-19 23:01:45 · 2049 阅读 · 9 评论 -
js对象深浅拷贝,来,试试看!
一.速识概念????: 对象拷贝,简而言之就是将对象再复制一份,但是,复制的方法不同将会得到不同的结果。比如直接给新变量赋值为一个对象: // 1.建一个对象 var obj = { name: "北极光之夜。", like: "aurora", }; // 2. 直接将对象赋值给变量 clone var clone = obj; // 3.修改obj的like属性 obj.like = "wind"; // 4.输出 clone 对象 console.原创 2021-08-15 14:30:18 · 452 阅读 · 5 评论 -
你这篇速识 js闭包 保熟吗?我一写博客的能写生瓜蛋子?
一.速识闭包:直接说概念枯燥难懂,直接通过下面两个小例子迅速了解闭包:????1.首先思考下面这个简单的小例子,执行quote()函数,它 console.log(a) 打印的 a 到底是我们在局部函数里定义的 a=666 还是在全局里面定义的 a=888 呢? // 1.定义一个test函数 function test() { // 2.函数内部声明一个变量 a 为 666 const a = 666; // 3.retu原创 2021-08-11 21:40:40 · 875 阅读 · 3 评论 -
flex布局练习题,面试必备,持续更新建议收藏~
现在网页布局大多都是flex布局,像浮动这些用得比较少,在面试中flex也是被经常问到的。而有些同学学完flex后,又不懂怎么练习巩固,所以,所以,所以,我汇聚了一些常见的flex的练习题案例,写完再次加强掌握flex~原创 2021-06-15 18:12:18 · 5408 阅读 · 53 评论 -
canvas发送视频弹幕功能效果 html+css+js
一.话不多,先上效果:…二.详细实现步骤:1.先定义HTML标签: <div class="container"> <video src="./vd.mp4" controls loop autoplay ></video> <canvas></canvas> <div class="send"> <input type原创 2021-06-05 23:02:56 · 1998 阅读 · 7 评论 -
Vuex状态机快速了解与应用
一. 速识概念:1. 组件之间共享数据的方式:通常有以下几种方式:父向子传值:v-bind 属性绑定;子向父传值:v-on 事件绑定;兄弟组件之间共享数据:EventBus; $emit 发送数据的那个组件; $on 接收数据的那个组件;2. vuex是什么:按照官方的话来说,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 V原创 2021-06-05 17:23:45 · 1524 阅读 · 24 评论 -
canvas绘画板效果 html+css+js
每天一个小Demo,今天继续分享一个canvas绘画板特效,实现并不难的,初学canvas时拿来练习正正好。come on ,未来可期~二.实现步骤(可以跟着一步一步书写):1.先定义html标签:.cintainer是底层盒子,然后下面就是input标签的color对象和range对象,后面再有个canvas标签。<div class="container"> <div class="item"> 颜色选择:<input原创 2021-06-01 22:27:39 · 1205 阅读 · 10 评论 -
手把手教你10分钟做一个音乐播放器
一.话不多,先看效果: 视频B站效果演示地址~ (大佬勿入,大佬勿入,大佬勿入)这是个单页面音乐播放器,只用到了 html+css 与很基础的vue语法,所以适合初学者,看一看10分钟就会了~这个思路是借鉴黑马的~二.详细制作步骤(完整代码在最后):1.第一步当然是定义标签,对于每一个标签的作用注释都写得清清楚楚啦~:<!-- 最底层的盒子 --><div原创 2021-05-28 16:49:04 · 11022 阅读 · 116 评论 -
超简单的魔幻霓虹灯文字特效 html+css
今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~原创 2021-05-26 23:52:56 · 2482 阅读 · 14 评论 -
ES6➜ES11新特性汇总(图文详解可温故与快速查找~)
文章目录:一.ES6新特性:1. let 声明变量:2.const 声明常量:3.变量解构赋值:3.模板字符串:4.对象简化写法:5. 箭头函数:6.函数参数的默认值设置:7. rest参数:8.扩展运算符:9. Symbol:10. 迭代器:11.生成器:12.promise:13. Set(集合):14.Map:15.class类:一.ES6新特性:1. let 声明变量:书写格式:let a;let b,c;let d=10,f='asd',e=[];注意事项:1.变量不能重复声明:原创 2021-05-26 15:16:07 · 1363 阅读 · 19 评论 -
6分钟实现CSS炫光倒影按钮 html+css
话不多,先看效果: 回归老本行,继续分享简单有趣的CSS创意特效,放松放松心情~实现过程(完整源码在最后):1 老样子,定义基本样式: *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'fangsong'; } body{ height: 100vh;原创 2021-05-26 01:18:53 · 1815 阅读 · 7 评论 -
canvas文字粒子效果 html+css+js 3点饮茶,7点放工,美滋滋~
先言: 今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下: 因为gif图最大5m,但是这东西演示完又不止5m,所以就用视频演示效果了~BILINILI视频演示效果》实现步骤(完整源码放在最后):1.获取画布 //获取画布 var canvas = docum原创 2021-05-23 20:57:22 · 1912 阅读 · 3 评论 -
axios入门使用笔记
Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。原创 2021-05-20 15:02:01 · 1702 阅读 · 8 评论 -
JS数据结构与算法学习笔记大全 (温故而知新,可以为师矣。)
一.数据结构简介(序):1.1 概念程序设计 = 数据结构 + 算法。1.2 概念数据 = 符号(1). 其可以输入到计算机中。(2). 能够被计算机识别和处理。1.3 分类数据分为:(1).数据元素:数据的基本单位,也称为结点或者记录。(2).数据对象: 相同特性的数据元素的集合,是数据的一个子集。(3).数据项: 独立含义的数据的最小单位。数据的目的是存储,存储的目的是后期的再利用。1.4 作用数据结构的主要作用是:阐述关系。如何存储具有复杂关系的数据更有助于后期对数据的再原创 2021-05-17 16:21:59 · 5420 阅读 · 47 评论