weixin_44523653的博客

原创 photo-sphere-viewer 4.8.1在vue中使用

【代码】photo-sphere-viewer 4.8.1在vue中使用。

原创 vue中使用swiper坑记录

现象：当vue中使用v-show或者v-if控制swiper的显示或者隐藏的时候，swiper只在第一次加载的时候能够正确切换，一旦隐藏或者显示之后就不起作用了。左右切换按钮disable状态设置了css pointer-events:none 当点击切换按钮的时候，点击事件会透传到下一层，设置阻止冒泡也不起作用。2.上面属性如果不起作用，可以考虑从display入手，可设置visible属性（未经测试）原因：好像是因为display:block造成了swiper的bug.

原创 Typescript实现react-redux的useSelector和useDispatch的状态定义

背景：react中使用typescript,在引入redux之后很多状态定义有问题，记录下来（文章记录学习react-redux过程中的踩坑）。

原创 记录react项目中的动态路由设置

最近开始接触react,很多api不了解，不清楚，一步一踩坑，记录下路由设置。

原创 react 18学习记录

2.react-router-dom使用6.x，变化由这几个：Switch->Routes,1.公司项目使用了react 18版本作为技术栈，记录下18版本的学习过程。

原创 react css module 不生效问题记录

webpack配置了css-loader,less-loader,webpack默认css modules为开启状态，只要添加了css-loader,就可以使用xx.module.css。最后很无奈，已经鼓捣一天了，对比正常项目的package.json，发现css-loader使用了最新版本7.1.x，旧项目使用的是6.x,抱着试试看的心态降低了版本，出现了奇迹。背景：自己使用webpack+react+css+less配置的项目框架，在使用过程中发现css module引入不生效。

原创 ios 15 safari中使用websocket 挂起收不到数据

ios 15 safari中使用websocket 挂起收不到数据

原创 前端排查WebRtc黑屏记录

webview加载webrtc视频黑屏

转载 深入了解现代 Web 浏览器（第 4 部分）【合成器线程详解】

浏览器运行原理

转载 深入现代浏览器（第三部分）【chrome 渲染器进程的内部工作原理 】

浏览器运行原理

转载 深入现代浏览器(第二部分)【chrome 浏览器导航】

浏览器运行原理

转载 深入现代浏览器(第一部分)【chrome 浏览器架构】

浏览器运行原理

原创 到底是用yarn还是npm

用yarn 还是npm？

原创 Flutter打包桌面端exe程序过程记录（二 webview_windows）

前言接上一篇在上篇文章中记录了使用flutter的准备工作，这篇记录一下，使用flutter时遇到的坑。由于flutter是跨平台，在移动端使用了webview工具，于是乎在桌面端也想使用webview,但是手机上自带了webview组件，windows系统可不是自带的webview,经过一番查找终于找到了windows上使用webview的插件。在flutter的社区，有很多关于webview的插件，但是能用在windows平台上的少之又少：官方库只有这两个用着还凑合，但是在windows上运

原创 Flutter打包桌面端exe程序过程记录（一）

配置flutter环境flutter环境配置可以按照网上的教程一步一步来配就行了，下面给出一些参考链接flutter环境配置步骤当你在命令行输入 flutter docker 完全检测成功了，那就可以进行windows桌面端打包了桌面端程序打包Visual Studio是必须要安装的用flutter打包windows exe程序按照网上的文章，当flutter docker 检测成功之后，还需要再配置go环境，其实，只要你到这一步，不用配置go环境，直接就可以打exe包了flutter ru

原创 javaScript如何对数字进行千分位展示

第一种，使用toLocaleString()var str = 12345678.98765;console.log(str.toLocaleString());输出结果，注意小数部分会被四舍五入第二种，自定义方法使用循环// 默认使用逗号分割 function numSplit(num){ var result = [],decimal=""; newNum = num.toString(); //判断是否是小数

原创 前端在发送请求的时候为什么要序列化数据的思考

记下这边文章是因为在前端工作了五六年，从来没有考虑过为什么在发送请求的时候需要序列化，感觉自己缺少深入思考的意识。序列化和反序列化名词解释：序列化，将数据结构或对象转换成二进制串的过程。反序列化，将在序列化过程中所生成的二进制串转换成数据结构或者对象的过程。（摘自网上文章）下面以最清晰的代码来解释一下吧：var obj = {name:"lily",age:10};var stringObj = JSON.stringify(obj);// stringObj 就是序列化之后的结果//相应的反序

原创 前端学习ffmpeg RTMP HLS协议记录

ffmpeg安装配置需要准备linux环境，本人主要从事前端工作，一直没有接触过linux,从公司业务开始做音视频开发之后，发现少不了需要linux环境来搭建各种测试工具，于是就花高价租了阿里云。。。。ffmpeg的安装放在了windows环境下ffmpeg官网下载对应的release版本，下载地址https://www.gyan.dev/ffmpeg/builds/下载之后选择一个目录直接解压，并配置ffmpeg的环境变量打开命令行 输入ffmpeg -version，输出ffmpeg版本即为

