jonathan 发布的文章

2024-08-06

基于 Taro 技术栈搭建的跨端客户端脚手架基于 Taro 技术栈搭建的跨端客户端脚手架一、项目背景接手的项目各个技术栈不同，有原生微信小程序，有flutter开发的客户端，有uniapp开发的客户端，现在想统一技术栈，为什么选择Taro不是uniapp，主要是因为ReactNative。二、技术栈选型 Taro 3.x：京东凹凸实验室开源的跨端开发框架 React 18：用于构建用户界面的 JavaScript 库 TypeScript：添加了类型系统的 JavaScript 超集 NutUI：京东风格的轻量级移动端组件库 Redux Toolkit：Redux 官方推荐的工具集 Pnpm：高性能的包管理工具三、项目结构设计 ├── config # 项目配置文件 │ ├── dev.js # 开发环境配置 │ ├── index.js # 基础配置 │ └── prod.js # 生产环境配置 ├── src # 源码目录 │ ├── api # API 接口 │ ├── assets # 静态资源 │ ├── components # 公共组件 │ ├── constants # 常量定义 │ ├── models # 模型定义 │ ├── hooks # 自定义 Hooks │ ├── pages # 页面文件 │ ├── service # 业务处理 │ ├── store # 状态管理 │ ├── types # TypeScript 类型定义 │ ├── utils # 工具函数 │ └── app.tsx # 应用入口四、关键技术实现 1. 多端适配策略 // 条件编译示例 import { Platform } from '@tarojs/service' // #ifdef WEAPP console.log('微信小程序环境') // #endif // #ifdef TT console.log('抖音小程序环境') // #endif 2. 状态管理方案 // store/index.ts import { configureStore } from '@reduxjs/toolkit' import userReducer from './slices/user' export const store = configureStore({ reducer: { user: userReducer } }) 3. 网络请求封装 // utils/request.ts import Taro from '@tarojs/taro' const request = async (options) => { try { const response = await Taro.request({ url: BASE_URL + options.url, method: options.method, data: options.data, header: { 'content-type': 'application/json', ...options.header } }) return response.data } catch (error) { console.error('请求错误：', error) throw error } } 五、最佳实践与注意事项 1. 组件库使用规范 NutUI 图标组件引入顺序问题 // ✅ 正确示例 import { ArrowRight } from '@nutui/icons-react-taro' import { Button } from '@nutui/nutui-react-taro' // ❌ 错误示例 import { Button } from '@nutui/nutui-react-taro' import { ArrowRight } from '@nutui/icons-react-taro' 2. 平台差异处理抖音小程序 AbortController 兼容性问题微信小程序热重载配置注意事项 3.注意点如果报如下警告 despite it was not able to fulfill desired ordering with these modules: * css ./node_modules/.pnpm/css-loader@7.1.2_webpack@5.78.0_@swc+core@1.3.96_/node_modules/css-loader/dist/cjs.js ??ruleSet[1].rules[4].oneOf[0] .use[1]!./node_modules/.pnpm/postcss-loader@8.1.1_postcss@8.4.49_typescript@5.7.3_webpack@5.78.0_@swc+core@1.3.96_/node_modules/postcss-loader/dist/cjs.js ??ruleSet[1].rules[4].oneOf[0] .use[2]!./node_modules/.pnpm/@nutui+icons-react-taro@2.0.1/node_modules/@nutui/icons-react-taro/dist/style_icon.css - couldn't fulfill desired order of chunk group(s) pages/user/index - while fulfilling desired order of chunk group(s) pages/index/index, pages/category/index, pages/order/index 原因是 import { ArrowRight } from '@nutui/icons-react-taro' import引入顺序有问题，因为在这个语句的前面有引入其他的组件，其他的组件里也使用了@nutui/icons-react-taro，所以会报这个警告，只需要把import { ArrowRight } from '@nutui/icons-react-taro'放到最前面就可以了。 4.坑点 taro的mock插件没有适配最新版，不能新建mock目录，已经适配了最新版的插件可自行编译https://github.com/javajeans/taro-plugin-mock 六、构建与部署 # 安装依赖 pnpm install # 开发环境 pnpm dev:weapp # 微信小程序 pnpm dev:tt # 抖音小程序 pnpm dev:h5 # H5 # 生产环境 pnpm build:weapp pnpm build:tt pnpm build:h5 七、性能优化建议合理使用条件编译组件按需加载图片资源压缩避免不必要的重渲染八、总结通过 Taro 技术栈，我们成功搭建了一套可维护、可扩展的跨端开发脚手架。该脚手架具有以下特点：统一的开发体验完善的工程化配置规范的代码风格丰富的组件库支持灵活的状态管理

