qq_44993242的博客

原创 useEffect默认执行两次解决方法

useEffect默认执行两次解决方案

原创 react中使用react-i18next+ts的坑

先上报错，这是我在组件页面定义变量的时候碰到的，如下TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'. Type 'object' is not assignable to type 'ReactNode'.react-i18next是react中国际化最常用的插件，最近本人在做一个ts+国际化的项目，首先我按照官网的示例代码进行配置，新建i18n并创建config.ts，配置如下import i18n f

原创 控制微信公众号物理键返回url

总有一些奇葩的需求，在公众号中，如果你写的模块是一个公众号的子模块，那么当你在模块的第一级时，再点返回，应该是返回到公众号的主页，也就是模块区域，而不是返回你上一个地址，直接上代码1-先监听到物理返回键,在mounted钩子定义，再去destroyed重定向mounted() { // 重定向移动端物理键 if (window.history && window.history.pushState) { history.pushState(null, nu

原创 设计模式之策略模式优化switch/if

1-什么是策略模式？策略模式的定义是:定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。策略模式指的是定义一系列的算法，把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体 的算法，并负责具体的计算过程。 第二个部分是环境类Context，Context 接受客户的请求，随后 把请求委托给某一个策略类。要做到这点，说明

转载 1-ts的数据类型

数组有些不同，两种方式定义，必须指定数组内类型let arr:Array<number> = [1,2,3,4,5];//第一种数组类型写法console.log(arr);let arrStr:string[] = ['dqw','wdwq','rgre'];console.log(arrStr);元组 Tuple元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为string和number类型的元组。// De...

原创 对于promise的最直接理解

再次重申，promise不是异步的，是一个构造函数，需要new，它只是解决异步流程的一种技术，用来解决异步流程化的手段promise其实只有一个参数，那就是excutor，执行器然后，excutor有两个参数，那就是我们知道的resolve，跟rejectexcutor就是在new promise的时候执行调用，excutor是同步的，如下，promise里的1先打印，然后2再打印，但是then函数是异步执行，下面就会先执行global，然后在执行Then如下，第一个th..

原创 ES6 新增的关键字 yield

yield是ES6的新关键字使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。yield关键字实际返回一个IteratorResult对象，它有两个属性，value和done。value属性是对yield表达式求值的结果，而done是false，表示生成器函数尚未完全完成。一旦遇到yield表达式，生成器的代码将被暂停运行，直到生 成器的next()方法被调用。每次调用生成器的next()方法时，生...

原创 computed源码浅谈

1-什么时候初始化？function Vue(){ ... 其他处理 initState(this) ...解析模板，生成DOM 插入页面}function initState(vm) { var opts = vm.$options; if (opts.computed) { initComputed(vm, opts.computed); } .....}你调用 Vue.

原创 ckeditor副文本编辑器基础使用

1-安装依赖，个人习惯用一个版本npm install @ckeditor/ckeditor5-build-decoupled-document@12.4.0 --save然后下面的直接复制去用就可以<template> <div> <!-- 工具栏容器 --> <div :id="`${editorId}-toolbar-container`"></div> <!-- 编辑器容器 -->

原创 v-charts基本使用

安装npm i v-charts echarts --savemain.js里引入import Vue from 'vue'import App from './App.vue'import router from './router'import VCharts from 'v-charts'Vue.config.productionTip = falseVue.use(VCharts)new Vue({ router, render: h => h(App)

原创 何为重绘跟重排

重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。　　触发重绘的条件：改变元素外观属性。如：color，background-color等。****注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用

原创 事件循环队列简略介绍

1 Js 代码执行机制所有同步任务都在主线程上的栈中执行。 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 一旦"栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，选择出需要首先执行的任务（由浏览器决定，并不按序）。2 宏任务与微任务MacroTask（宏观Task） setTimeout, setInterval, , requestAnimationFrame, I/O MicroTask（微观任务） pro

原创 uni-app中引用vant的正确姿势，个人只用过H5

网上看了很多文章，有的把vant源码复制进去，但是还是不行，有的直接再hbuildx市场下载vant，也还是不行，个人目前只用这种方法成功过，因为uni-app写h5自适应，如果只是用vue写移动端，可能需要调整自适应，所以用了uni-app一、建立uni-app新项目二、在终端打开项目目录　可以直接在HBuilderX中直接右击项目名称选择‘使用命令行窗口打开目录’，之后会提示插件【内置终端】未安装，选择确定来安装内置终端插件,之后便可以通过内置终端打开对应项目目录，当然也可以直接在w

原创 原生JS对数据的增删改查API总结

常用的原生JS对数据的增删改查API总结，以数组为例子，1--增API1 arr.push();向数组的尾部添加2 arr.unshift();向数组的头部添加3 arr.splice();大部分时间用于删除，因为此api的第三个参数才是添加元素，循环添加的就不算在里面了2-删API1 arr.splice(要删除的下标，删除的个数);2 arr.shift();删除数组的第一个元素3--改API1 let arr [1,2,3];arr[1.

原创 vue生命周期函数(不包括已废弃的三个)

vue生命周期函数(不包括已废弃的三个)直接上图，这还看不懂，就打扰了，下面是官方图，然后自己添加的注释，如有不对，请指出

原创 vue项目中，vant框架的按需引入

vue项目中，vant框架的按需引入1-创建项目，可以分为两种1》命令行创建，vue create project2》ui页面创建，vue ui2-下载vant依赖，cnpm install vant --save推荐大家以后下载依赖，都要把--save写全，有的插件/依赖，你不写全，等你上传git的时候，不会保存，导致别人拉你的代码时，如果你只是-s,会出现某某依赖没有，只能去pagejson里面自己去排查，3-再下载一款 babel 插件，它会在编译过程中将..

转载 详解vue中使用echarts地图实现上钻下钻的可视化 三级下钻 省＞市＞县

简述功能概要最近有需求做一个数据可视化的功能 会具体显示全国各地区的买家分布情况鼠标放置在地图上会显示当前城市的分布人数 点击当前省份会下钻到城市地图 会显示当前省市下各个城市的买家数和分布情况如果遇到没有下一级再次点击会进行返回到国家地图(目前该示例图是两级下钻 省>区市 )(还可以实现点击按钮返回到上一级)右侧数据表会跟随城市的切换而进行动态切换(无视数据的准确性)准备工作首先需要所有城市地图的json文件和一个城市行政区域划代码的js文件(本文件请求使用)(如有需...

原创 vue中设置页面切换时的过渡动画

<template> <div id="app"> <!-- 页面切换动画transitionName --> <transition :name="transitionName"> <!-- 缓存数据 <router-view> --> <keep-alive> <router-view v-if="$route.meta.keepAlive">&l.

原创 时间戳来回转换

1-标准时间转时间戳再转为当前时间<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl

原创 一个页面是如何渲染的，浅谈

浏览器页面渲染流程浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：a、解析文档构建DOM树浏览器的解析内容可以分为三个部分：HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree） CSS：解析样式表，生成CSS规则树（CSS Rule Tree）JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。以上三类文件的执行顺序会根据其在文档中的位置及其

原创 WOW使用以及一些坑

1-下载依赖cnpm install wowjs --save在这里，我建议大家以后下载依赖，都把save写全，因为不写全，在pageage里，是不会记录进去，导致别人下载你的项目，或者git上都是没有这个依赖包的，别人npm时就会报错，就需要单独下载22-单独组件引入动画import {WOW} from 'wowjs';mounted() { // 在项目加载完成之后初始化wow this.$nextTick(() => { let wow = new W

原创 关于HTTP协议

HTTP简介HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六

原创 常见的浏览器兼容问题

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同解决方案： css 里增加通配符 * { margin: 0; padding: 0; }2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题解决方案：设置display:inline;3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的..

原创 JS里检测数据类型4种方法

第一种1.typeof1 console.log(typeof "");2 console.log(typeof 1);3 console.log(typeof true);4 console.log(typeof null);5 console.log(typeof undefined);6 console.log(typeof []);7 console.log(typeof function(){});8 console.log(typeof {});看看控制台

原创 package.json里插件的^跟~的区别

指定版本号 (1)普通版本号: 表示安装此版本,比如"classnames": "2.2.5"，表示安装2.2.5的版本 (2)表示安装大版本的最小最新子版本: ~版本,比如 "babel-plugin-import": "~1.1.0", 表示安装1.1.x的最新版本（不低于1.1.0），但是不安装1.2.x，也就是说安装时不改变大 版本号和次要版本号 (3)表示安装大版本的最高中版本: ^版本,比如 "antd": "^3.1.4",，表示安装3.1.4及 以上的版本，但是不安装4.0.0，也就是说..

原创 vue中对方法加不加括号的区别与影响

html<div id="example-2"> <button @click="test">测试</button></div>jsnew Vue({ el: '#example-2', data(){ return { } }, methods: { test(id){ console.log(id); } }})不添加括号 <button @click=“tes

原创 对postman的body参数详解

原创 微信小程序，修改input placeholder的样式

1.给input一个作用于placeholder的类名<input placeholder="请输入内容" placeholder-class="input-placeholder"/>2.再去定义样式.input-placeholder { color:rgba(226,226,226,1); font-size:28rpx; }

原创 微信小程序 switch组件修改样式(大小，颜色)

1. 如何修改switch样式大小/* swtich整体大小 */.wx-switch-input{ width: 100rpx !important; height: 57rpx !important;}/* false的样式 */.wx-switch-input::before{ width: 100rpx !important; height: 53rpx !important;}/* true的样式 */.wx-switch-input::after{ wid