原创 js实现webrtc 视频通话中如何更改视频流

在webrtc p2p过程中一端视频流关闭开启实现记录需求背景1.首先开启A端的摄像头，在B端展示出A端的视频流（A发起呼叫，B接收，这一过程结束，两端建立了p2p通信）2.接着在B端开启本地摄像头，在A端展示B端的视频流,B端可以在视频过程中关闭掉自身摄像头3.开始思路，由于不是很熟悉webrtc原理，以为B端的操作需要再建立一条P2P通信，折腾了很久，最后理清思路，在#1两端建立了p2p之后，两端的peerConnect已经创建，B端只需要再发起一个offer,由B端发起呼叫，A端接收，还是一条

原创 记录Android加载webview时网络请求时好时坏的问题

记录此次调试背景非常简单的一个demo的apk,打开App，点击按钮打开一个webview的页面，页面的链接是在android代码中写固定的。所有的逻辑都在H5页面中，H5页面经过调试嵌入了App中。以上是App的背景（本人是前端开发，负责的是H5页面，H5页面做好就交到Android开发的手中了）。先说结果，webview的缓存导致H5页面的请求时好时坏。在一次测试中，突然发现H5页面不能正常的加载数据了，然后过了几分钟就正常了。初次偶现这种现象，只是觉得奇怪，没有深入查看究竟。紧接着又过了段时间开

原创 websocket断开状态分析

最近要做一个websocket 断开重连的优化，本以为很简单的一个改动，可是粗略写了一下代码发现事情并不简单。先介绍一下使用websocket的断开背景，由于不是很好确定websocket会在何时何地何种情况下断开，所以监听了close事件，以下是在close中执行的重连逻辑。 // 定义一个变量控制是否正在重连 if(this.reBEConnect) return; this.reBEConnect = true; // 设置延迟避免一直重连 setTim..

原创 css伪类处理技巧记录

