- 博客(36)
- 收藏
- 关注
RSS订阅原创 实现前端项目中eslint校验的基本步骤
上面的配置是我搭建项目时配置的一些内容，其中extends 是在搭建的框架是umi，因此继承一些umi相关eslint 的检验。在项目的根目录下创建一个名为 lint 的脚本在 package.json 中，以便使用 npm 或 yarn 运行 ESLint。三、在 .eslintrc.js 文件中进行配置。在根文件中创建 .eslintrc.js 文件。#实现前端项目中eslint校验的基本步骤。二.创建 .eslintrc.js 文件。五、验证是否配置的eslint生效。或使用 yarn 等。
2024-04-08 13:50:43
285
原创 react-native搭建android studio环境注意的问题
在打开下载的Android Studio后 ，找到更多设置（不同Android studio叫法不一样）中SDK Manager，其中有Android SDK，点击勾选右下方的Show Package detail，选择适配自己项目的SDK版本下载，在实际开发中，有些比较老的项目，对于node的依赖是比较老的，就会存在，不同的版本对node依赖不同，尽管新的nodejs版本会兼容老版本的nodejs，但仍然会存在一些不同问题，那么本地管理不同的node版本，是很有必要的，我用到的是nvm。
2024-04-08 13:49:41
982
原创 react-hooks进阶（相关源码学习）
schedule：调度器—》scheduler 内有优先级队列。高优任务优先进入下一步处理（reconciler）（schedule是在react16之后新增的）render：协调器 ==》reconciler 存在虚拟dom fiber就是虚拟Dom，负责找出变化的组件，当前和上一步工作都在内存中进行。只有当所有组件都完成Reconciler的工作，才会统一交给Renderer。commit：渲染器 ==》renderer 负责将变化的组件渲染到页面上。
2023-06-14 20:21:43
215
原创 react-tiny-virtual-list 原理理解及简单实现
在渲染大批数据列表时可以使用改插件，实现原理是将在可视区域内渲染元素，在非可视区域内不渲染，但实际的占位高度存在。
2023-06-14 17:34:41
260
原创 PC端react实现一键复制图片功能
PC端react实现一键复制图片功能用到的工具库b64-to-blob、html2canvas具体方式过html2canvas，就可以获取完整的dom节点，再通过b64-to-blob，将base64格式转换成blob,将blob赋值到浏览器剪切板就大功告成了复制功能代码const copy = () => { html2canvas(imgRef.current, { useCORS: true }).then((canvas) => { c
2022-05-25 14:50:30
793
1
原创 React报错：Can‘t perform a React state update on an unmounted component. This is a no-op, but it ind...
React报错：Can’t perform a React state update on an unmounted component. This is a no-op, but it ind…原因是：我们不能在组件销毁后设置state，防止出现内存泄漏的情况 ，组件都被销毁了，还设了setstate处理解决的方案：//利用生命周期钩子函数：componentWillUnmountcomponentWillUnmount() { this.setState = (state, callba
2022-01-20 16:54:33
3867
原创 微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一、背景众所周知，我们写完小程序，发到线上，是需要经历设置版本、提交代码审核、等待审核等步骤，放一个版本下来可能花费很多的时间，甚至很可能等待了很长时间，审核未通过，又要重新提交审核。这个流程走下来，到线上，可能会有诸多的不确定因素而导致延迟上线时间，并且对某个模块业务上需要频繁改动，那就需要经常发版了，以此如何可以减少发版的频率呢？那么就油然而生了微信小程序中插入h5页面，这个h5就专门写频繁改动的模块，引入这个模块的变动，并没有导致微信小程序内部的变动，所以就不需要发版
2022-01-13 16:04:01
11445
原创 h5跳转小程序
h5跳转小程序<wx-open-launch-weapp id="launch-btn" username={username} path={path} onClick={this.handleFiboClick} style={{ width: '100%', height: '100%', backgroundColor: '#fd0000', opacity: 0 }} >
2022-01-12 20:41:10
6829
1
原创 前端wx-jssdk的使用及企微和微信下分享等功能自定义处理
前端wx-jssdk的使用及企微和微信下分享等功能自定处理一、前端wx-jssdk的使用wx-jssdk使用需要微信公众平台内进行设置（绑定域名等操作）及后端配合才能真正使用，下文是讲述前端如何使用。wx-jssdk的接口文档1、导包在main.ts中（以vite+react项目中为例），为什么在main.ts中进行使用呢？其实在index.html文件中调用也是可以的，因为我要用到上面公共方法，并且保证要完成加载在线wx-jssdk包完后，再进行挂载等步，实现异步变同步处理更方便，就放在main
2022-01-12 18:15:27
6436
原创 react-hooks的页面设置定时器
hooks页面设置定时器在hooks中设置定时器时，设置变量储存定时器时最后用：const [timer, setTimer] = useState(null); 这样方式存储，否则会导致在使用完定时器，清除定时器，无法清除干净，定时器仍然还在，（特别是页面定时器）import React, { useState, useEffect,} from "react";const ChallengeModal = (props) => { const [timesContent,
2022-01-11 10:09:21
2051
原创 React-hooks中useRef的用处(重：父子之间传值)
React-hooks中useRef的用处(重：父子之间传值)在hooks中useRef的用处是有很多的，不仅仅只是操作dom元素而已，还有其他，例如组件之间的通信、设置定时器，存储数据等。1、操作DOM元素在hooks中useRef与普通React 中提供的creatRef方法是类似的，通过selfRef.current，操作dom元素内的属性及属性值。const getRefVal = ()=>{ console.log("divRef",divRef) }2、父子之间的通信
2022-01-10 14:49:07
1934
原创 在vite+react项目中如何使babelrc和babel.config.js文件生效
在vite+react项目中如何使 .babelrc和babel.config.js文件生效在vite+react框架搭建的项目中，用使用到babel相关的配置，那如何使得 .babelrc 和 babel.config.js 文件在配置功能生效呢？这需要使用到vite 提供的组件 @vitejs/plugin-react ,在其vite.config.ts （或vite.config.js）中进行导入配置，具体步骤如下：1.安装插件yarn add @vitejs/plugin-react2.
2022-01-06 15:16:13
6288
原创 微信小程序observers数据监听器的使用
微信小程序observers数据监听器的使用数据监听器可以用于监听和响应任何属性和数据字段的变化。1、observers使用的前提条件在微信小程序中数据监听器的使用是有几个前提条件的，否则是无法使用的小程序的基本版本库要达到要求，从小程序基础库版本 2.6.1 开始支持。只能使用在自定义组件中，在页面中是无法使用的2、如何使用observers 在自定组件的使用有两个不同位置进行监听数据的变化，而不同的位置，所监听的数据也是不一样的。在自定义组件的properties中的数据属性Com
2022-01-05 15:22:56
11742
原创 微信小程序图片固定宽度，高度自适应处理方法及相关API介绍
微信小程序图片固定宽度，高度自适应处理方法及相关API介绍1、背景在我们写js代码时，控制图片固定宽度固定，使得高度自适应缩小，是非常简单的，但在微信小程序中不了解微信小程中组件image相关的属性是有些麻烦的，因为微信小程序中image本身会自带宽度和高度的（尽管可以被覆盖）而正是这些已存在的值，让我们在不熟悉image属性的情况下，处理很是麻烦。2、处理方法在image属性值中有个mode，它有诸多值，其中缩放模式，和裁剪模式，首先我们固定图片的宽度，然后我们要用到缩放模式值：widthFi
2022-01-05 11:55:40
3818
原创 vite项目中使用第三方js文件本地化使用
vite项目中使用第三方js文件包，文件本地化引用在vite项目中使用第三方包，将其本地化，在index.html文件中使用script引用本地js文件，那么这个js文件包如何放置和如何引用呢？在js代码中用js文件包，使用绝对路径，又是如何操作的呢？方法一：将文件包放置在public中即可，无任何操作1、第三方js文件包放置的文件在vite项目中，我们可以将第三方文件包放置在根目录下的public文件(项目中没有，自己创建）下。2.在html中引用方式： /lib/文件包.js这种方式是最简
2021-12-29 16:24:39
18239
原创 vite项目中导入图片后报找不到模块处理方法
vite项目+typescript的项目中 导入图片后报找不到模块处理方法问题 在使用ts书写代码时，导入本地文件夹中图片，会出现报错：****找不到模块，但是又能正常使用该图片。这样的报错启动项目是没有问题，但是最好打包会报错。所以不得不处理处理方法：我们需要主动的去声明这个module。新建一个ts声明文件如：images.d.ts（如下）就可以了。这样ts就可以识别svg、png、jpg等等图片类型文件。项目编译过程中会自动去读取.d.ts这种类型的文件，所以不需要我们手动地加载他们。当
2021-12-27 15:17:36
4476
1
原创 获取随机值的封装
获取随机数值的封装/* ** randomWord 产生任意长度随机字母数字组合 ** randomFlag-是否任意长度 min-任意长度最小位[固定位数] max-任意长度最大位 , true 使用min - max false 使用 min */export function randomWord(randomFlag: boolean, min: number, max: number) { let str = ''; let range = min; let arr = '
2021-12-22 15:38:58
95
原创 react生命周期详解（新）
react生命周期详解（新）在react16之后，有三个生命钩子被废弃：componentWillMount、ComponentWillReceiveProps、componentWillUpdate。因为这些生命钩子容易被误解和滥用。react16.8+ 生命周期分为三个阶段：挂载阶段、更新阶段、卸载阶段挂载阶段：constructor: 构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定thisgetDerivedStateFromProps: static
2021-12-13 16:56:21
109
原创 获取视频video第一个帧的图片作为视频的背景图片
获取视频video第一个帧的图片作为视频的背景图片一般情况下，Android版本可自动获取视频的第一帧作为视频的背景图片，但ios是无法获得的，只能手动为其添加视频的背景图片。制作这第一帧图片我使用的原理：拿到视频播放路径后，创建一个video标签，将路径传给src，使其自动播放时，截取展示的第一个图片，使用canvas将其画出来，1、设置video背景图片的属性在video中属性很多，为视频设置背景图片的属性为：poster，该属性的值就为图片的路径2、上传本地视频，获取视频的宽高及播放长度等
2021-09-06 11:57:14
5647
1
原创 react中可使用的video插件
react中可使用的video插件在react中使用video，并且兼容不同浏览器（特别是ie），那就不得不借助插件来实现自己的目的，下面有几个插件使用：一、使用 video-react （在react中推荐使用）1、直接下video-react插件$ npm i video-react2、在所需的插件出导入import { Player } from "video-react";...return ( <Player ref={player} videoId="video-
2021-08-23 18:58:51
8897
原创 上传文件，提交数据---FormData对象格式
上传文件，提交数据—FormData对象格式在进行上传文件（例如Excel）时，处理的几步，否则无法上传一、修改请求头在修改请求头，是至关重要的，因为请求数据格式是不同的：header: 'multipart/form-data',注：在写请求头的时候遇到了一个坑，后端在给请求头的，可能会给成： application/x-www-form-urlencoded 中格式，其实是错，它无法实现对数据的formData处理。二、创建FormData我们在提交参数，调接口的时候，要创建一个for
2021-08-18 20:09:10
5933
1
原创 Eslint校验报错处理方法
Eslint校验报错处理方法在遇到Eslint校验规则时，报下列错或警告：1.遇到 no-unused-vars、no-unused-expressions、no-undef、no-restricted-globals等错时，可以在配置Eslint中 rules进行关闭该功能的校验2.如果遇到某个文件（如引入的插件 min.js）时，报错及警告太多，可以在根文件创建=> .eslintnore (别忘记前面一个点），在其中进行配置，如下图：/src/view => src文件下vi
2021-08-17 12:20:52
1093
原创 常见异步操作进行同步处理
常见异步操作进行同步处理async…await… 与 promise在使用async和await进行将异步改成同步处理时， 所使用的函数返回的值必须是返回的promise对象的数据，否则不会达到异步改成同步操作的处理实操代码：const Func = ()=>{ return new Promise<any>(async (resolve, reject) => { // 最外层 try { let data = 'promise'
2021-08-12 16:33:10
1223
原创 深拷贝与浅拷贝
深拷贝与浅拷贝什么是深拷贝，什么是浅拷贝深拷贝：复制变量值，对于引用数据，则递归至基本类型后，再复制。浅拷贝：会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。通俗的说，深拷贝就是将其他人的数据，经过操作后使得完全属于自己的，不受他人的影响。浅拷贝就是将他人的数据拿过来共用，还是受到他人变更的影响，只是给数据另外起了一个名字而已。深拷贝方式方法一：递归方法deepCopy(obj) { let objArra
2021-07-13 20:49:45
271
原创 检测微信小程序版本并及时更新
检测微信小程序并更新在每次小程序发版后，为了让客户获得最新小程序的版本，省去客户的手动更新，增强用户的体验感，可在app.js进行设置检测而获取最新的微信小程序并进行同步更新利用到小程序的API：wx.getUpdateManager()：获取版本信息可将下方代码放置在app.js中即可使用onLaunch() { // 检查版本更新 this.initUpdateManager(); },// 检查版本更新 async initUpdateManager()
2021-07-01 18:48:10
391
原创 正则表达及JavaScript中使用
最全正则表达式 JavaScript 中使用用法var pattern = /^[a-zA-Z\u4e00-\u9fa5-,.?!，。？！\x22]+$/g ;//正则表达式,校验中英文及符号：？！。， str = '';//要检验的字符串console.log(pattern.test(str));//使用下面的正则 /^[0-9]*$/g一、校验数字的表达式数字：^ [0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和
2021-06-16 10:58:19
86
原创 react中字符标签转换的展示
react中字符标签转换的展示在react中获取的字符串标签转换成正常的标签在浏览器中展示标签内的数据，react提供了一个API：dangerouslySetInnerHTML，它可以帮助转换成正常标签及内的数据；<div className="policy-styles" dangerouslySetInnerHTML={{ __html: htmlContent}}></div>htmlContent表示展示要做div内的字符标签，如let htmlContent =
2021-05-28 10:05:22
708
原创 React-Canvas画图
react+Canvas基本用法html代码{/* 拼图 */} <canvas width='300' // 可设置画布的大小 height='800' ref={(ref) => { this.canvasRef = ref; }} ></canvas>js代码想要在canvas区域里画图， 第一步需要取得绘图上下文，而取得上下文对象的引用，需要调用getCont
2021-05-14 15:19:58
2698
原创 JS-SDK与二次分享问题
先说说背景知识1.JS-SDK的用途调用拍照，选图，支付，分享，定位功能。微信开放这些能力给开发者，要对开发者进行鉴权。鉴权的时候需要签名，签名需要票据，随机字符串，时间戳，网址，票据需要调用微信的一个接口生成，比较麻烦的参数票据，票据的生成，需要调用另外一个接口，需要appId和serect。每天只能调用2000次，每次调用的有效期是2小时。JS-SDK具体使用的步骤：JS-SDK具体使用步骤2.签名的获取方法2.0 准备工作1.登录微信公众平台，在开发设置中查看AppID和AppSecret
2021-05-11 14:58:05
1138
原创 react-router-cache-route — 页面缓存插件
react-router-cache-route — 页面缓存插件功能此插件可以满足缓存上一页的功能，即：返回上一页的时候，上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。简介搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能。原理Route 中配置的组件在路径不匹配时会被卸载（render 方法中 return null），对应的真实节点也将从 dom 树中删除，利用Route暴露的children方法，让我们手动控制渲
2021-03-10 14:57:02
1188
原创 react中使用bootstraps
react中使用bootstraps 在react中使用bootstrap，可使用npm导入，在安装bootstraps前，需要安装jQuery，这两个配合使用；一、安装jQuery及配置npm install [email protected] （ —‘@’后面是版本号）webpack.base.conf.js中添加一行数据：/注：...代表省略自有的，//必定事先声明webpack，不然下面会不识别webpackconst webpack = require('webp
2021-02-22 16:22:58
962
原创 微信小程序 WXS模块
微信小程序 WXS模块WXS 模块WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。模块每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。.wxs 文件在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。示例代码：// /pages/
2021-02-05 11:49:53
441
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人