weixin_38629440的博客

原创 vue项目打包发现index.js加载了两次？差别在于请求头purpose：prefetch

上线后打开f12，开启禁用缓存 =>发现index.js加载了两次；6.6M直接双倍流量；一番研究得知：vue-cli打包时，会将一些文件preload和prefetch；(1)preload(预先加载文件)app.js vendor.js(2)prefetch(闲时加载)index.js / router懒加载独立打包的文件【就是那串注释标明打包在xx模块用的】再者：启用缓...

原创 promise.all理解

1、promise.allpromise.all([p1, p2, p3]).then(res=>{1、当p1 ， p2， p3 全都是reslove状态，执行到此}).catch(e=>{1、当入参【】里面的promise没有定义catch且reject了，执行到此}).finally(res=>{res: reslove出来的数组1、当入参【】里面的promi...

原创 前端自动复制功能

一、步骤1、input，value是你想复制的内容2、聚焦input的文字，input.select()3、执行copy命令 document.execCommand("Copy")4、判断是否成功——不准确，但是有比没有好。二、代码实现let inputs=document.createElement("input") //创建节点inputs.value=res.dat...

原创 当devserver的changeOrigin没用，后端还用了same-origin！就这么处理

changeOrigin: true,pathRewrite: {['^/' + process.env.VUE_APP_BASE_API]: ''},headers:{//改写Origin,注意结尾不含 /Origin:"http://112.28.109.249:9997",//改写RefererReferer:"http://112.28.109.249:9997/",H...

原创 react 公司项目学习 【react+webpack+nw.js + mobx+react-intl 实现的多页面多语言windows桌面端exe】...

这几天突然要来个react项目；听说还比较复杂；项目组内就两个人会react还在忙，整组主要是用vue；那就学吧；一、研究代码结构不得不说，这目录结构搞得有点复杂，算是我接触中除了乾坤和electron之外，相当复杂的了，慢慢阅读吧；这里有个链接是多页面处理的，跟我这个类似，但我接手的这个更加灵活多变；入口文件是动态的，出口文件也是；https://blog.csdn.net/weixin...

原创 微信浏览器环境H5使用扫一扫功能

一、需求：1、微信浏览器环境H5使用扫一扫功能=>方案：引入wxjssdk，然后获取公众号的签名信息；再在config中配置；配置好了就能使用扫一扫api了2、短信链接内部实现扫一扫功能=>方案：使用input accpet=“image/*”，读取图片区识别，识别二维码数据后发送给后台|--> 由于手机浏览器兼容性问题，部分确实可以实现该功能，具体流程就是：获取手机摄像...

原创 beforeRouteEnter的执行时机以及其参数next的内部参数vm=>{}的执行实际

beforeRouteEnter:(to, from, next)=>{console.log(1)next(vm=>{console.log(2)})}这里是先打印1，后打印21的时机是：to页面进入前，to页面的create都没执行2的时机是：to页面已经进入了，并且to页面的beforeMount执行后，mounted函数执行前，才去执行vm=>{}，并打...

原创 atob btoa 加解密

atob(arg) 对arg进行解密atob(str) 对str进行加密1、兼容性：2、注意：我这次加密的时id字符串，其中只包含字母和数字；加密方法中的参数，只能包含： 数字，大小写字母，应文标点符号，具体字符集是： latin1字符集；可自行百度查看其涵盖哪些字符；如果str中包含中文，中文字符等不能识别的，就会报错DOMException： The string to be...

原创 postcss px转不转rem呢？

1、用postcss时，有时候你的px不转rem；你希望他转；如： elementui的labelWidth配置了数值但是不转原因：行内元素都不转解决方法：放到vue的style元素中就行啦2、有的你不希望他转解决方法：方法1：px单位改为大写 PX方法2：这行css后注释上 /* no */why? 我看了下postcss的源码；大体就是先把这个css字符串转为css的AST【...

原创 全局事件总线

全局事件总线——就是用来组件间通信使用的；可以理解为事件订阅main.js就一行代码Vue.prototype.$bus = new Vue()1、组件种订阅this.$bus.on(eventName, function(params){})2、组件中发布this.$bus.$emit(eventName, params)解释：去官网可以看到一些用法 : vm.$on vm.$...

原创 前端文件转换

file文件的拷贝和改名// 复制文本域中的file文件并重命名let myFile = new File([file], "新文件的名字"]);bolb格式转base64格式function blobToDataURL(blob, callback) {let reader = new FileReader();reader.onload = function () {c...

原创 属性inset 和 属性值unset

属性inset 的值，是： 上右下左的值inset: top right bottom left;css取值 unset：恢复默认

原创 前端断点续传

前端文件如果需要实现断点续传；那么就涉及这么几个东西；1、文件的唯一标识：文件的md5值2、文件的读取和切片的方法：FileReader对象； 这个支持率不是很高有了这两个东西，断点续传就好做了；前端拿到一个文件后；先用FileReader读取这个文件流，然后获取md5值并切片，切片上传；每次上传需要带上切片文件内容和md5以及切片序列；具体操作方法自己去看文档；至于断点续传，这就和...

原创 微信小程序相关

1、框架选型原生微信小程序写法uniapp-cli vue写法uniapp-hBuildX xue写法上述三个选项一般使用下方两个；毕竟在不修改代码写法的基础上，很易上手2、UI选型uView-移动端多端开发_目前上手感觉不错，微信小程序选他没错的mintUI-饿了么团队mui-停止维护了vant-有赞前端团队-just for miniProgranm 微信小程序选他也没错的...

原创 微信小程序vconsole，为什么线上版本还有vconsole？

打开开发版或者体验版，点击三个点然后关闭调试功能；再次进入正式版，就不存在vconsole了。同时！这也是调试线上版本的方法哦

原创 v-show 和 flex 冲突

why v-show 和 flex 冲突？v-show => display: noneflex => display: flex所以冲突；可以在外层嵌套template v-show ；在uniapp上不要用template

原创 .gitignore

.DS_Storenode_modules/unpackage/dist/# local env files.env.local.env.*.local# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.project.idea.vscode...

原创 原生小程序和uniapp开发的坑

1、uniapp编译成微信小程序，微信开发者工具报错: xxx文件找不到，明明就在那里解决方法：关闭，重新打开就好了；再不行就重启，绝对能解决2、微信小程序只支持一次性上传一个文件，不支持多文件上传；可是我这里ocr识别，需要上传多张图片解决方法： wx-multipart插件进行多文件上传；其原理就是使用一个ajax带多个文件，文件需要被编码后(binary)上传，越过微信的wx.up...

原创 前端框架中加入外部config可配置文件，根据不同的运行、编译环境，加载不同的配置文件...

需求：我们的乾坤vue框架，需要集成给第三方，menu由他们处理(包括菜单权限)，我们只负责提供一个去除menu和头部的main即可；这里需要可配置，不能把我们的menu弄丢了。实现方式：1、在src同级目录新建 public/plugins/config.js因为是基于webpack打包，会自动过滤public下的文件，复制到打包后的dist文件夹下，所以这个文件不会被打包压缩；可供给...

原创 iframe通信

原创 《将博客搬至CSDN》

《将博客搬至CSDN》

原创 sessionStorage可以多窗口共享吗？答案：可以，但是有限制条件；且不可用共享二字，应该是属于复制，无法互操作。...

1、sessionStorage本身sessionStorage就是每打开一个新窗口，就有一个自己的sessionStorage对象，关闭窗口即 过期当前窗口的sessionStorage；但是通过A页面打开的B页面( 如：window.open('同源网址') )，会进行源网页sessionStorage复制，并在窗口B中可以访问到；修改窗口A的sessionStorage，不会对窗...

原创 前端FileReader 文件预览

这玩意好像挺强，可以操作用户选择的文件，转为base64或者二进制，blob；1、实际应用我的行车记录仪记录事反着放的，所以查看视频都是反过来的，那么我就写了个html，选择对应视频反向播放；input框选择视频文件后，我们就能拿到当前视频文件，使用let f = new FileReader()f.readAsDataURL( $('#file').get(0).files ) ; ...

原创 node简易命令行开发

一、在学习的过程中，好奇npm run build 到底做了什么？打包 build对应的命令行为：cross-env NODE_ENV=dev vue-cli-service build1、修改环境变量NODE_ENV为dev2、执行vue-cli-service build命令进行打包二、这条命令在干什么？为什么会有这条命令？1、在干什么？这个不是我写这个的目的，主要是在干静态资...

原创 H5 如何实现唤起 APP？

1、不同平台的实现方式有些不同，一般常见的有这几种，分别是：URL Scheme(通用)Universal Link (iOS)App Link、Chrome Intents(android)2、推荐使用：3、优缺点对比...

原创 ts-部分方法

原创 模拟点击事件

模拟点击事件写法1、直接click()原生元素.click()2、dispatchEvent申明Event事件：let cusClick:Event = new Event('click')原生元素.dispatch(eventName: Event)

原创 学习清单

原创 移动端 1px问题

1、概念：设备像素比DPR(devicePixelRatio)DPR = 设备像素 / css像素(某一方向上)2、什么是1px问题？比如：iphone6的屏幕宽度为375px，设计师做的UI一般是750px，所以也就是1：2；所以设计师在画的1px的边框，在“border-width:1px”上展示为2px，这就是移动端 retina屏 1px问题。3、如何解决呢？解决方案还是挺多...

原创 TS(类)

1、interface接口可当tpe用；但是interface可以约束类的定义，按照特定的方式去创造类interface classA{name:string;jump():void;}// 实现 implementsclass A implements classA{'name': string;constructor(name : string){this.name = n...

原创 Vuex 和 localStorage 的区别

Vuex 和 localStorage 的区别最重要的区别：vuex 存储在内存中localstorage 则以文件的方式存储在本地，只能存储字符串类型的数据，存储对象需要 JSON 的 stringify 和parse 方法进行处理。读取内存比读取硬盘速度要快。应用场景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则...

原创 less webpack加载

一、less1、安装npm install -D less less-loader css-loader style-loader2、webpack.config.js中配置module：[{// 设置对less文件的处理test:/*.less$/,use:['css-loader', //3'style-loader', //2'less-loader' /...

原创 Vue.use方法

1、Vue.use 在引入各种插件、组件、plguin时都会使用；那么这个函数到底在干嘛？查看Vue.use的interface第一个参数要么是PluginObject ，要么是PluginFunction意思就是：要么给个对象里面带install函数，要么给个函数我约定好参数然后给你操作反正调用install函数或者调用你直接传的函数，然后我们在定义的函数内部，对vue构造函数上挂上某...

原创 chrome浏览器设置跨越进行联调

设置如下位置改到当前处即可C:\Users\chaozhou11\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --user-data-dir="D:\mychromeData" --disable-web-security -ignore-certificate-error...

原创 vue3学习记录

1、组合式API既然有和vue2一样的options和组合式可选，那学options等于和以前一样啊，还不如改为学习组合式；组合式就是把所有之前的options拆分data部分可以拆成：ref() reactive() 函数传入参数，return 出一个响应式对象，这样return出来的可以在任何地方使用；[ref在script中需要通过.value方式访问](第一个感受就是：我还要vu...

原创 设计模式——状态模式

1、定义事物内部状态的改变往往会带来事物的行为改变。在处理的时候，将这个处理委托给当前的状态对象即可，该状态对象会负责渲染它自身的行为2、核心区分事物内部的状态，把事物的每种状态都封装成单独的类，跟此种状态有关的行为都被封装在这个类的内部3、优缺点优点：状态切换的逻辑分布在状态类中，易于维护缺点：多个状态类，对于性能来说，也是一个缺点，这个缺点可以使用享元模式来做进一步优化将逻辑...

原创 设计模式——享元模式

个人理解：抽离公共方法所需的属性进行共享；不需要的字段抽离到外面进行管理。1、享元模式享元模式(Flyweight Pattern)主要用于减少创建对象的数量，以减少内存占用和提高性能。这种类型的设计模式属于结构型模式，它提供了减少对象数量从而改善应用所需的对象结构的方式。享元模式尝试重用现有的同类对象，如果未找到匹配的对象，则创建新对象。我们将通过创建 5 个对象来画出 20 个分布于不...

原创 设计模式5——模板方法模式

1、定义模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。2、核心在抽象父类中封装子类的算法框架，它的 init方法可作为一个算法的模板，指导子类以何种顺序去执行哪些方法。由父类分离出公共部分，要求子类重写某些父类的(易变化的)抽象方法3、实现模板方法模式一般的实现方式为继承以运动作为例子，运动有比较通用的一些处理，这部分可以抽离开来，在父类中实现。具体某...

原创 设计模式4——发布订阅模式

发布订阅——老生长谈的一个设计模式，还有一个观察者模式1、定义也称作观察者模式，定义了对象间的一种一对多的依赖关系，当一个对象的状态发 生改变时，所有依赖于它的对象都将得到通知2、核心取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。与传统的发布-订阅模式实现方式(将订阅者自身当成引用传入发布者)不同，在JS中通常使用注册回调函数的形式来订阅3、优缺点优...

原创 设计模式3——代理模式

1、代理模式主要有三种：保护代理、虚拟代理、缓存代理保护代理主要实现了访问主体的限制行为2、常见的例子有：过滤字符(限制部分优美辞藻)；Vue 过滤器(代理字符串，返回修改后的值)；计算属性(缓存代理)；防抖节流(代理事件行为，使用虚拟代理，达到对性能的保护)3、实现：这部分实现可以不实现说明，因为比较好理解，通过例子就能看出；...