前端小吕-CSDN博客

最近在写官网时候开开心心的将需求开发完成验收完毕，就在上线的时候你发生了奇怪的事情。上线后通过域名访问发现要很久页面才能展示出来，后来通过排查发现服务器带宽小的可怜，机智的我有通过Network 和 Lighthouse 发现问题出在字体上项目用到四个字体ui提供的都是15000kb左右的大小文件为otf后缀格式，导致页面解析慢想到字体的原因我就想到字体压缩找了一些工具发现其他都是pyhton或者需要手动录入用到的文字进行提取的，适合前端童鞋的好像只剩下了工具。

2023-03-19 10:36:03 3096 2

原创前端包管理工资 pm包管理前端限制npm preinstall

前端统一的包管理工具 preinstall pm包管理工具

2023-01-11 18:03:55 2459 2

原创前端提交信息规范 commit规范 commitlint husky commitizen

约定式提交前端提交规范 commitlint+husky+commitizen 小吕

2023-01-11 17:44:31 2695

原创前端跳转第三方网页中间页

前端跳转第三方过渡页面

2023-01-11 16:08:21 3990 3

原创微信小程序获取指定时间时间戳时间undefined/Invalid date

小程序获取指定时间 Invalid date

2023-01-11 15:21:01 2653

原创阿里云oss 批量下载图片(目标文件)阿里云oss

oss下载指定文件 oss自定义匹配下载

2022-10-27 16:10:41 4992

原创 uni-app 上传图片 H5 微信小程序 APP 均可使用

uni H5上传图片 uni 多端上传图片 H5 App 微信小程序均兼容

2022-10-11 14:44:24 3140

转载 js 如何使a==1 && a==2 && a==3 .. 成立

如何使a==1&&a==2&&a==3..成立。

2022-07-21 11:53:48 1886

原创前端自动化部署插件源码打包zip vite插件拿来即用

vite 自定义插件实现前端自动化部署市面上有很多自动部署插件但是源码展现服务器安全尽收眼底可实现打包本地zip 上传服务器等功能功能互不影响可单独运行

2022-07-18 16:21:06 3198 1

原创 H5微信授权登录 H5支付外部浏览器微信支付前端一个函数搞

H5支付代码解读上文中判断是否为微信内部浏览器环境上文使用返回为Promise若为微信内置浏览器环境还相对简单一些需要用调起支付；注意：仅在微信内置浏览器才会有对象；官方说文档声明在成功回调中不一定保证成功，这时市面上比较通用的两种办法...

2022-07-12 18:08:43 2531

原创 uni-app 多端本地图片转base64 本地图片转base64

