weixin_43522687的博客

原创 微信H5页面点击直接跳转app-微信开放标签

开发微信H5项目时，需要从h5直接跳转至app，绞尽脑汁调研一番后，发现微信开放标签能实现，but环境配置和测试流程真的很复杂，真的配置四小时，开发仅需30分钟，经过不断踩坑终于上线，踩过的坑都给你们总结出来啦，如果能帮助到你，帮忙点赞收藏关注一下吧。微信开放标签https//developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html。把线上地址代理到测试地址。尽量多输出错误log信息判断是哪里出错。.........

原创 vue 封装动态生成form表单和table表格组件

背景项目中经常遇到新加功能和之前功能类似，结构不变，只是名称和值变化，因此将常用的form表单检索和table表格展示进行封装，有助于提高开发效率和统一样式风格。注：示例中使用iview框架，实际代码结构类似，供参考。动态生成 form 表单组件使用说明：引入文件并注册页面使用并传参，支持输入框、日期选择、下拉选择和查询按钮搜索项，搜索项后面可以通过插槽添加自定义内容组件暴露出的数据为 form 表单项最新数据API：form props属性说明类型默认值

原创 Node进程管理工具—pm2

转载自：https://blog.csdn.net/qq_38128179/article/details/120401139一、官网PM2二、简介PM2是一个内建了负载均衡器的node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。当你要把你的独立代码利用全部的服务器上的所有 CPU，并保证进程永远都活着，0 秒的重载， PM2 是完美的。三、为什么需要pm2？目前Nodejs开发中有很多痛点，因为node本身是一个单线程应用，

原创 el-table 表头错乱问题解决

开发项目时，使用 el-table 建立表格，由于数据是动态展示的，表头中使用了 v-if 进行判断，偶尔情况下发现会有表头错乱的问题。解决方案：为每个 v-if 的 el-table-column 添加 key 进行绑定<el-table-column v-if="col.coupon_amount" prop="couponAmount" width="125" key="couponAmount" > ... </el-table-column

原创 微前端项目实战及原理

背景使用微前端在项目中主要是解决使用iframe引入第三方页面时遇到的框架受限，页面交互不统一等问题，项目中遇到的问题大概如下：iframe 内部路由跳转，不会影响到外部的路由地址，无法记住当前访问的页面地址，iframe加载第三方公司应用，在 iframe 里面发生的页面跳转，外部的路由地址是不会变化的，如果我刷新页面，它又回到的之前的页面。iframe 内部的弹窗遮罩问题，iframe内部的弹窗只在内部生效，这样看上去就和左侧菜单以及头部分离了，页面看起来不美观，与正常的UI交互不一致ifra

原创 前端经典算法题大全

1.判断一个单词是否是回文？回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。比如 mamam redivider .很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数，将字符串转换成数组，这个思路很重要，我们可以拥有更多的自由度去进行字符串的一些操...

原创 前端面试必问问题及答案

1.写出javascript运行结果for(var i=0; i&amp;lt;10; i++){} alert(i);110 这个没什么好解释的cookie、sessionStorage、localStorage的区别它们的区别在于存储的有效期和作用域的不同。cookie默认的有效期很短暂，只能持续Web浏览器的会话期间，一旦用户关闭浏览器，Cookie保持的数据就会丢失。cookie的...

原创 一张图看懂cookie、 session、localStorage和sessionStorage 之间的区别和使用

为了区分cookie、 sessionStorage和localStorage, 我把三者的异同整理成了下表的格式, 更加容易理解:

转载 https

前端开发对 HTTPS 的理解

原创 使用vue+element开发一个谷歌浏览器插件

使用vue+element开发一个谷歌浏览器插件

转载 从 Babel 到 AST

在我很小的时候，有人告诉我代码要写的有艺术感。我当时内心：......真高级啊，装起来了。但是伴随着时代的变迁，各种提案的通过，js的写法也逐渐升级，语法糖也多了起来，原来的三四行代码，啪叽，一个不留神，一行就能搞定，整篇代码一眼望去，会让人觉得，嗯，有点东西。e模块包括core-js和一个自定义的模块，可以模拟完整的 ES2015+ 环境，这意味着可以使用诸如Promise和WeakMap之类的新的内置组件、Array.from或之类的静态方法、之类的实例方法以及生成器函数(前提是使用了插件)。