处理ul li的左边框或者右边框问题我们经常会遇到一系列的list组合，要求加上，上下左右的分割线，但是这些分割线最后一个标签都不需要加分割线我之前最常用的做法就是先给每个li加上下边框，然后给最后一个去掉下边框<style> .li{ width: 200px; border-bottom: 1px solid #000; } .li:last-child{ border-bottom: non

原创 react 请求配置

最近开始慢慢学习react,关于请求配置有以下几点记录，如有错误，恳请指正package.json中配置porxyporxy:"http://localhost:3001"这种方式只能配置一个代理setupProxy.js看网上有很多例子说要配置这个文件，但是这个文件是需要webpack提前预设好配置的，这里记录一下，也是配置setupProxy.js，再手动去注册一下//http-proxy-middleware 是node的代理模块，需要 npm install http-proxy-mi

原创 leaflet禁止缩放

禁止鼠标滚轮缩放map.scrollWheelZoom.disable();禁止拖拽map.dragging.disable();禁止双击缩放map.doubleClickZoom.disable()与之相对应的解除禁止使用map.scrollWheelZoom.enable()map.dragging.enable();map.doubleClickZoom.enable()...

原创 Elementui的Tree控件拖拽会改变默认选中的问题解决

可拖拽的tree<el-treeref="tree" :data="data" show-checkbox node-key="id" default-expand-all @check="check" @check-change="checkChange" @node-drop="handleDrop" draggable :allow-drop="allowDrop"></el-tree>data() { return {

原创 leaflet使用draw插件测量距离和面积

官网在线例子draw插件在线预览我的测量预览图：按照文档给出的例子，先引入这个插件，采用import形式import "leaflet-draw";import "leaflet-draw/dist/leaflet.draw.css";初始化使用插件//添加画图的提示信息 L.drawLocal.draw.handlers.polyline = { tooltip: { start: "点击地图开始画线", cont: "继续选择",

原创 vue中使用element tree 拖拽调整leaflet图层顺序（二）

tree渲染 <el-tree :data="layerList" show-checkbox node-key="id" :props="treeProps" default-expand-all :expand-on-click-node="false" :allow-drop="allowDrop" @check-change="checkChange" @node-drop="nod

原创 leaflet添加鹰眼图，并切换鹰眼图（三）

添加鹰眼图鹰眼图是当成一个插件来使用的 github地址import MiniMap from "leaflet-minimap";//引入样式import "leaflet-minimap/dist/Control.MiniMap.min.css";let map = L.map('map')addMiniMap(options) {//鹰眼图的地址 var minilayer = new L.tileLayer.wms(options.mapUrl, { layers:

原创 leaflet 图层管理（增加 、删除 、显隐控制）加载4326坐标系的图层（一）

加载4326坐标系leaflet默认使用3857的坐标系，如果之前使用的是openlayers,会发现leaflet坐标写法和openlayers坐标相反，因为openlayers默认使用4326坐标系。1、加载4326坐标系的地图 const map = L.map("map", { center: [35.8374, 104.28225],//维度在前，精度在后 zoom: 4, minZoom: 1, maxZoom: 19, zoo

原创 从对象数组中一次删除多个元素

删除数组中元素的方法有delete,splice;这里先记录splicefunction bantchDelete (taskList,deleteTaskIds){ for (let i=0; i<taskList.length;){ let task = taskList[i]; //根据id删除 if (deleteTaskIds.indexOf(task.id)!==-1) { taskList.splice(i

原创 React学习记录第一节之高阶函数HOC

最近开始学习react了，之前也接触了react,但是没有系统的去学习，也没有思考react里面每个api的设计，也没有比较react和vue的异同，今天学习了react的高阶函数，下面就我自己的理解做一下记录。我对高阶函数的理解刚开始看这个概念的时候，翻翻文档，好长好长，丝毫不想往下阅读，但是无奈还要学，于是硬着头皮往下读把，把文档上的例子跑一遍，开始慢慢发现有点意思了。先定义好我们要使用的组件，这里我定义了一个CommenList组件，这个组件的作用就是接受一个值，并把这个值遍历做一下渲染，在这个

原创 记录一下js和jquery获取属性值的问题

//原生jsdocument.getElementsByClassName('login-right')[0];dom.getAttribute('data-self');// =>获取属性 'data-self',如果存在则返回属性值 字符串的形式；如果不存在则返回 null//使用jquery$('.login-right').attr('data-self');// =>获取属性 'data-self',如果存在则返回属性值 字符串的形式；如果不存在则返回 undefined

原创 ztree配置async异步加载子节点，展开不触发请求的问题解决记录

普通渲染方式如果是数据量不大，普通加载，按照ztree的数据格式，直接渲染就行//这是我自己使用的数据格式var zNodes = [ { childs: [ { directory: false, name: "cxptest", childs: [] } ], directory: true, name: "test", Path: "E:\test", id:01

原创 vue初始化过程的思维导图（记录学习源码的过程）

原创 vue中使用openlayer6同时加载高德和百度（openlayers篇）

vue中使用openlayer6同时加载高德和百度//html<template> <div> <div id="map" ref="mymap"></div> </div></template>openlayer使用到的依赖import { Map, View } from "ol";import { Tile as TileLayer, Vector as VectorLayer } from "ol/

原创 关于使用openlayers6和leaflet同时加载高德和百度的问题记录（leaflet篇）

先说leaflet,leaflet 默认使用的坐标系是 EPSG:3857，百度地图：使用百度坐标系高德地图：火星坐标系（GcJ02）leaflet是默认支持GcJ02的，而且leaflet提供了这个插件L.tileLayer.chinaProvider ，可以引入高德、谷歌、天地图，不用经过转化。但是百度坐标就需要进行额外的转化:代码如下（本人只是个代码搬运工~~）/** * 百度地图底图调用插件 * @author 火星科技 木遥原创(qq:346819890) *///请引入 proj

原创 记载一次cesium加载近景天空盒的例子

参考文章链接先放一套天空盒的图片，从网上找了很久没有找到合适的，先放图片上图是已经旋转过的正确的方位图,具体天空盒的图片，具体方位对应可以 参考博客cesium天空盒方位对应//需要修改cesium skyBox的类，可以查看上面的参考文章里的完整js//下面贴出js中的使用代码var defaultSkyBox = viewer.scene.skyBox//GroundSkyBox 是重写的skyBox类，可以直接在html中引入使用，//注意如果是用的vue需要在 重写的sky

原创 mapbox图层的点击事件注册一次之后无法取消的问题

添加事件mapbox地图点击事件写法//和jQ一样使用on注册事件，第一个参数是事件类型，第二个参数是图层的id,如果不传这个参数，默认给地图添加事件map.on('click', 'layerId', function (e) {}）注意事项：on注册事件，只能注册一次，如果是动态添加的事件需要注意一下，是否注册了多次，否则会造成多个事件同时执行，类似jQuery的on事件监听。取...

原创 记录web端地图使用的坐标系，以及wgs84转百度坐标的方法

记录web端地图使用的坐标系百度地图：使用百度坐标系高德地图：火星坐标系（GcJ02）（国测局规定使用的坐标系）COOGLE地图，mapbox地图，国外的地图，使用的 EPSG:4326也就是（WGS84）gps坐标以上如有错误，请帮忙指正...

原创 使用 vue-router的keep-alive的一次踩坑记录

使用 vue-router的keep-alive的一次踩坑记录背景：vue项目，需要缓存某些页面中的一个页面，于是就想到了keep-alive,于是屁颠屁颠的拿来用了，简单的从一个页面跳转到另一个页面再返回，ok页面被缓存了，天真的我就把代码一通提交，第二天测试才发现原来keep-alive有坑。。。先放一段我的心路历程1、有三个页面A、B、C；B页面需要被缓存，其他页面不缓存，我在B页面的...