2024年08月06日

2024-07-19

2024年07月19日

2024-05-24

Pytorch学习笔记训练模型数据集划分数据集通常会被划分为训练集（Training Set）、验证集（Validation Set）和测试集（Test Set），这样可以有效地训练、优化和评估模型的性能。 1. 训练集（Training Set）作用：用于模型的学习，即让模型调整参数（权重和偏置）。占比：一般占 60%-80% 的总数据。细节：模型在这个数据集上不断计算损失 → 反向传播 → 更新参数，以最小化误差。 2. 验证集（Validation Set）作用：在训练过程中监测模型的表现，用于调整超参数（如学习率、层数、神经元数量等），防止过拟合。占比：一般占 10%-20% 的总数据。细节：训练过程中不会对验证集进行梯度更新，仅用于计算指标（如准确率、损失）。用于超参数调优，选择最优模型配置。 3. 测试集（Test Set）作用：在模型完全训练好后，用于最终评估模型的泛化能力。占比：一般占 10%-20% 的总数据。细节：不能用于训练，也不能用于超参数调优，完全独立。反映模型对未见过的数据的表现，确保模型不会仅仅记住训练数据（过拟合）。为什么要区分验证集和测试集？很多人会问：“为什么不直接用测试集来调优超参数？” 原因：如果我们用测试集来调整超参数，模型就会对测试集产生信息泄露，测试集就不再是真正的未知数据，评估结果会有偏差。验证集的作用是提供反馈，而测试集的作用是提供最终评分。数据集划分方法 1. 直接划分 from sklearn.model_selection import train_test_split # 生成示例数据 X = [[i] for i in range(1000)] # 1000 个样本 y = [i % 2 for i in range(1000)] # 二分类标签 # 先划分为训练集 + 剩余集（80% 训练，20% 剩余） X_train, X_rem, y_train, y_rem = train_test_split(X, y, test_size=0.2, random_state=42) # 再划分验证集和测试集（各 10%） X_val, X_test, y_val, y_test = train_test_split(X_rem, y_rem, test_size=0.5, random_state=42) print(f"训练集大小: {len(X_train)}, 验证集大小: {len(X_val)}, 测试集大小: {len(X_test)}") 输出：训练集大小: 800, 验证集大小: 100, 测试集大小: 100 2. K 折交叉验证（适用于小数据集）如果数据集较小，可以使用 K 折交叉验证（K-Fold Cross Validation）： from sklearn.model_selection import KFold import numpy as np X = np.array(range(100)) kf = KFold(n_splits=5, shuffle=True, random_state=42) # 5 折交叉验证 for train_index, val_index in kf.split(X): print(f"训练集: {train_index}, 验证集: {val_index}") 总结数据集作用是否参与训练用于超参数调优何时使用训练集训练模型 ✅ ❌ 训练时验证集调整超参数，监测过拟合 ❌ ✅ 训练过程中测试集评估最终性能 ❌ ❌ 训练结束后 🚀 最佳实践： ✅ 80%-10%-10% 划分（训练-验证-测试） ✅ K 折交叉验证（当数据较少时）神经网络模型训练的原理神经网络模型训练的本质是一个优化过程，核心目标是最小化损失函数（Loss Function），使得模型对训练数据的预测尽可能准确。训练过程主要包括前向传播（Forward Propagation）、损失计算（Loss Calculation）、反向传播（Backward Propagation）、参数更新（Parameter Update）四个关键步骤。 1. 前向传播（Forward Propagation）计算从输入到输出的结果输入数据 ( X ) 经过加权求和和激活函数处理，得到预测值 ( Y_{\text{pred}} )。数学公式： [ Z = W \cdot X + b ] [ Y_{\text{pred}} = \sigma(Z) ] 其中： ( W ) 是权重（Weights） ( b ) 是偏置（Bias） ( \sigma(Z) ) 是激活函数（如 ReLU、Sigmoid） 2. 计算损失函数（Loss Calculation）衡量模型的预测值与真实值之间的差距损失函数（Loss Function）用来量化误差，常见损失函数：回归任务（预测连续值）：使用均方误差（MSE） [ L = \frac{1}{N} \sum (Y_{\text{true}} - Y_{\text{pred}})^2 ] 分类任务（预测类别）：使用交叉熵损失（CrossEntropy） [ L = -\sum Y_{\text{true}} \log(Y_{\text{pred}}) ] 3. 反向传播（Backward Propagation）计算梯度，调整参数通过链式求导法则（Chain Rule）计算每个参数对损失函数的贡献： [ \frac{\partial L}{\partial W} ] 反向传播的本质是梯度下降（Gradient Descent）： [ W = W - \alpha \cdot \frac{\partial L}{\partial W} ] 其中： ( \alpha ) 是学习率（Learning Rate） ( \frac{\partial L}{\partial W} ) 是梯度（Gradient） 4. 参数更新（Parameter Update）使用优化算法（如 SGD、Adam）调整权重，使损失减少：随机梯度下降（SGD）： [ W = W - \alpha \cdot \frac{\partial L}{\partial W} ] Adam（自适应学习率优化）计算梯度的指数加权平均适用于非平稳数据和稀疏梯度完整示例：用 PyTorch 训练神经网络 import torch import torch.nn as nn import torch.optim as optim # 1. 准备数据 X = torch.tensor([[1.0], [2.0], [3.0], [4.0]]) # 输入 Y = torch.tensor([[2.0], [4.0], [6.0], [8.0]]) # 真实值 # 2. 构建模型 class LinearRegressionModel(nn.Module): def __init__(self): super().__init__() self.linear = nn.Linear(1, 1) # 一层线性回归模型（y = Wx + b） def forward(self, x): return self.linear(x) model = LinearRegressionModel() # 3. 选择损失函数和优化器 loss_fn = nn.MSELoss() # 均方误差 optimizer = optim.SGD(model.parameters(), lr=0.01) # 4. 训练模型 for epoch in range(100): Y_pred = model(X) # 前向传播 loss = loss_fn(Y_pred, Y) # 计算损失 optimizer.zero_grad() # 清除梯度 loss.backward() # 反向传播 optimizer.step() # 参数更新 if (epoch + 1) % 10 == 0: print(f'Epoch {epoch+1}, Loss: {loss.item():.4f}') # 5. 预测新数据 new_X = torch.tensor([[5.0]]) predicted_Y = model(new_X).item() print(f"预测 5 对应的值: {predicted_Y:.2f}") 总结步骤说明前向传播计算从输入到输出的预测值计算损失计算预测值与真实值的误差反向传播计算梯度，优化参数参数更新使用梯度下降调整权重在 PyTorch 中，梯度下降（Gradient Descent）是优化模型参数的核心方法之一。PyTorch 提供了 torch.optim 模块，其中包含了多种优化算法，包括最基本的随机梯度下降（SGD），以及更高级的优化算法（如 Adam、RMSprop 等）。 1. PyTorch 梯度下降的基本流程梯度下降的核心步骤如下：前向传播（Forward Propagation）计算损失函数（Loss）。反向传播（Backward Propagation）计算梯度，即对参数求导。更新参数（Parameter Update）使用优化器（如 SGD）更新模型参数。 2. PyTorch 实现梯度下降 (1) 使用 torch.optim.SGD import torch # 创建模型参数（需要计算梯度） w = torch.tensor(2.0, requires_grad=True) # 定义损失函数 L = (w-3)² def loss_fn(w): return (w - 3) ** 2 # 定义优化器（学习率 lr=0.1） optimizer = torch.optim.SGD([w], lr=0.1) # 梯度下降迭代 for i in range(10): loss = loss_fn(w) # 计算损失 optimizer.zero_grad() # 清空梯度 loss.backward() # 计算梯度 optimizer.step() # 更新参数 print(f"Step {i+1}: w = {w.item()}, Loss = {loss.item()}") 流程解析 optimizer.zero_grad(): 清空梯度，避免梯度累积。 loss.backward(): 计算损失对 w 的梯度 ∂L/∂w。 optimizer.step(): 使用 SGD 更新参数： [ w = w - \text{lr} \times \frac{\partial L}{\partial w} ] (2) 手动实现梯度下降如果不使用 torch.optim，可以手动更新参数： w = torch.tensor(2.0, requires_grad=True) lr = 0.1 # 学习率 for i in range(10): loss = loss_fn(w) # 计算损失 loss.backward() # 计算梯度 with torch.no_grad(): # 关闭梯度计算，防止 PyTorch 记录计算图 w -= lr * w.grad # 参数更新 w.grad.zero_() # 清空梯度 print(f"Step {i+1}: w = {w.item()}, Loss = {loss.item()}") 这里手动计算 w -= lr * w.grad，效果等同于 optimizer.step()。 3. PyTorch 支持的优化算法除了 SGD，PyTorch 还提供了更高级的优化器： Adam (torch.optim.Adam)：适用于大多数任务，收敛快。 RMSprop (torch.optim.RMSprop)：适用于非平稳目标函数（如强化学习）。 Adagrad (torch.optim.Adagrad)：适用于稀疏数据。示例（使用 Adam）： optimizer = torch.optim.Adam([w], lr=0.1) 4. 选择合适的梯度下降算法优化器适用场景主要特点 SGD 经典梯度下降适用于凸优化，学习率难以调整 SGD + Momentum 加速收敛可减少振荡，适用于深度网络 Adam 通用结合了 RMSprop 和 Momentum，适用性强 RMSprop 适用于非平稳目标适用于强化学习和递归神经网络 Adagrad 适用于稀疏数据适合 NLP 任务，梯度会逐渐减小在深度学习任务中，Adam 是默认的首选优化器。 5. 结论梯度下降是优化模型的核心方法，PyTorch 提供了自动求导和优化器。使用 torch.optim 可以方便地管理优化算法，如 SGD 和 Adam。对于深度学习任务，Adam 通常是更好的选择。

