iblackboy的博客

使用markdown-it插件，控制链接的点击事件

iblackboy — Wed, 26 Mar 2025 11:14:13 +0800

长链接：https://www.test.com/file/fj45j3k2efsf9d9g8mcnbn8774nbf77ndsfbsghjhjvd77g834bbkk。使用场景：AI项目回答的格式是markdown，于是引入了markdown-it用于展示，因为存在引用链接过长的问题，用户体验不好，决定将长链接改为短链接进行跳转。短链接：https://www.test.com/file/884747636。

公众号微信网页开发------使用JS-SDK

iblackboy — Tue, 25 Mar 2025 16:32:14 +0800

路由切换时操作的是浏览器的历史记录，iOS会把第一次刚进入时的URL作为真实URL，安卓会把当前URL作为真实URL，导致后端在配置好的授权参数获得的config参数和微信sdk获取的参数是不一样的，所以ios的url参数对不上会一直报错realAuthUrl invalid signature 当然别忘记ios是哈希路由模式也需要将#后面部分进行截取否则也会导致无法对应。url的值是当前页面的路由，用location.href.split(‘#’)[0]，这里就是文章开头的坑2了！

npm login 或者 npm publish 超时timeout

iblackboy — Thu, 05 Sep 2024 11:01:47 +0800

因为想发布到npm上，所以这里的镜像源要换回https://registry.npmjs.org，分析这个问题，timeout，那大概率被公安部墙了，我都服了，npm你墙它干啥！多年前也自己试过发包，很顺利，没有问题。后面尝试了很多方法，发现这个对我有效，就是设置代理。但现在不行了，一开始就卡死了，就报这个错误。1.更新npm和node的版本，用最新的。3.公司网络导致的？代理的地址怎么来的没研究，但确实可行。2.科学上网导致的？为了解决这个问题，我尝试了。

css 文本超过两行，使用...省略

iblackboy — Thu, 18 Apr 2024 14:02:12 +0800

【代码】css 文本超过两行，使用...省略。

微信开发者工具编译后，页面空白，Wxml内容为空

iblackboy — Wed, 03 Apr 2024 16:20:31 +0800

最近遇到了一个奇怪的问题，使用的uniapp运行的微信小程序，改动代码保存后页面就变成空，接口调用一切正常，Wxml内容为空。截止2024年4月3日，最新版微信开发者工具有bug，版本号1.06.2402040。回滚版本后，问题解决。相信后续官方应该能修复这个bug，但是现在的我等不及了。清除数据缓存后才正常，但是对于日常开发而言体验极差。好人做到底，下面的是windows X64的下载链接。根据错误提示，尝试了以下方法也没有用。历史版本的下载，可以参考这个网站。最终，我的问题解决了。

vue3+Vite+TS项目，配置ESlint和Prettier

iblackboy — Mon, 25 Mar 2024 11:18:05 +0800

是一个用于检测 ECMAScript/JavaScript 代码中的潜在问题和错误的工具，旨在使代码更一致并避免错误。它可以帮助开发者检测代码中的潜在问题，提高代码质量。一个“有态度”的代码格式化工具支持大量编程语言已集成到大多数编辑器中几乎不需要设置参数为什么使用Prettier?按保存键时，代码就被格式化了代码评审时无须争论代码样式节省时间和精力ESLint配置文件（需求不同，会有一些差异）env: {},extends: [],env: {},},},

滚动条优化

iblackboy — Thu, 08 Dec 2022 19:36:29 +0800

滚动条优化

webpack常见配置

iblackboy — Wed, 04 May 2022 17:00:29 +0800

前端webpack常用的配置项，片尾附带相关学习文章！

移动端展示pdf文件

iblackboy — Thu, 20 Jan 2022 17:43:51 +0800

移动端展示pdf

uni-app授权登录，获取用户信息及用户手机号

iblackboy — Wed, 15 Dec 2021 11:06:21 +0800

最近刚接触了uni-app，用于开发微信小程序，设计到了微信授权登录。抽个时间整理个笔记，适用于向我一样刚开始上手uni-app的初学者。

给页面或者特殊组件添加水印

iblackboy — Thu, 06 May 2021 12:06:23 +0800

主要分以下两种情况:1.常规页面2.特殊组件 1.常规页面直接按照这个操作,即可获得你想要的水印 https://www.zhangxinxu.com/wordpress/2020/10/text-as-css-background-image/ 使用的方式就是通过css将水印设置为背景图,难度不大. 2.特殊组件特殊组件指的是有时候想给引入的iframe或者其他的第三方组件(如:onlyOffice)添加水印.因为这些往往都是经过封装,单纯的改组件不可取,就要换一种思路.实现的方式不变,就是给把水印设

