feat: 整理笔记

HarryPoint · Jul 24, 2024 · e62a338 · e62a338
1 parent 263e92d
commit e62a338
Show file tree

Hide file tree

Showing 2 changed files with 164 additions and 18 deletions.
diff --git a/docs/知识点/C2E分享会.md b/docs/知识点/C2E分享会.md
@@ -207,46 +207,51 @@ Hardhat:
 Hardhat是一个以太坊开发环境，支持本地开发、测试和部署。
 使用示例：
 1. 初始化项目：
+```shell
 mkdir my-hardhat-project
 cd my-hardhat-project
 npm init -y
 npm instal1 --save-dev hardhat
 npx hardhat
+```
 2. 编写和部署智能合约：
-scripts/deploy. js
+
+```javascript
+// scripts/deploy.js
 async function main() {
-const [deployer] = await ethers.getSigners()；
-console. 1og("Deploying contracts with the account:"， deployer. address)；
-const HelloWorld
-await ethers.getContractFactory("HelloNorld")；
-const helloworld = await Helloworld.deploy()；
-console. 1og("Contract deployed to address:"， helloworld.address)；
+    const [deployer] = await ethers.getSigners();
+    console.log("Deploying contracts with the account:", deployer. address);
+    const HelloWorld = await ethers.getContractFactory("HelloNorld");
+    const helloworld = await Helloworld.deploy();
+    console.log("Contract deployed to address:", helloworld.address);
 }
-main().catch((error) =>
-console.error (error)；
-process.exitCode： 1；
-}；
+main().catch((error) => {
+    console.error(error);
+    process.exitCode(1);
+})；
+```
 3.运行部署脚本：
+```shell
 npx hardhat run scripts/deploy. js
+```
 MetaMask:
 MetaMask是一个浏览器插件钱包，用于与以太坊DApp交互。
 。安装插件后，创建或导入钱包，连接到测试网络进行开发测试。
 智能合约开发的基本步骤
 1. 编写智能合约：
 。使用Solidity编写合约代码。
 。编译合约并生成ABI（应用程序二进制接口），
-2. 部署合约：
+1. 部署合约：
 。使用工具（如Remix、Hardhat）将合约部署到以太坊网络（测试网或主网）
 。获得合约地址。
-3. 与合约交互：
+1. 与合约交互：
 使用Web3.s与合约进行交互，例如调用合约方法、查询状态等。
 示例代码：
 ```javascript
-const contractABI =
-/* ABI数组*/]；
-const contractAddress ='OxYourContractAddress'；
-const contract = new web3.eth. Contract(contractABI, contractAddress)；
-contract. methods.greeting().cal1(). then(console.1og)；
+const contractABI = [/* ABI数组*/];
+const contractAddress ='OxYourContractAddress';
+const contract = new web3.eth.Contract(contractABI, contractAddress);
+contract. methods.greeting().call().then(console.1og);
 ```
 总结
 回顾关键点：智能合约的定义、Solidity编程、工具使用和开发步骡。

diff --git a/docs/笔记/适配移动端-响应式布局.md b/docs/笔记/适配移动端-响应式布局.md
@@ -0,0 +1,141 @@
+
+## 处理图片加载
+
+1. 懒加载
+2. 响应式图片自动匹配尺寸
+
+> https://github.com/aFarkas/lazysizes
+
+## 生成图片资源
+
+通过gulp生成响应式图片的方法，限于篇幅，这里只生成了90,180和360和原始图片。实际推荐生成以下宽度的图片90, 180, 360, 540, 720, 900, 1080, 1296， 1512， 1728, 2048。以便覆盖从小屏幕到大屏幕的大部分情况（包括设备分辨率为2x的情况）。
+
+> *可以考虑生成32像素以下图片，用来做低分辨率的占位图
+
+1.安装gulp, gulp-responsive
+
+```shell
+yarn add --dev gulp
+yarn add --dev gulp-responsive
+```
+
+2.编写 `gulpfile.js`，如下所示
+
+```javascript
+var gulp = require('gulp')
+var responsive = require('gulp-responsive')
+gulp.task('default', function (){
+    return gulp
+        .src('images/*.{png, jpg}')
+        .pipe(
+            responsive({
+                '*': [
+                    {
+                        width: 90,
+                        quality: 50,
+                        rename:{
+                            suffix:'-90'
+                        }
+                    },
+                    {
+                        width: 180,
+                        quality: 75,
+                        rename:{
+                            suffix:'-180'
+                        }
+                    },
+                    {
+                        width: 360,
+                        rename: {
+                            suffix:'-360'
+                        }
+                    },
+                    {
+                        rename: {
+                            suffix: '-original'
+                        }
+                    }
+                ]
+            }, {
+                errorOnEnlargement: false,
+                skipOnEnlargement: true,
+                withoutEnlargement: true
+            })
+        )
+        .pipe(gulp.dest('dist/images'))
+})
+```
+
+3.`npx gulp` 生成目标图片
+
+## 配置使用
+
+1. 初始化配置（对背景图片懒加载处理）
+
+```html
+<script>
+function LoadJS(u) {
+    var r = document.getELementsByTagName("script")[0],
+        s = document.createElement("script");
+    s.src = u;
+    r.parentNode.insertBefore(s, r);
+}
+if (!window.HTMLPictureELement) {
+    loadJS("js/ls. resp img.min.js");
+}
+</script>
+<script src="https://afarkas.github.io/lazysizes/plugins/bgset/ls.bgset.min.js"></script>
+<script src="js/lazysizes.min. js" async></script>
+```
+2. 修改图片引用
+
+```html
+<img 
+    class="img-fluid lazyload" 
+    data-src="dist/images/p2604517782-32.jpg"
+    data-srcset="dist/images/p2684517782-98.jpg 90w,dist/images/p2604517782-188.jpg 180w,dist/images/p2604517782-original.jpg" data-sizes="auto" alt=""
+>
+```
+
+3. 对背景的引用（注意引入依赖插件）
+
+```html
+<section 
+    class="banner lazyload" 
+    data-bgset="dist/images/sky-540.jpg 540w, dist/images/sky-1080.jpg 1080w, dist/images/sky-original.jpg" 
+    data-sizes="auto">
+</section>
+```
+
+相关示例：
+
+1. https://github.com/aFarkas/lazysizes
+2. https://jsfiddle.net/trixta/bfqqnosp/
+3. https://github.com/aFarkas/lazysizes/tree/e305d28d4b6c4ff9f12dd4d438d5d7c5d41574db/plugins/bgset
+
+
+## 其他注意点
+
+移动设备优先: 确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+```
+width-device-width 表示宽度是设备屏幕的宽度。
+
+initial-scale-1 表示初始的缩放比例。
+
+shrink-to-fit=no 自动适应手机屏幕的宽度。
+
+## 效果测试
+
+### 手动测试
+
+使用Chrome自带的移动端调试功能
+
+### 自动测试
+
+Chrome的手动测试主要在方便开发者调试，最终还是要保证在用户的真机上可以正常浏览。可以像开头图片显示的，整一些手机做测试，但是没有群控的话，测试效率过低，做群控本身工程量也不小。因此，一般推荐直接使用相关的云服务，比如BrowserStack。
+
+资源链接：[BrowserStack](https://www.browserstack.com/screenshots)
+
+![img](https://cdn.jsdelivr.net/gh/HarryPoint/oss@main/uPic/2024-07-24_10:57:34_LXPdQC.png)