SKILL.NULL

vim代码高亮

编辑或创建文件.vimrc
vim ~/.vimrc
在.vimrc文件中开启语法高亮配置:
syntax on

2025-10-30by SKILLNULL 其他阅读(16)评论(0)

H5滚动截取长图

使用开源库：html2canvas

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

<!DOCTYPE html>

<head>

<title>H5滚动截长图示例</title>

<style>

body {

font-family: 'Arial', sans-serif;

margin: 0;

padding: 20px;

background-color: #f5f7fa;

}

.container {

max-width: 800px;

margin: 0 auto;

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}

h1 {

color: #333;

text-align: center;

}

.controls {

display: flex;

justify-content: center;

gap: 10px;

margin: 20px 0;

}

button {

padding: 10px 20px;

background: #4CAF50;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}

button:hover {

background: #45a049;

}

#result {

margin-top: 20px;

text-align: center;

}

#content {

margin-top: 30px;

padding: 20px;

background: #f9f9f9;

border-radius: 5px;

}

.section {

margin-bottom: 30px;

padding: 15px;

background: white;

border-radius: 5px;

box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}

.loading {

display: none;

text-align: center;

margin: 20px 0;

color: #666;

}

</style>

</head>

<body>

<h1>H5滚动截长图示例</h1>

</div>

<div class="loading" id="loading">正在生成截图，请稍候...</div>

<h2>测试内容区域</h2>

</div>

// 生成测试内容

const longContent = document.getElementById('longContent');