转载 js执行机制

我们从最开头就说javascript是一门单线程语言，不管是什么新框架新语法糖实现的所谓异步，其实都是用同步的方法去模拟的，牢牢把握住单线程这点非常重要。javascript是一门单线程语言Event Loop是javascript的执行机制转载自：https://juejin.cn/post/6844903512845860872。

转载 彻底搞定前后端所有鉴权方案，让你不再迷惘

Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。

转载 JS 原型原型链

js原型

转载 深入理解CSS选择器优先级

深入理解CSS选择器优先级

原创 H5页面获取用户位置信息方案及测试流程

最近在开发微信H5页面时需要获取用户位置信息，实际调研开发后总结一下，避免其他人踩坑。

原创 本地代理到https服务

本地代理到https服务

原创 websocket demo

websocket demo

转载 websocket和http区别

目录一，什么是websocket二，websocket的原理三，websocket与http的关系四，websocket解决的问题1.http存在的问题2.long poll(长轮询)3.Ajax轮询4.websocket的改进推送延迟。服务端数据发生变更后，长轮询结束，立刻返回响应给客户端。服务端压力。长轮询的间隔期一般很长，例如 30s、60s，并且服务端 hold 住连接不会消耗太多服务端资源。推送延迟。服务端压力。配置一般不会发生变化，频繁的轮询会给服务端造成很大的压力。推送延迟和服务端压力无法中和

转载 WebSocket

websocket简介 websocket是什么 答: 它是一种网络通信协议，是 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。答:WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。 WebSocket目

转载 JavaScript的六种继承方式

转自：https://www.jianshu.com/p/3d810bda86bfJavaScript的几种继承方式原型链继承借助构造函数继承（经典继承）组合继承：原型链 + 借用构造函数（最常用）原型式继承 （Object.create）寄生式继承寄生组合式继承（最理想）ES6中的继承1. 原型链继承 子类型的原型为父类型的一个实例对象function Parent() { this.name = 'bigStar'; this.colors = ['red'

原创 git hooks pre-push提交前判断当前本地分支和要提交到的目标分支，分支名是否一致

背景：项目开发时，因为分支多，且分支名有规律排序，担心会误将本地分支提交到远程其他分支上。案例：如本地a01分支，本要提交到远程a01分支上，push时不小心命令行写的是push到远程b01，结果将本地a01分支提交到远程b01分支上，导致代码混乱。解决方案：为避免此问题，写了git hook钩子，在push提交前检测如果当前分支和要推送到目标分支，分支名不一致时给出警告提示不允许推送；代码实现：#!/bin/shwhile read local_ref local_sha remote_

原创 css-BFC

前端程序员在布局页面时，经常会遇到各种烦人的小问题，比如：每个元素都是一个盒子，盒子外的父元素应该不会受到盒内子的子元素影响，可是事实是这样的吗？往往，我们会看到子元素浮动后，父元素高度没有了，两栏布局时右侧没有自适应，垂直方向上上下两个元素外边距不太对从常理上来说，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此，那么有没有什么办法能让里面的元素和外部真正隔离开呢？解决办法就是：BFCBFC = Block Formatting context 意思是“块级格式化上下文”，W

原创 不同样式 tooltip 对话框小三角的 CSS 实现

https://mp.weixin.qq.com/s/ypD9NaTPwvf_ENQHxp8cpg

原创 less中引入公用less文件的变量

less中引入公用less文件的变量踩了无数坑后总结出最好用的方法：webpack添加：{ loader: 'less-loader', options: { globalVars: { 'hack': `true; @import "${path.resolve(__dirname, '../src/style/mobile.less')}"` } }}...

原创 if else switch case如何优化

日常项目开发我们必然且高频会遇到判断场景比如：一个管理系统，根据用户特征每人发放福利1，瘸子 === 送 === 轮椅2，瞎子 === 送 === 墨镜3，聋子 === 送 === 耳机（程序员逻辑）4，孩子 === 送 === 玩具5，男子 === 送 === 啤酒6，女子 === 送 === 炸鸡6个简单的条件，不太深层，但很好理解首先 使用 if else 解决： let client = "";//结果 let type = "瘸子";//客户 if(type === "瘸

