- 博客(67)
- 收藏
- 关注
RSS订阅原创 uniApp跨页面通讯$on、$emit、$once、$off使用场景及技巧
【代码】uniApp跨页面通讯$on、$emit、$once、$off使用场景及技巧。
2024-03-05 14:47:53
1480
原创 windows pm2 执行 npm脚本或执行yarn脚本遇到的问题及解决方案
在打开的文件夹依次点击node_modules —>npm —> bin ,即可看到npm-cli.js。1）在项目根目录新建ecosystem.config.js;1）在项目根目录新建pm2.js;将其输出复制到文件夹并打开。2）在项目根目录执行。2） 如何找到自己的。
2024-01-31 10:56:20
1583
1
原创 解决uniapp编译为微信小程序子组件具名插槽配合v-if使用，但是v-if为false时还是会替换默认占位内容
【代码】解决uniapp编译为微信小程序解决子组件具名插槽配合v-if使用，但是v-if为false时还是会替换默认占位内容。
2023-12-19 18:00:40
1176
原创 解决ant-design-vue中Select组件v-model值为空字符串不显示placeholder的bug
搜索renderPlacehoder方法将其修改为。
2023-11-28 19:53:39
1728
原创 解决uniapp编译的微信小程序不支持v-bind=“$attrs“
解决uniapp编译的微信小程序不支持v-bind="$attrs"；[vite] [plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not writable. 09:49:27.156 Use a v-bind binding combined with a v-on listener that emits update:x event instead.vue3批量传递属性
2023-04-25 10:17:26
10924
2
原创 flutter+andriod studio+windows 环境变量配置以及排坑
（为啥不选更高的，我选过，执行flutter doctor时有一个报错：不能识别电脑的操作系统是win10或者更高的，这个bug我改了半天没改出来，解决不了bug就只能解决版本）。解决方法：在andriod studio中的sdk manage下载这个，如图。1.找到自己flutter解压路径，找到对应的flutter.gradle打开。（推荐11或17），不然支持不了flutter3x版本，2x高版本都不支持。，进去全部复制到，同样在andriod studio根目录的文件夹。在官网下载的最新版本（
2023-03-30 16:44:42
898
原创 Could not resolve all files for configuration ‘:classpath‘.
首先允许我吐槽一下，这个bug花费了我3个小时，网上的问题都翻了一个遍。
2023-03-27 15:33:32
4740
原创 手写promise——Ts，实现then；catch；all这3个常用方法 （步骤详细）
手写promise TS 实现then；catch；all
2022-10-14 17:34:35
2391
原创 cancelanimationframe无效？不，你写法错了 ——踩坑日记
自己无聊 准备自己写一个老虎机来玩 要用关键帧来啥，开始了那肯定要结束不想看案例的，最底部有错误原因！！！错误写法const state = reactive({ render: 0 // 定义一个变量用来储存requestAnimationFrame})/** * 渲染动画 */const render = () => { const curIdx = state.idx[state.idx.length - 1] if (curIdx === 12) { c.
2022-04-26 17:40:14
4756
2
原创 css设置盒子宽高比固定，高度随着宽度发生变化
第一种方法： css属性：aspect-ratio——盒子的宽高比；1）它的属性值可为1； 1.2；0.2；1/2; 3/2; 2.2/3.22）当然也可以包一个calc(画蛇添足没必要)；3）注意不能设置百分比，就算用calc包裹也没用这个属性用着也比较简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X.
2022-04-22 10:58:48
6397
原创 window.history详细解析
Window.history是什么？Window.history是一个只读属性，用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口Window.history的interfaceenum ScrollRestoration { "auto", "manual" };[Exposed=Window]interface History { readonly attribute unsigne.
2022-03-31 11:20:34
12266
1
原创 micro_app解决项目中实际遇到的问题（浏览器回退url错乱）
1.子应用点击回退路径错乱// 在子应用（vue-router4）中添加如下设置 ：没有对路由堆栈state做唯一性标记，导致基座和子应用相互影响，vue-router3及其它框架路由没有类似问题if (window.__MICRO_APP_ENVIRONMENT__) { // 如果__MICRO_APP_BASE_ROUTE__为 `/基座应用基础路由/子应用基础路由/`，则应去掉`/基座应用基础路由` // 如果对这句话不理解，可以参考案例：https://github.com/mi.
2022-03-31 10:13:46
3951
原创 webpack3.6.0 使用less的踩坑记录
一个买来的老项目，用的是webpack3.6.0 + vue2.0 + vue-router3x + js,由于某些原因需要引入less文件直接上正确的步骤1. config目录下的index.js(webpack.config.js)添加loader rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]
2022-03-28 11:20:39
2419
原创 TS（typeScript）进阶
1.利用keyof将某个interface里的索引全部变为只读，不允许修改（或者全部变为可选/必有）interface Person { name?: string age: number gender: number}// 只读type ReadOnlyType<T> = { readonly [P in keyof T]: T[P]}// 可选type ReadOnlyType<T> = { [P in keyof T]?: T[P]}.
2022-03-18 14:01:15
1034
原创 ts(js)通用方法，提交给后端时去掉首尾空格
导出一个方法==paramsTrim==，传入一个参数==params==它的作用是将==params==里的值为string类型的去掉首位空格 不会改变params 返回新的==params==
2022-03-10 15:16:03
1811
原创 webpack代码分割配置
splitChunks: { chunks: 'all', // 默认作用于异步chunks, 值为all：分割所有代码 / initial / async：只分割import导入的代码 minSize: 0, // 默认为30kb，每个代码块的尺寸 minChunks: 1, // 被分割前被多少模块共享（引用次数） maxAsyncRequests: 2, // 限制异步块内部的最大请求数，即import了几次 maxInitialRequests: 3, // 每个入口文件能最大拆分的chu
2022-02-20 19:05:15
470
原创 webpack优化代码
1.压缩jsoptimization: { minimize: true, minimizer: [ // 压缩js new TerserPlugin({}) ]}2.压缩cssoptimization: { minimize: true, minimizer: [ // 压缩css new optimizeCSSAssetsPlugin({}) ]}3.压缩图片optimization: { test: /\.(png|svg|jpg|gif|jpeg|ic
2022-02-20 18:32:14
586
原创 防止 xss 攻击（跨站脚本攻击）；CSRF（跨站请求伪造）
1.对传入的值进行encodeUrl2.前端在页面上展示时，将字符进行转义转义的方法const fn = () => { return str.replace(/&/g, '&') .replace(/"/g, '"') .replace(/'/g, ''') .replace(/</g, '<') .replace(/>/g, '>')}...
2022-02-07 20:22:38
167
原创 前端实现跨域的方法
1.jsonp2.cors (node服务端设置)3.postMessage (iframe通信)4.window.name (iframe通信,a,b页面同源，c不同源； c将值放在window.name中,a页面中iframe嵌套c，然后在将iframe的地址改为b，b页面也可以使用window.name了)5.location.hash（利用iframe中url值带hash值）6.http-proxy7.nginx8.websocket9.documnet.domain.
2022-02-06 20:07:55
243
原创 node服务端可设置得 header头属性
1.Access-Control-Allow-Origin : string设置那些域名可访问2.Access-Control-Allow-Headers: string设置请求头里面可以带那些属性，多个属性值用逗号隔开 eg:‘name,name1,name2’3.Access-Control-Allow-Methods: string设置允许请求得方法，默认支持get，post； put等不支持4.Access-Control-Allow-Credentials: boolea.
2022-02-06 19:22:29
1338
原创 前端优化杂项
图片优化1.不同屏幕宽度加载不同大小的图片<img sizes="(max-width:500px) 100px,(max-width:600px) 200px" srcset="./img1.png 100w, ./img2.png 200w" />2.根据屏幕大小加载有用的css<link href="index.css" rel="stylesheet" meida="screen and (min-width:1024px)">3利用InterSection.
2022-01-19 19:47:33
651
原创 performance性能监控
详细看MDN上setTimeout(() => {const { fetchStart, // 开始访问 requestStart, // 请求的开始 responseStart, // 响应的开始 responseEnd, // 响应的结束 domIntereactive, // 可交互的时间的点 domContentLoadedEventEnd, // dom加载完毕 + domContentLoad完成的事件 $(function(){}) loadEventStart /.
2022-01-17 20:00:55
1344
原创 前端常用算法总结js
1.冒泡排序对相邻两个元素进行比较，若前一个大于后一个，则将两个元素调换位置，执行一次就会确定一个最大元素到数组的末尾，若排序的数组长度为n，那么第一次确定一个最大数需要比较n-1次，第二次n-2次，所以时间复杂度为 （n-1） + （n-2）+ … + 1 （n为奇数）那么就是n(n +1 )/2 （n为偶数）n^2 /2所以复杂度即为 O(n^2)js实现const arr = [8,342,645,7645,5673,234,63,456,346,54]/** * 冒泡排序 */.
2022-01-06 17:01:12
1075
原创 前端下单互斥逻辑（vue3.0语法，可根据自己需求改造）
所有值都支持动态配置，会根据你所选择的配置置灰不能选择的规格（规格也是动态传入）；而且支持规格不全选，也就是只选颜色、尺寸 其他的可不选 ，根据配置的规格效果图互斥逻辑组件，vue3语法、props里有默认值，可直接渲染出上图的效果<template> <div class="test-box"> <div class="list" v-for="(items, idx) in realFliterList" :key="idx"> .
2021-12-29 21:41:13
738
原创 nodeJs + TypeScript 解决导入的模块没有类型声明以及使用const重复声明
解决不同文件之间，用 const 声明相同变量，报错无法重新声明块范围变量解决方式：在文件末尾加入export{}原因：nodeJs 使用的是commonJs规范， 没有esModules概念，tslint将他不会当成是一个独立的作用域，利用export{}让tslint认为该文件是一个独立的作用域解决const fs = require(‘fs’) 出来的fs类型为any，使用过程中没有类型提示有类型声明，标准 es module 库：import * as xxxx from '' 或 im
2021-12-01 11:18:02
2081
原创 如何配置自己在npm发布的node_modules包需要在node环境运行（如何配置一个可以通过npx执行的包）
目录结构app node_modules src index.js package.jsonpackage.json 配置运行指令 "bin": { "node_test_zlz": "./src/index.js" // node_test_zlz 运行的指令 和你的包名name一样 }index.js 顶部添加环境配置#!/usr/bin/env node// 你的代码 eg：最上面一句很关键const fs = require('fs')...然后.
2021-11-30 16:57:22
1115
原创 js实现dom元素横向、纵向滚动的动画
通过settime实现的滚动动画，支持反复点击变快支持水平滚动和竖直滚动，快速点击会将上次未滚动完的距离叠加，滚动的时间不变，滚动的速度会变快使用方式1.复制下方代码；2.导出对应的方法 movingColumn - 竖直滚动 moving--水平滚动3.函数接收3个参数 dom: 要滑动的元素 space: 点击一次要滚动的距离 istop/isLeft 是否向上/左滚动功能修改const hz = 60 在规定时间分几次滚动到目标位置 60是人肉眼可识别的刷新
2021-11-24 19:23:33
2275
原创 防抖节流hooks，传入一个普通函数返回一个带有防抖或者节流的函数
调用hooksFn方法，通过传入一个普通的函数，返回一个带有防抖或者节流的方法该方法接接收3个参数，返回一个新函数param: fn 需要进行防抖节流的普通函数param: time防抖节流的时间param: type需要返回的函数时防抖还是节流 （notShake:防抖 throttle：节流）type Type = 'notShake' | 'throttle'/** * @params fn 要处理的方法； time 时间； type 返回的方法类型(notShake:防抖
2021-11-24 11:31:34
1011
原创 js千分位格式化，保留两位小数
传入正整数单位分 100000 得到 1,000.00/** * @memberof formartPrice * @param 传入正整数单位分 100000 * @returns 1,000.00 */export const formartPrice = (num) =>{ if (isNaN(num * 1)) { return num } num /= 100 num += '' if (!num.includes('.')) { num += .
2021-10-26 10:36:00
267
原创 js统一处理后端返回的null、undefined、空字符串
统一格式化后端返回的数据该方法直接修改原数据示例// 格式化前a:{ a1: undefined, a2: { b1: null }, a3: [{ c1: null }], a4: ''}// 格式化后a:{ a1: '-', a2: { b1: '-' }, a3: [{ c1: '-' }], a4: '-'}/***@params obj 要格式化的数组或者对象 type 将undefined、null、'' 要转化的内容*/expo.
2021-10-26 10:30:53
2037
原创 less的使用小技巧以及vite 如何配置less全局变量
1.变量-属性 可用于统一修改，比如特殊节日置灰等@primaryColor: #f2f2f2;// 使用color: @primaryColor2.变量-选择器 添加项目标识(可用于微前端的样式隔离)@nameSpace: 'my-app';// 在组件中使用@prefix-cls: ~'@{nameSpace}-component1';.@{prefix-cls} { ...}3.函数 可用于对复杂样式简单处理，用于响应式// 全局定义.t(props,pc,h5) whe
2021-10-25 11:45:01
7176
1
原创 qiankun微前端 vue 项目切换主应用然后切换回来 页面的部分样式失效
这个问题只会在windows google浏览器上出现，火狐 edge 上都不会出现，mac 的google也不会出现解决方法将失效的这个路由渲染的这个组件 不使用 按需引入{ path: '/setting/dataChart', name: 'dataChart', component: () => import('/@/views/dataChart/index.vue'), meta: { icon: 'ion:home-outline', .
2021-10-22 11:04:16
2865
原创 一键更改多个文件名字
当我们下载好了一些资源，这些资源为了躲避一些检测，就会将名字改成一些奇奇怪怪的，而且文件也比较多。我们本来就是要想快一点使用这些资源，结果还要去一个个重命名，这太麻烦了，于是我写了一个nodeJs来帮大家解决比如小面这种你可以快速处理成或者当然这个也可以反着来如何实现的1.下载nodeJs 很简单 百度就行 安装的时候一直点下一步就行了2.下载rename.ts 就是一个几k的文件 不用安装 百度网盘永久有效https://pan.baidu.com/s/1ZD1qwiyPy7A6.
2021-10-21 18:21:49
623
原创 通过npm 或者 yarn安装依赖时 报错 出现乱码解决方式
可以在package.json里加上这样一句话“resolutions”: {“bin-wrapper”: “npm:bin-wrapper-china”},他是解决安装位置不对
2021-09-28 09:22:03
4220
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人