文章目录uni 适配多端本地图片转base64 函数多端转换统一函数使用h5本地图片转base64app本地图片转base64微信小程序本地图片转base64uni 适配多端本地图片转base64 函数多端转换统一函数 function toBase64() { return new Promise((succeed,failure) => { uni.chooseImage({ count: 1, //默认9 sizeType: ['compressed'], so

2022-03-25 14:56:34 3634

原创转盘抽奖角度计算前端

前端转盘抽奖

2022-03-15 14:52:53 3503

原创 uni 小程序 AES请求封装

前端同学在写项目时大多项目使用的安全手段都是token，这种方式对前端后端来说都无疑是繁琐且安全性不高的方案。对于安全较要求高的项目往往推荐Aes加密方式首先npm i crypto-js引入 crypto-js 包基本使用 CBC方式import CryptoJS from 'crypto-js'const strKey=""; //十六位十六进制数作为密钥const iv= ''; //十六位十六进制数作为偏移量// 加密函数function encrypt(st

2021-12-24 18:57:28 2018

原创前端视频分片上传（blob）vue react uni 均适用

前言开发过程中我们难免会遇到上传视频的需求。如果视频过大或者后端需要将前端上传的视频切割为播放更友好的m8u3格式，我们的分段上传视频就显得尤为重要一、注意事项下面的代码基于vue2.0框架使用混入的方法进行调用。需要注意的是如果你的项目使用了ESlint需要关闭while (true) 循环条件永恒进入的校验 or 用自己方法编写也是可以的二、使用步骤1.组件代码/* 使用示例使用时更改自己的接口地址使用到依赖axiosimport upviedo from './upvid

2021-08-24 17:53:52 7262 7

原创 uni-app 小程序订阅消息发送

微信小程序的订阅消息实现流程文章目录微信小程序的订阅消息实现流程前言注意一、微信小程序订阅消息是什么？二、使用步骤1.小程序申请订阅消息功能2.小程序弹出订阅权限实现效果总结前言本文主要讲述使用uni-app发送模板信息的整个实现流程及示例代码注意前端发送订阅消息只能实时发送因为就算使用定时器推出小程序一样会清除定时器一、微信小程序订阅消息是什么？引用微信小程序官网的一句话：小程序订阅消息。消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验

2021-08-10 15:21:09 3238 1

原创原生svg 绘制进度条

效果图本次进度条运用到svg 和 circle标签对此方面不太熟悉的小伙伴可以收藏记录防止用的时候找不到因多为标签运用及css 少量js代码方便理解每个参数的作用注释都在代码中HTML<div> <svg width='200' height='200' viewBox="0 0 60 60" style="width:200px;height:200px;"> <circle cx="30" cy="30" r="27" fil

2021-07-08 15:03:07 1966 1

原创 uni-app 锚点跳转

效果图实现原理通过 uni.createSelectorQuery 获取dom节点距离顶部的距离再通过uni.pageScrollTo 滑动页面HTML//NAV部分<view class="" v-for="(item,index) in 数组" :key="index" @click="point(index)"> <text>{{item.name}}</text></view>// 内容部分<view class="new

2021-07-08 14:27:08 2748 2

原创 uni-app 实现瀑布流最简洁方案

瀑布流实现效果实现思路同样采用常见的两栏瀑布流布局，分别用数组goodsLeftList和goodsRightList储存左右两栏要渲染对象，初始化时，加载一张图片，然后依次把图片加到栏高更低的一栏中。主要使用的是image的@load事件。每次通过计算放入左右列表保存所有对象的数组将该对象删除图片加载完毕触发下个模块实现懒加载的效果代码理解<view class="waterfall_left" > <view class="waterfall_list" v-

2021-07-05 09:52:31 11902 17

原创前端下载服务器文件

前端直接下载服务器文件函数/* 使用的插件 axios 服务器如果有跨域问题修需配置跨域*/ downloadFile(src,name){ axios({ method: "get", url: src+'?t='+new Date().getTime(),//路径拼接时间戳 responseType: 'blob',//接受使用分片方式 }).then((res) => { let url = w

2021-04-23 15:23:46 2777

原创前端上传图片文件到服务器 COS

平时前端上传图片都会要后端中转一下发送给资源服务器再返回路径给前端，这样势必影响效率。在开发中前端是可以直接上传资源文件到服务器上的，只不过服务器密钥（下文中SecretId，SecretKey）保存在前端不太安全。解决方法向后端请求一个key值再拿这个key来请求服务器文件流形式上传import axios from 'axios'import COS from "cos-js-sdk-v5";import { Message } from 'element-ui'/* @fail

2021-04-22 15:29:39 3687

原创 uni-app 路由跳转节流（闭包函数）开箱即用

/* 路由跳转节流函数 type 跳转方式（必传：string） url 跳转路由 /page/.../... | 1 | 2 navigateBack （必传：string | number） successCallback 成功回调 (默认值：函数) failCallback 失败回调（默认值：函数） completeCallback 结束回调（默认值：函数） delay 延时时间（默认值：50 默认单位毫秒）*/function jump

2021-03-25 13:57:06 1815 1

原创 uni-app app 打开应用权限设置

// #ifdef APP-PLUS // 定位没有开启时提示用户是否开启 switch(uni.getSystemInfoSync().platform){ case 'android': 安卓机型太多目前还没找到合适的方法有安卓方法的可以评论 break; case 'ios': 方法1 // plus.nativeUI.confirm("定位权限没有开启，是否去开启？", function(e) { // if (e.index != 0) {

2021-03-15 15:55:18 8175 1

原创 uni-app nvue城市选择器 lh-select-city

推荐插件 https://ext.dcloud.net.cn/plugin?id=4375支持微信小程序 App nvue vue<lhSelectCity :value="value" :windowHeight="windowHeight" :hotCitys="hotCitys" @onSelect="onSelectCity"/>## 参数说明hotCitys 热门城市value 当前选中城市windowHeight

2021-03-11 15:43:35 2344 2

原创 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: "imgSrc"翻译过来意思就是避免直接改变一个道具，因为当父组件重新渲染时，这个值会被覆盖。相反，使用基于道具值

2021-02-05 16:31:04 2202

原创文本域输入多条数据回车enter 分割

这样的需求很多记住 /n//文本域Enter分割转数组export function textareaArr(str) { if(typeof str == "string"){ return str.split(/[(\r\n)\r\n]+/); }else{ return [] }}//文本域Enter分割转模板字符串export function textareaStr(arr) { if(Array.isArray(arr)){ return arr.join

2021-02-05 10:53:00 2488 1

原创 vue仿有赞魔方插件源码分享

项目要求封装一个有赞魔方矩阵类型的插件，我当时内心是拒绝的费尽周折查阅很多资料才找到靠谱的方法，下图为效果，因为没有几行代码就直接在csdn上分享了解决思路为：1、一共两层底下层添加自定义属性 y x 确定每一块元素的几行几列；2、知道点击的是几行几列之后计算出单个单元格的宽，上层通过定位实现；记得在确定的时候做个判断当前选中是否和其他冲突上代码<template> <div class="rowncolnParam"> <div class="

2021-02-01 10:13:48 3252 8

原创多个数组组合每个数组一提取一个元素 sku组合

写电商的小伙伴们都会碰到这个需求，比如一款手机有颜色：【红，黑，蓝】；内存：【64G，128G，256G】；网络：【4G，5G】；这时候买个手机就有很多种排列组合了。下面我就分享给大家一个函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=\, initial-scale=1.0">

2021-02-01 09:06:56 2417 1

转载快速上手vue3 Vue2和Vue3开发组件有什么区别

带你体验Vue2和Vue3开发组件有什么区别创建一个 template组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。对于有完美强迫症的童鞋“真的时太棒了”。我们这里的例子里就不展示了，用简单的单根节点的组件。Vue2 表格template

2021-01-28 09:35:56 2254 2

事件高级用法及兼容写法

一、事件基础 1.事件函数 obj.on-事件名=fn 定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行 2.事件对象 1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递 Event 常见属性： clientX clinetY 鼠标相对客户端的位置 pageX pageY 鼠标相对于页面的位置 type 事件类型 target 事件作用的节点对象 2）事件的兼容性：在低版本的IE和火狐上，事件传递机制不一样，需要通过window.event来获取事件 window.event||e 二、事件绑定和取消 1. 事件绑定添加事件的做法，若出现为同一个节点绑定了同名的事件，会出现覆盖效果。 addEventListener(事件名,事件函数,isBubble) isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制注意：事件名没有on前缀 removeEventListener(事件名,事件函数,isBubble) 注意：一定要保证移除事件时和添加事件时是同一个事件函数事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用： attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件注意：事件名包含on前缀两种事件绑定的区别： 1.addEventListener：事件名没有on前缀可以选择冒泡或者捕获机制 this 指事件调用者同名事件的执行顺序：先添加先执行 2.attachEvent 事件名需要添加on前缀不能选择冒泡或捕获的机制 this 指window对象同名事件的执行顺序：后添加先执行三、事件流事件流：事件被触发之后会在DOM树的节点之间传递冒泡：事件由最具体的元素(事件的触发者),层层向外传递（传递给父节点），直到window 对象停止捕获：事件由最外层元素(window),层层向内传递，直到最具体的元素事件流机制有时候会对页面效果造成一些影响，所以需要拦截事件的冒泡：兼容性写法： window.event?window.cancelBubble=true:e.stopPropagation() 四、拦截浏览器的默认行为拦截浏览器自带的一些事件行为，例如：a超链接的跳转等.... 对象.事件名 return false 对象.addEventListener() e.preventDefault() 对象.attachEvent() e.returnValue=false; retrun false; 五、常见事件右键事件：oncontextmenu 键盘事件：onkeydown onkeyup onkeypress 键盘事件的属性： key 在IE中不支持键名称 keyCode 键码滚轮事件： Onwheel 标准浏览器和IE 对象.addEventListener(“DOMMouseScroll”,事件函数,false) 火狐滚轮事件对： wheelDelta 标准浏览器和IE 120 -120 下 120 上 detail 获取 3 六、事件的委托事件委托：事件添加元素父节点(原理：事件的冒泡机制) 将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件

2020-07-08

'C笔记' is not recognized as an internal or external command,

2023-05-13

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

TA关注的人