2024年05月24日

2024-05-18

Typora+Picgo图床使用 Typora+Picgo图床使用 md文档使用时，文件或者图片经常存在本地，Picgo就是为了解决图片便捷的传到公网上便于访问。安装Picgo软件并安装。下一步依次安装即可安装完打开安装gitee插件搜索gitee记住一定要选择gitee-uploader 配置图床设置，首先配置SM.MS图床,不配置的话，gitee插件将无法使用，这是该版本bug 配置token token：ZBWDRhXv3ahMQKnRuOEsAOht8LU5K 配置gitee插件图床配置名：Default repo：jonath/pic branch：master token：532620711111111339a4c6653 path：img 点击确定将gitee设置为默认图床设置Typora 打开文件->偏好设置进行设置

2024年05月18日

2024-04-22

Markdown正确使用姿势 Markdown 下载Typora 下一步安装即可 1 Markdown 简介 Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。 2 Markdown语法教程 2.1 标题不同数量的#可以完成不同的标题，如下：一级标题二级标题三级标题 2.2 字体粗体、斜体、粗体和斜体，删除线，需要在文字前后加不同的标记符号。如下：这个是粗体这个是斜体这个是粗体加斜体 ~这里想用删除线~~ 注：如果想给字体换颜色、字体或者居中显示，需要使用内嵌HTML来实现。 2.3 无序列表无序列表的使用，在符号-后加空格使用。如下：无序列表 1 无序列表 2 无序列表 3 如果要控制列表的层级，则需要在符号-前使用空格。如下：无序列表 1 无序列表 2 无序列表 2.1 无序列表 2.2 由于微信原因，最多支持到二级列表。 2.4 有序列表有序列表的使用，在数字及符号.后加空格后输入内容，如下：有序列表 1 有序列表 2 有序列表 3 2.5 引用引用的格式是在符号>后面书写文字。如下：读一本好书，就是在和高尚的人谈话。 ——歌德雇用制度对工人不利，但工人根本无力摆脱这个制度。 ——阮一峰 2.7 链接微信公众号仅支持公众号文章链接，即域名为https://mp.weixin.qq.com/的合法链接。使用方法如下所示：对于该论述，欢迎读者查阅之前发过的文章，你是《未来世界的幸存者》么？ 2.8 图片插入图片，格式如下：支持 jpg、png、gif、svg 等图片格式，其中 svg 文件仅可在微信公众平台中使用，svg 文件示例如下：支持图片拖拽和截图粘贴到编辑器中。注：支持图片拖拽和截图粘贴到编辑器中，仅支持 https 的图片，图片粘贴到微信时会自动上传微信服务器。 2.9 分割线可以在一行中用三个以上的减号来建立一个分隔线，同时需要在分隔线的上面空一行。如下： 2.10 表格可以使用冒号来定义表格的对齐方式，如下：姓名年龄工作小可爱 18 吃可爱多小小勇敢 20 爬棵勇敢树小小小机智 22 看一本机智书 3. 特殊语法 3.1 脚注支持平台：微信公众号、知乎。脚注与链接的区别如下所示：链接：[文字](链接) 脚注：[文字](脚注解释 "脚注名字") 有人认为在大前端时代的背景下，移动端开发（Android、IOS）将逐步退出历史舞台。全栈工程师在业务开发流程中起到了至关重要的作用。脚注内容请拉到最下面观看。 3.2 代码块支持平台：微信代码主题仅支持微信公众号！其他主题无限制。如果在一个行内需要引用代码，只要用反引号引起来就好，如下： Use the printf() function. 在需要高亮的代码块的前一行及后一行使用三个反引号，同时第一行反引号后面表示代码块所使用的语言，如下： // FileName: HelloWorld.java public class HelloWorld { // Java 入口程序，程序从此入口 public static void main(String[] args) { System.out.println("Hello,World!"); // 向控制台打印一条语句 } } 支持以下语言种类： bash clojure，cpp，cs，css dart，dockerfile, diff erlang go，gradle，groovy haskell java，javascript，json，julia kotlin lisp，lua makefile，markdown，matlab objectivec perl，php，python r，ruby，rust scala，shell，sql，swift tex，typescript verilog，vhdl xml yaml 如果想要更换代码高亮样式，可在上方代码主题中挑选。其中微信代码主题与微信官方一致，有以下注意事项：带行号且不换行，代码大小与官方一致需要在代码块处标志语言，否则无法高亮粘贴到公众号后，用鼠标点代码块内外一次，完成高亮 diff 不能同时和其他语言的高亮同时显示，且需要调整代码主题为微信代码主题以外的代码主题才能看到 diff 效果，使用效果如下: + 新增项 - 删除项其他主题不带行号，可自定义是否换行，代码大小与当前编辑器一致 3.3 数学公式支持平台：微信公众号、知乎。行内公式使用方法，比如这个化学公式：$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$ 块公式使用方法如下： $$H(D_2) = -\left(\frac{2}{4}\log_2 \frac{2}{4} + \frac{2}{4}\log_2 \frac{2}{4}\right) = 1$$ 矩阵： $$ \begin{pmatrix} 1 & a_1 & a_1^2 & \cdots & a_1^n \\ 1 & a_2 & a_2^2 & \cdots & a_2^n \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 1 & a_m & a_m^2 & \cdots & a_m^n \\ \end{pmatrix} $$ 公式由于微信不支持，目前的解决方案是转成 svg 放到微信中，无需调整，矢量不失真。目前测试如果公式量过大，在 Chrome 下会存在粘贴后无响应，但是在 Firefox 中始终能够成功。 3.4 TOC 支持平台：微信公众号、知乎。 TOC 全称为 Table of Content，列出全部标题。 Markdown 下载Typora 1 Markdown 简介 2 Markdown语法教程 2.1 标题一级标题二级标题三级标题 2.2 字体 2.3 无序列表 2.4 有序列表 2.5 引用 2.7 链接 2.8 图片 2.9 分割线 2.10 表格 3. 特殊语法 3.1 脚注 3.2 代码块 3.3 数学公式 3.4 TOC 3.5 注音符号 3.6 横屏滑动幻灯片 4 其他语法 4.1 HTML 4.2 UML Typora与Picgo图床使用Picgo图床安装Picgo软件并安装。安装gitee插件配置图床设置，首先配置SM.MS图床,不配置的话，gitee插件将无法使用，这是该版本bug 配置token 配置gitee插件将gitee设置为默认图床设置Typora 由于微信只支持到二级列表，本工具仅支持二级标题和三级标题的显示。 3.5 注音符号支持平台：微信公众号。支持注音符号，用法如下： Markdown Nice 这么好用，简直是{喜大普奔|hē hē hē hē}呀！ 3.6 横屏滑动幻灯片支持平台：微信公众号。通过<![](url),![](url)>这种语法设置横屏滑动滑动片，具体用法如下： <,,> 4 其他语法 4.1 HTML 支持原生 HTML 语法，请写内联样式，如下：橙色居右橙色居中 4.2 UML 不支持，推荐使用开源工具https://draw.io/制作后再导入图片 Typora与Picgo图床使用Picgo图床 md文档使用时，文件或者图片经常存在本地，Picgo就是为了解决图片便捷的传到公网上便于访问。安装Picgo软件并安装。下一步依次安装即可安装完打开安装gitee插件搜索gitee记住一定要选择gitee-uploader 配置图床设置，首先配置SM.MS图床,不配置的话，gitee插件将无法使用，这是该版本bug 配置token token：ZBWDRhXv3ahMQKnRuOEsAOht8LU5K 配置gitee插件图床配置名：Default repo：jonath/pic branch：master token：5326207d7bcf21dba3fb7f739a4c6653 path：img 点击确定将gitee设置为默认图床设置Typora 打开文件->偏好设置进行设置

2024年04月22日