- 博客(37)
- 收藏
- 关注
RSS订阅原创 如何在 h.265 视频流中抓取到人脸并生成图片
现在的 web 需求也是越来越刁钻了。今天接到了一个奇怪的需求，要求在大屏播放实时直播的视频流，并且还要截取播放时段内一共出现了哪些人。
2024-07-31 18:00:56
333
原创 react-dnd 拖拽能力教程
一个完整的拖拽流程分为两部分：拖动+放置让一个元素支持拖动是一件非常容易做到的事情，只需要在对应的 dom 节点增加 `draggable="true"` 的属性即可。
2022-12-12 13:21:48
3392
原创 @wufengteam/core 统一中心注册器
统一中心注册器，顾名思义可以理解为将需要具备的资产汇总到统一的地方实现实现管控。并且能够做到资产的统一性、完整性和可配置性。
2022-11-20 21:14:26
312
原创 gitHub Action - workflow 概念和基本操作
gitHub Action - workflow 概念和基本操作一、workflow 文件本文编写参考：GitHub Actions 入门教程 - 阮一峰GithubAction—Workflow 概念和基本操作github action 的配置文件叫做 workflow 文件，存放在 .github/workflows 目录下。文件采用 .yml 或 .yaml 的后缀格式。一个库可以有多个 workflow 文件，只要有符合格式的后缀文件就会自动运行该文件。二、基本概念和术语wo
2022-04-21 15:45:06
1328
原创 React-Router v6 使用教学
React-Router V6 出版一段时间，前端的小伙伴们也开始向着 v6 版本进行升级。v5 和 v6 的版本 api 有些差异。对此写一篇文档整理了下 v6 的使用教学，文章已实际使用为主。
2022-04-20 20:40:27
3124
原创 UMI 插件 registerGenerator 粗略分析
熟悉 registerGenerator 的在 umi@3 和 umi@4 的使用(浅显的分析为自己的理解，不一定正确)
2022-02-27 11:42:21
696
原创 @alitajs/dform 移动端表单库 3.0 强势来袭
@alitajs/dform 移动端表单库 3.0 强势来袭一、回顾 2.0前言为了解决从事移动端 h5 开发的小伙伴被长表单支配的恐惧，我们在 2020 年年初推出了 dform 的第一个版本。经过一年多的时间的沉淀，在公司内部数十个项目中得到锤炼，不断的完善优化。升级了稳定的 2.0 版本。基础功能介绍我们借鉴 antd@4 的 Form 组件，对底层表单库进行二次封装。补充了 radio 单选、checkbox 多选、rangeDatePicker 时间区间选择器 等 antd-mob
2021-08-21 11:12:47
659
原创 命令行创建模版页面教程
命令行创建模版页面教程一、前言在日常的业务开发中，我们经常会在不同的项目中，甚至是相同的项目中开发相似的页面。那小伙伴的基本操作肯定是去翻找旧项目，然后 copy 代码过来改造(浪费时间)。今天我们就来学习个项目，实现通过一行命令帮你在项目中创建特定的页面代码。二、准备工作我们需要将项目推上 npm，才能实现该功能，所以没有 npm 账号的小伙伴提前去创建个 npm 账号。并给这个项目创建一个 git 仓库。创建一个 git 仓库在仓库中执行 npm init 给项目一个初始化的 pack
2021-08-19 20:42:21
287
原创 Lerna 入门级教程
Lerna 教程Lerna 教程一、什么是 lerna?二、环境搭建三、使用初始化项目创建项目包lerna bootstrap四、发布登录 npm发布err: 此存储库中没有提交err: 项目中存在未提交的代码err: 403 没有权限\增加许可证四、私有包1、创建 `npm` 组织和 `git` 组织。2、修改项目仓库名称Lerna 教程一、什么是 lerna?多包管理工具，方便我们在一个项目中管理多个 npm 包，能够在发包时统一每个包的版本号。优雅的解决大型多包项目中每发一次包都要手动修改各个
2021-07-04 10:05:15
8059
原创 eggjs 实现服务端请求教程文档-3
eggjs 实现服务端请求教程文档-3五、访问 MySQL 数据库1、连接数据库2、查询数据库六、Service 层继续上一篇文章的学习，如果小伙伴们要回顾上一篇的内容，请点击这里 eggjs 实现服务端请求教程文档-2五、访问 MySQL 数据库以上是新建的数据库内容，小伙伴可以自行搭建下。1、连接数据库根据官网教程在项目中安装对应的插件npm i --save egg-mysqloryarn add egg-mysql开启插件：/config/plugin.js'use
2021-05-08 17:55:50
391
3
原创 eggjs 实现服务端请求教程文档-2
eggjs 实现服务端请求教程文档-2三、用户详情接口开发(post 请求)eggwebeggwebegg四、egg 中间件eggweb继续上一篇文章的学习，如果小伙伴们要回顾上一篇的内容，请点击这里 eggjs 实现服务端请求教程文档-1三、用户详情接口开发(post 请求)egg有了 get 请求的示例，post 实现同理。/app/router/detail.js'use strict';module.exports = app => { const { router, co
2021-05-07 17:28:02
861
原创 eggjs 实现服务端请求教程文档-1
eggjs 实现服务端请求教程文档-1简介一、eggjs 框架搭建和讲解二、用户列表接口开发(get 请求)eggweb跨域问题简介该教程适合入门级小伙伴，使用 node eggjs 框架实现服务端开发，以及处理开发过程中遇到的问题。教程中的每个章节会附上 demo(git 分支)，小伙伴可以自行拉取代码查看。教程和 demo 会使用基于 umi 二次封装的 alita 框架进行页面渲染，重点讲解 eggjs 的 node 服务端框架。实现通过 get 请求获取的 user 列表，并通过 post
2021-05-07 17:19:20
1182
1
原创 使用 node 和 socket 实现在线聊天室
使用 node 和 socket 实现在线聊天室使用 node 和 socket 实现在线聊天室简介一、静态页面二、建立连接nodeweb三、发送、接收消息nodeweb四、多人聊天室nodeweb五、番外功能1、loading 状态2、增加 `enter` 监听事件[项目 git 地址](https://github.com/hang1017/socketDemo)编写不易，给个star吧～使用 node 和 socket 实现在线聊天室简介在 h5 端通过 socket 实现在线聊天室的功能，服务
2021-05-02 22:41:59
354
原创 Array.from()简介
Array.from()Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。什么是类数组对象：具有 length 属性的对象。若 Array.from 参数为类数组对象将类数组对象转换成真正的数组必须具备一下条件：该类数组对象必须具有 length 属性。如果没有，则会返回一个空数组。该类数组的对象的 key 必须为数值型或者字符串型的数字。数组元素均为 undefind例子：let array = { 0: 'tom', 1: '65',
2021-03-31 11:13:50
834
原创 高德地图基础使用教程(附demo)
高德地图基础使用教程简介带大家一步步实现地图显示特定位置，或定位到当前位置。并且拖拽地图界面能够查询出指定位置周边的信息。通过关键字搜索周边信息。本教程适合初学者。demo git 地址一、获取使用高德api的key打开高德开发平台，登录后，鼠标覆盖右上角头像，点击应用管理进入到我的应用界面。点击右上角创建新应用。为该应用添加一个 key。二、在项目中引入地图API在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；<script
2021-03-31 11:08:06
4865
4
原创 React Context基本用法
React Context基本用法Context简介与前言简单的理解简单的逻辑最简代码演示`./theme.ts``index.tsx`(页面)`BigComp.tsx` // 外层组件`SmallComp.tsx` // 内层组件API（参考[官网文档](https://react.docschina.org/docs/context.html#when-to-use-context)）createContextProviderConsumerContext简介与前言Context 提供了一种在组件
2021-03-05 10:53:49
603
1
原创 《金字塔原理》读书笔记
《金字塔原理》读书笔记《金字塔原理》 读书笔记第一篇：表达的逻辑第1章 为什么要用金字塔第2章 金字塔内部的结构第3章 如何构建金字塔第4章 序言的具体写法第5章 演绎推理与归纳推理第二篇：思考的逻辑第6章 应用逻辑顺序第7章 概括各组思想第三篇：解决问题的逻辑第8章 界定问题第9章 结构化分析问题第四篇：演示的逻辑第10章 在书面上呈现金字塔第11章 在 PPT 演示文稿中呈现金字塔第12章 在字里行间呈现金字塔《金字塔原理》 读书笔记第一篇：表达的逻辑第1章 为什么要用金字塔1、最容易理解的顺序
2020-10-15 08:55:09
1588
原创 强大的移动端表单开发方案 @alitajs/dform(附视频)
强大的移动端表单开发方案 @alitajs/dform强大的移动端表单开发方案 @alitajs/dform一、开发设想二、基础使用三、提效点1、`picker` 组件：2、一行代码配置样式3、不敲一行代码帮你配置 `data` 的JSON数据强大的移动端表单开发方案 @alitajs/dform一、开发设想从事移动端 H5 开发的小伙伴有没有经历过被长表单支配的恐惧？是一个个表单项纯手写实现的吗？那一个页面你可能要做一天，欲哭无泪，心力憔悴。为什么表单实现这么难？是使用 antd-mobile
2020-07-02 20:10:42
975
5
原创 H5 分包实现首屏加载时间优化
H5 分包实现首屏加载时间优化H5 分包实现首屏加载时间优化一、为什么首屏加载需要优化二、分析产物三、分包实现四、解析 splitChunksH5 分包实现首屏加载时间优化一、为什么首屏加载需要优化因为做了很多事情：初始化 webView -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片在 dom渲染 之前用户
2020-06-28 16:41:40
1308
原创 React ref 多场景使用教程(附demo)
React ref 多场景使用教程React ref 多场景使用教程一、父组件: class, 子组件: class1、子组件不使用 `dva` 情况2、子组件使用 `dva` 情况二、父组件: hook, 子组件: hook三、父组件: class, 子组件: hook四、父组件: hook, 子组件: classReact ref 多场景使用教程React16.8 后，我们就不断的拥抱 Hook 开发，在组件化开发已经成为我们必不可缺的开发方式时，ref 的使用就显得尤为重要。但是 class 开
2020-06-20 14:48:58
836
2
原创 React技术3-集成dva
React技术3-集成dvaReact技术3-集成dva一、引入 dva二、`src/index.js` 文件编写三、编写 model 模版四、在页面中引入 model五、改变 state 数据六、effects 异步请求七、获取其他model 的数据React技术3-集成dva本章节为第三部分，教程中的代码也是沿着前两篇文档的代码往下继续编写的，如有需要请小伙伴们移步到：React技术1-集成react-routerReact技术2-集成 less 和 css-module对于在 pc 项目中，
2020-05-23 22:52:17
703
原创 React技术2-集成 less 和 css-module
React技术2-集成 less 和 css-moduleReact技术2-集成 less 和 css-module前沿一、导入 webpack二、导入 less四、使用 `css-module`五、在 css module 下修改组件库的底层样式React技术2-集成 less 和 css-module前沿我们沿着上一篇文章(React技术1-集成react router)的内容进行集成 less 和 css mmodule。现在应该 90% 的前端开发都会使用 .less 文件来进行样式编写。可
2020-05-23 17:45:25
941
原创 React技术1-集成react router
React技术1-集成react router前沿create-react-app 快速启动一个项目(简单介绍)react-router1、新建页面2、导入路由3、路由编写4、实现在事件中的路由跳转前沿前端各种架构技术的飞速发展，百家齐放，大部分框架都自动帮助我们集成了一些技术，方便我们使用。很容易盲目的往期走，却忘记了这些基本的操作是如何集成的，本章节会教大家如何集成 react-router ，后续还会有更多技术集成，有兴趣的小伙伴关注一下～。create-react-app 快速启动一个项目(
2020-05-23 12:15:36
588
原创 图片添加水印、文件转图片、图片转文件、html2canvas截屏功能
图片添加水印、文件转图片、图片转文件、html2canvas截屏功能工作中遇到了关于图片的处理方法，做个记录分享给小伙伴们。一、图片添加水印(包括图片压缩)做法:将图片转为 canvas对图片进行内容填充将图片转化成 base64 的格式下面先提供代码，并对代码做进一步的讲解：picWaterMark = ({ // 1 url = '', textAlign = 'l...
2020-04-25 10:42:16
669
原创 详解执行上下文、执行栈、this 指向
详解执行上下文、执行栈、this 指向本文目录：├── 一、什么是执行上下文 ├── 二、执行上下文的类型(3种)│ ├── 1、全局执行上下文│ ├── 2、函数执行上下文│ ├── 3、Eval 全局执行上下文(不讨论)├── 三、执行上下文的生命周期(3个阶段)│ ├── 1、创建阶段│ │ ├── (1)、生成变量对象│ │ ├── (2)、建立...
2020-03-16 16:07:40
225
原创 使用 nodeJs 实现 js/ts 文件翻译功能
使用 nodeJs 实现 js/ts 文件翻译功能一、搭建环境二、读文件三、列出文中的所有中文内容四、替换中文五、实现翻译功能关于实现翻译(已中翻英为例)的功能，我们可以分成几个步骤：读文件找出文中的中文将文中的出现的中文词组或者句子组成一哥数组调用公共的翻译接口进行异步翻译将翻译出来的英文回填会文件中一、搭建环境打开终端，键入：node -v如果出现 -bash: node...
2020-01-09 15:03:40
3414
原创 Redux 源码共读 -- 1
Redux 源码共读-1Redux 源码共读-1一、Utils1、actionTypes.ts2、warning.ts3、isPlainObject.ts二、src1、index.ts2、createStore.ts4个判断其一：4个判断其二：4个判断其三：4个判断其四：5个赋值：6个方法其一：getState()6个方法其二：dispatch(action)6个方法其三：ensureCanMut...
2019-11-10 16:19:27
142
原创 Redux 源码共读 -- 2
Redux 源码共读-2Redux 源码共读-23、combineReducers.ts3个方法其一：getUndefinedStateErrorMessage()3个方法其二：assertReducerShape(reducers)3个方法其三：getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpect...
2019-11-10 16:09:36
171
原创 Redux 入门级教学文档
Redux 入门级教学文档Redux 入门级教程文档一、概念说明1、什么是 Redux, 为什么要使用 Redux2、为什么要使用 Redux二、环境搭建1、安装2、概念简单说明3、目录结构三、搭建数据源四、编写页面1、创建仓库2、展示页面3、修改仓库数据五、编写 action六、中间件-异步1、代码操作(第2点是知识点讲解，小伙伴们要看哈)2、知识点3、补充记得双击么么哒～Redux 入门级教...
2019-11-02 17:33:40
657
原创 VS code 插件开发3 --- 装饰数字(官网demo) 教程文档
VS code 插件开发3 --- 装饰数字-官网demo 教程文档一、效果展示二、安装三、创建功能文件框架四、专注装饰数字核心代码五、自动执行装饰数字插件六、注意事项！！！七、控制插件执行速度记得双鸡么么哒～一、效果展示小伙伴们，今天我们来学习一下如果装饰我们想要的内容。如果数字长度3展示一种样式，长度小于3的话展示另一种样式。二、安装关于安装，我在VS Code插件开发教程–树视图+...
2019-10-15 12:52:23
1155
1
原创 VS Code插件开发教程2 -- StatusBar 状态栏
VS Code插件开发教程2 -- StatusBar 状态栏一、安装二、在状态栏上展示文字三、状态栏上显示文本的总字数四、使该插件自动化，增加监听事件五、来个小tip(弹框显示选中的文字)六、再来个小tip(显示选中多少行文本)记得双鸡么么哒～一、安装关于安装，我在VS Code插件开发教程–树视图+网页视图这里的开头有详细的介绍。如果是刚入门的小伙伴们请先花费5分钟的时间来这里看下如何安装...
2019-10-13 17:08:56
4505
原创 VS Code插件开发教程--树视图+网页视图--完整demo+图--3
VS Code插件开发教程--树视图+网页视图完整demo+图--3简介六、不同 item 显示不同的页面(数据传递: VS code -> html)七、iframe 页面的数据传递指 VS code(iframe -> html -> vscode)简介你好！本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方，还...
2019-08-10 12:02:34
3541
2
原创 VS Code插件开发教程--树视图+网页视图--完整demo+图--2
VS Code插件开发教程--树视图+网页视图完整demo+图--2简介四、treeView: 在视图中显示想要的 item五、创建 webView 并嵌入百度页面简介你好！本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方，还请各位指正。谢谢。本文定位为初次接触vs code插件开发的小伙伴，开始有详细的教程如何一步一步的运用基础...
2019-08-10 11:55:38
8072
9
原创 VS Code插件开发教程--树视图+网页视图--完整demo+图--1
VS Code插件开发教程--树视图+网页视图完整demo+图--1简介一、安装二、初识 VS code 插件 demo三、treeView: 重识 package.json简介你好！本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方，还请各位指正。谢谢。本文定位为初次接触vs code插件开发的小伙伴，开始有详细的教程如何一步一步...
2019-08-10 11:45:13
8969
2
原创 基于 React 的登录页获取验证码流程
基于 React 的登录页获取验证码流程简介登录页全流程教学文档介绍画出静态页面流程一、验证码点击事件二、`model` 层异步操作1、`state` 初始化数据2、`effects` 调取接口3、`reducers` 同步数据三、page 页面操作四、model 层修改 `verificationBtn` 标识结语简介你好！本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。...
2019-05-24 16:43:44
6176
4
原创 Dva.js 入门级教学文档-2
Dva.js 入门级教学文档-2简介四、Model 包下文件架构(重点)1、namespace2、state3、reducers(1)、save(2)、state(3)、action(4)、payload(5)、return4、effects(1)、*(2)、query(3)、payload(4)、call(5)、put(6)、select(5)、subscription五、connect 连接 ...
2019-05-12 21:58:49
2615
原创 Dva.js 入门级教学文档-1
Dva.js 入门级教学文档-1简介一、介绍1、什么是 dva2、dva 的作用是什么二、环境搭建和使用1、环境搭建2、创建项目3、使用 antd三、全局架构1、index.js(重点)(1)、创建 dva 实例(2)、装载插件(3)、注册 Model(4)、配置路由(5)、启动应用2、router.js使用解释一下3、components 包4、routes 包5、services 包6、uti...
2019-05-12 21:51:01
3333
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人