for (let i = 1; i <= 20; i++) {

const section = document.createElement('div');

section.className = 'section';

section.innerHTML = `

<p>这是自动生成的测试内容段落 ${i}，用于演示长页面截图功能。</p>

</div>

longContent.appendChild(section);

}

let generatedImage = null;

document.getElementById('captureBtn').addEventListener('click', async function() {

const loading = document.getElementById('loading');

const result = document.getElementById('result');

const captureBtn = document.getElementById('captureBtn');

const downloadBtn = document.getElementById('downloadBtn');

loading.style.display = 'block';

result.innerHTML = '';

captureBtn.disabled = true;

try {

// 获取整个文档高度

const body = document.body;

const html = document.documentElement;

const height = Math.max(

body.scrollHeight,

body.offsetHeight,

html.clientHeight,

html.scrollHeight,

html.offsetHeight

);

// 使用html2canvas截图

const canvas = await html2canvas(document.querySelector("#capter"), {

scale: 2, // 高清截图

scrollY: -window.scrollY, // 修正滚动位置

windowHeight: height, // 设置窗口高度为整个页面高度

useCORS: true, // 允许跨域图片

allowTaint: true,

logging: true

});

generatedImage = canvas.toDataURL('image/png');

result.innerHTML = `<img src="${generatedImage}" style="max-width:100%; border:1px solid #ddd; border-radius:5px;">`;

downloadBtn.disabled = false;

} catch (error) {

console.error('截图失败:', error);

result.innerHTML = `<p style="color:red;">截图失败: ${error.message}</p>`;

} finally {

loading.style.display = 'none';

captureBtn.disabled = false;

}

});

document.getElementById('downloadBtn').addEventListener('click', function() {

if (!generatedImage) return;

const link = document.createElement('a');

link.download = 'fullpage-screenshot.png';

link.href = generatedImage;

link.click();

});

</script>

</body>

</html>

2025-09-10by SKILLNULL HTML&CSS, 前端阅读(312)评论(0)

ReactNative常见问题及处理

芯片：Apple M2

macOS: 13.3

react-native: 0.70.0

Xcode: 14.3.1

#### Mac IOS 常见问题

> boost 问题修复

将 /node_modules/react-native/third-party-podspecs/boost.podspec 中对应内容修改如下：

```shell

spec.source = { :http => 'https://sourceforge.net/projects/boost/files/boost/1.76.0/boost_1_76_0.tar.bz2',

:sha256 => 'f0397ba6e982c4450f27bf32a2a83292aba035b827a5623a14636ea583318c41' }

```

> We ran "xcodebuild" command but it exited with error code 65.

全局将 IPHONEOS_DEPLOYMENT_TARGET 的值替换成 12.4

> "RNSScreenStackHeaderConfig" was not found in the UIManager.

1、 "react-native-safe-area-context": "^3.4.1"

"react-native-screens": "3.25.0"

2、 cd ios & pod install

3、全局将 IPHONEOS_DEPLOYMENT_TARGET 的值替换成 12.4

> make sure you`re running a package server or have included a .jsbundle file in your application bundle.

如果有提示: [oh-my-zsh] Would you like to update? [Y/n]

更新zsh后，重启ios

2025-07-04by SKILLNULL ReactNative 阅读(972)评论(0)

根据.nvmrc自动切换项目所需node版本

vi ~/.bash_profile

插入一下内容

switch_node() {

local nvmrc_path="$(nvm_find_nvmrc)"

if [ -n "$nvmrc_path" ]; then

echo '根据.nvmrc切换node版本'

nvm use

}

switch_node

souce ~/.bash_profile

再打开命令行就会根据.nvmrc切换node版本。

注意：要先安装nvm

2025-04-23by SKILLNULL NodeJS 阅读(529)评论(0)

Command PhaseScriptExecution failed with a nonzero exit code

打开 ios/.xcode.env 文件

找到 export NODE_BINARY=$(command -v node)

更改为: export NODE_BINARY=your_node_path

[crayon-69037a9f45b716097981[……]

2025-04-23by SKILLNULL ReactNative 阅读(607)评论(0)

echarts双Y轴，实现均分为包含刻度0的指定段数，同时对齐刻度

要实现强制分为指定段数，并且对齐刻度，需要用的配置分别为yAxis的max、min、interval

echarts5.3有个配置项alignTicks，在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对 'value'和[cr[……]

2025-08-28by SKILLNULL 前端阅读(602)评论(0)

env(safe-area-inset-bottom) 兼容写法

@supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。

例：

@supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) {

.your-dom {

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

@supports not (

(padding-bottom: env(safe-area-inset-bottom)) or

(padding-bottom: constant(safe-area-inset-bottom))

) {

.your-dom {

padding-bottom: 20px;

}

2025-10-14by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(1697)评论(0)

缩放实现0.5px

一、

&::after {

content: "";

position: absolute;

top: -50%;

bottom: -50%;

left: -50%;

right: -50%;

border: 1px solid #e9e9e9;

border-radius: 2px;

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

二、

&::after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 200%;

height: 200%;

transform-origin: 0 0;

border-width: 1px;

border-style: solid;

border-radius: 50%;

-webkit-transform: scale(0.5);

transform: scale(0.5);

box-sizing: border-box;

}

2025-07-31by SKILLNULL HTML&CSS, 其他阅读(1367)评论(0)

禁止 IOS 橡皮筋效果

方法一：

首先，在拖动 div 时，判断当前容器 div 是否有滚动条，如果没有，则禁止整个 div 拖动，例：

const list_dom: any = document.querySelector(".list");

list_dom.addEventListener("touchmove",(ev) => {

if (list_dom.scrollHeight <= list_dom.clientHeight &&list_dom.offsetHeight <= list_dom.clientHeight) {

ev.preventDefault();

}

},{ passive: false });

注：上述方法仅适用于 div 内没有其他内容滚动情形！如果内层有其他[……]

2025-03-12by SKILLNULL 前端阅读(1255)评论(0)

JS 拦截浏览器返回

history.pushState(null, null, document.URL)

window.addEventListener('popstate',() => {

history.pushState(null, null, document.URL)

// TODO somthing

},false)

注：需要先点击页面进行交互，方法方可生效

2024-12-12by SKILLNULL JavaScript 阅读(1347)评论(0)

2025年十月
一	二	三	四	五	六	日
« 9月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31