原创 常见排序算法速记及思路

冒泡排序思路：它重复地走访要排序的元素列，依次比较两个相邻的元素，如果他们的顺序（如从大到小、首字母从A到Z）错误就把他们位置交换过来.function bubbleSort(arr) { for(let i = 0,l=arr.length;i<l-1;i++) { for(let j=0;j<arr.length-1-i;j++) { if(arr[j]>arr[j+1]) { [arr[j],arr[j

原创 webpack5.0新特性1

原创 webpack -- 前端打包工具进化

原创 Git Flow工作流程简化Git操作

Git Flow工作流程什么是Git Flow：Git Flow是使用Git在团队开发时进行源代码管理的一套行为规范。它把标准的Git命令用脚本组合了起来，简化了Git操作，这些脚本命令在一个预先定义的顺序下自动执行多个操作。Gitflow工作流为不同的分支分配一个很明确的角色，并定义分支之间如何和什么时候进行交互。Git Flow是如何简化Git操作的？我们通过一个案例，比较在同一项目下...

转载 快速记忆HTTP状态码

转载自：https://blog.csdn.net/weixin_41436338/java/article/details/81629327大家都知道http状态码从1xx到5xx 总共有好几百个要想记住这些状态码并不是个容易事，本人每天看一次状态码，尝试各种背，发现这样并没有什么卵用，于是开启了变相图文理解记忆法方便自己记忆。有一天我们去给猫村的猫妹送信。（对，就是那个全部是猫的村落）...

原创 vue响应式原理的实现

Vue2的数据响应式原理1、什么是defineProperty?defineProperty是设置对象属性，利用属性里的set和get实现了响应式双向绑定；语法：Object.defineProperty(要设置的对象,要修改的对象的属性,属性描述)属性描述：1、configurable - 表示此属性能否被delete，默认false;2、enumerable - 表示此属性能否被枚...

原创 setTimeout、promise与async和await的执行顺序

1、async-await 是建立在 promise机制之上的，并不能取代其地位。2、async/await 的优势在于处理 then 链3、Promise执行的优先级大于setTimeout/setInterval4、async方法内遇到await，就是等等再往下走，会等到await后面的promise函数执行完成才会继续往下走。async函数体外的代码可不会去一直等待，这个时候跳出as...

原创 三秒钟让你学会防抖、节流

比较精简的防抖、节流：防抖（debounce）：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。精简：狂点按钮也没有用，等你冷静下来事件才会触发。let time2;document.getElementById(‘防抖’).onclick =function () {clearTimeout(time2);time2=setTime...

转载 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); ...

原创 js常用字符串方法整理

lengthcharAt 返回子字符串，index为下标，超过范围获取空字符串 index取值范围[0,str.length-1] var str = "ABC"; str.charAt(1); //BcharCodeAt 返回子字符串的unicode编码，index取值范围同上var str = "ABC"; str.charCodeAt(0); //65f...

原创 字符串操作函数中的slice（）、substr（）、substring（）

slice()方法传负数和字符串操作函数中的slice()、substr()、substring():字符串操作函数中的slice（）、substr（）、substring（）这3个函数都可以传入两个参数：x,yx（必需）：规定从何处开始选取（索引）；y（可选）：规定从何处结束选取。 //slice和substringy（可选）：规定要返回的字符个数。 //substr当只有x时：1...

原创 js常用数组方法整理

这两天整理了下js常用的数组方法, 都是干货分享给大家:push：向数组的末尾增加一项 返回值是数组的新长度unshift：向数组开头增加一项 返回值是数组的新长度pop:删除数组的末尾项 返回值是删除的数组项shift:删除数组开头项 返回被删除的开头项目splice：删除数组中的任意项 返回值是被删除的数组项slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的...

原创 call、apply、bind的区别, 一目了然

call、apply、bind都可以改变函数调用的this指向, 关于他们三个的区别, 网上很多资料介绍的非常官方, 看完后有种云里雾里的感觉, 不要慌, 看完下面这个实例, 你对call、apply、bind的区别一目了然:举个梨子?const cat = { name: '小黑', eatFish(...args) { console.log('this指向...

原创 小程序登录&授权&获取用户信息

https://blog.csdn.net/qq_33616529/article/details/79080141