前端常用方法整理与区分（字符串，数组，对象）

iblackboy — Fri, 15 Jan 2021 10:13:50 +0800

前端常用的api很多，有些api功能上很接近，但是在具体的使用上面还是有差异的。就好比： 1、有些是在原数组上修改，有些是创建一个新的数组，原数组不变。 2、哪些api是专门用来操作字符串的，哪些api是用来操作数组的。 3、方法直接调用呢，还是方法中要放参数。特别像我这种鱼的记忆，几天不用就忘干净了。特此整理一下，持续更新中！ split() 作用:字符串分割成数组一个参数（必填），以这个参数为分割标准返回:数组栗子: var str='12345'; var arr=s

js判断对象是否为空

iblackboy — Wed, 06 Jan 2021 00:52:03 +0800

看似很简单的问题，但在一次做项目的时候被卡住了。。。这可能就是所说的基础薄弱吧不得已单独拿出来整理，快捷好用的方法主要有两个 1：使用转化为json字符串，再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{}"); alert(b); //true 为空， false 不为空 2.es6中可以使用Object.keys(obj)，返回值是一个表示给定对象的所有可枚举属性的字符串数组 let person =

git 细节区分

iblackboy — Fri, 23 Oct 2020 10:49:11 +0800

以项目为例,从拉取代码到平时的开发使用 git的三个区域: HEAD 指向最近一次commit里的所有snapshot Index 缓存区域，只有Index区域里的东西才可以被commit Working Directory 用户操作区域(工作区) 变化过程如下: 常规的操作命令 git clone 项目路径 //拉取代码 git add . // ...

React学习笔记-----ref

iblackboy — Wed, 07 Oct 2020 20:44:31 +0800

ref在react初期的时候是用于方便操纵dom元素的,就类似于document.getElementById()这种形式,获取dom树中的某个dom节点. 到现在为止,主要有三种使用形式方式1: string类型绑定类似于vue中的ref绑定方式，可以通过this.refs.绑定的ref的名字获取到节点dom 注意的是这种方式已经不被最新版的react推荐使用，有可能会在未来版本中遗弃方式2: react.CreateRef() 通过在class中使用React.create.

React学习笔记-----生命周期

iblackboy — Wed, 07 Oct 2020 20:07:23 +0800

react的生命周期的执行流程主要分为以下4种 1.初次加载:constconstructor->componentWillMount->render->componentDidMountructor->componentWillMount->render->componentDidMount

前端this指向性问题

iblackboy — Mon, 21 Sep 2020 14:54:04 +0800

时间久了,对前端this的指向中某些细节有些遗忘,单独拿出来整理一下,主要有以下几个部分 1.默认绑定,隐式绑定,显式绑定 2.构造函数 3.map()等api中回调函数的this 首先先来说说各种绑定方式之前的区别默认绑定: 默认绑定也就是普通函数中this的绑定方式,this的指向是window function test(){ console.log(this); } test() //window 隐式绑定: 最典型的就是对象中的某个属性是方法,这种this.

url获取?后面所有拼接的参数

iblackboy — Wed, 02 Sep 2020 13:40:31 +0800

在页面传值的时候,经常使用到方法就是url后面通过?拼接参数,再结合&可以实现多个参数的传递,例如 http://www.test.com?a=123&b=xyz&b=456 传参不难,只需要按照格式拼接起来,难点在于如何获取拼接好的参数,以上面为例,也就是获取?a=123&b=xyz&c=456这部分内容使用window.location.search！对，原生的这个api可以获取到?以及后面的参数值，但是不友好的地方在于获取的是字符串，给我们这么一坨东西

多个div在一个容器下横向布局,且实现滚动效果(不使用flex布局)

iblackboy — Fri, 28 Aug 2020 17:51:57 +0800

之前项目上有个需求就是：多个div在一个容器下横向布局，且实现滚动效果。(兼容ie浏览器,所以不能使用flex布局) 首先想到的是overflow-x：auto或者scroll。但是这里的需求它无法满足，因为这个属性适用于类似文本的内容，就好比

测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

如果这里的文字超出了div的宽度，设置这个属性是没有问题的，但是目前的需求是想让如下的项目们都能排成一排

ES6 class类的用法

iblackboy — Sun, 02 Aug 2020 09:13:12 +0800

es6 class基础用法以前的JavaScript没有类的概念，它是基于原型的面相对象的语言。原型对象的特点就是将自身属性共享给新对象。我们先看一下下面的代码实现。 //常规写法 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayInfo = function() { console.log(`${this.name}是${this.age}岁`); }; const