- 博客(76)
- 收藏
- 关注
原创 webpack动态加载组件,components is=xxx; xxxx自动加载,加载不到还能保底加载个base组件...
目前有个vue2项目,h5;展示多个卡片内容,卡片内容根据后台返回的数据结构展示对应的内容。1、template中:【组件渲染】点击查看代码<component :is="chartsName" :id="name" :focusTag='focusTag' ref="tplItem" :title="cardName"...
2024-06-04 13:56:00
128
原创 自适应代码
adapterFunc(){(function (win) {document.body.style.zoom = 1;// document.body.style = width:1920px!important; height:960px!important;overflow: hidden;function refreshScale () {let docWidth = docu...
2024-05-31 13:57:00
266
原创 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模块用的】再者:启用缓...
2024-04-03 16:20:00
336
原创 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...
2024-01-04 17:02:00
395
原创 前端自动复制功能
一、步骤1、input,value是你想复制的内容2、聚焦input的文字,input.select()3、执行copy命令 document.execCommand("Copy")4、判断是否成功——不准确,但是有比没有好。二、代码实现let inputs=document.createElement("input") //创建节点inputs.value=res.dat...
2023-11-30 14:05:00
102
原创 当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...
2023-11-10 17:22:00
139
原创 react 公司项目学习 【react+webpack+nw.js + mobx+react-intl 实现的多页面多语言windows桌面端exe】...
这几天突然要来个react项目;听说还比较复杂;项目组内就两个人会react还在忙,整组主要是用vue;那就学吧;一、研究代码结构不得不说,这目录结构搞得有点复杂,算是我接触中除了乾坤和electron之外,相当复杂的了,慢慢阅读吧;这里有个链接是多页面处理的,跟我这个类似,但我接手的这个更加灵活多变;入口文件是动态的,出口文件也是;https://blog.csdn.net/weixin...
2023-10-18 10:03:00
194
原创 微信浏览器环境H5使用扫一扫功能
一、需求:1、微信浏览器环境H5使用扫一扫功能=>方案:引入wxjssdk,然后获取公众号的签名信息;再在config中配置;配置好了就能使用扫一扫api了2、短信链接内部实现扫一扫功能=>方案:使用input accpet=“image/*”,读取图片区识别,识别二维码数据后发送给后台|--> 由于手机浏览器兼容性问题,部分确实可以实现该功能,具体流程就是:获取手机摄像...
2023-10-11 16:21:00
1285
1
原创 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=>{},并打...
2023-10-08 15:40:00
526
原创 atob btoa 加解密
atob(arg) 对arg进行解密atob(str) 对str进行加密1、兼容性:2、注意:我这次加密的时id字符串,其中只包含字母和数字;加密方法中的参数,只能包含: 数字,大小写字母,应文标点符号,具体字符集是: latin1字符集;可自行百度查看其涵盖哪些字符;如果str中包含中文,中文字符等不能识别的,就会报错DOMException: The string to be...
2023-09-22 14:13:00
171
原创 postcss px转不转rem呢?
1、用postcss时,有时候你的px不转rem;你希望他转;如: elementui的labelWidth配置了数值但是不转原因:行内元素都不转解决方法:放到vue的style元素中就行啦2、有的你不希望他转解决方法:方法1:px单位改为大写 PX方法2:这行css后注释上 /* no */why? 我看了下postcss的源码;大体就是先把这个css字符串转为css的AST【...
2023-08-18 16:35:00
297
原创 全局事件总线
全局事件总线——就是用来组件间通信使用的;可以理解为事件订阅main.js就一行代码Vue.prototype.$bus = new Vue()1、组件种订阅this.$bus.on(eventName, function(params){})2、组件中发布this.$bus.$emit(eventName, params)解释:去官网可以看到一些用法 : vm.$on vm.$...
2023-08-17 17:14:00
55
原创 前端文件转换
file文件的拷贝和改名// 复制文本域中的file文件并重命名let myFile = new File([file], "新文件的名字"]);bolb格式转base64格式function blobToDataURL(blob, callback) {let reader = new FileReader();reader.onload = function () {c...
2023-08-16 15:00:00
103
原创 属性inset 和 属性值unset
属性inset 的值,是: 上右下左的值inset: top right bottom left;css取值 unset:恢复默认
2023-08-11 17:14:00
83
原创 前端断点续传
前端文件如果需要实现断点续传;那么就涉及这么几个东西;1、文件的唯一标识:文件的md5值2、文件的读取和切片的方法:FileReader对象; 这个支持率不是很高有了这两个东西,断点续传就好做了;前端拿到一个文件后;先用FileReader读取这个文件流,然后获取md5值并切片,切片上传;每次上传需要带上切片文件内容和md5以及切片序列;具体操作方法自己去看文档;至于断点续传,这就和...
2023-08-11 16:52:00
120
原创 微信小程序相关
1、框架选型原生微信小程序写法uniapp-cli vue写法uniapp-hBuildX xue写法上述三个选项一般使用下方两个;毕竟在不修改代码写法的基础上,很易上手2、UI选型uView-移动端多端开发_目前上手感觉不错,微信小程序选他没错的mintUI-饿了么团队mui-停止维护了vant-有赞前端团队-just for miniProgranm 微信小程序选他也没错的...
2023-07-31 10:27:00
33
原创 微信小程序vconsole,为什么线上版本还有vconsole?
打开开发版或者体验版,点击三个点然后关闭调试功能;再次进入正式版,就不存在vconsole了。同时!这也是调试线上版本的方法哦
2023-06-06 15:53:00
717
原创 v-show 和 flex 冲突
why v-show 和 flex 冲突?v-show => display: noneflex => display: flex所以冲突;可以在外层嵌套template v-show ;在uniapp上不要用template
2023-06-02 11:25:00
210
原创 .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...
2023-05-31 14:31:00
57
原创 原生小程序和uniapp开发的坑
1、uniapp编译成微信小程序,微信开发者工具报错: xxx文件找不到,明明就在那里解决方法:关闭,重新打开就好了;再不行就重启,绝对能解决2、微信小程序只支持一次性上传一个文件,不支持多文件上传;可是我这里ocr识别,需要上传多张图片解决方法: wx-multipart插件进行多文件上传;其原理就是使用一个ajax带多个文件,文件需要被编码后(binary)上传,越过微信的wx.up...
2023-05-23 09:57:00
264
原创 前端框架中加入外部config可配置文件,根据不同的运行、编译环境,加载不同的配置文件...
需求:我们的乾坤vue框架,需要集成给第三方,menu由他们处理(包括菜单权限),我们只负责提供一个去除menu和头部的main即可;这里需要可配置,不能把我们的menu弄丢了。实现方式:1、在src同级目录新建 public/plugins/config.js因为是基于webpack打包,会自动过滤public下的文件,复制到打包后的dist文件夹下,所以这个文件不会被打包压缩;可供给...
2023-05-23 09:22:00
350
原创 sessionStorage可以多窗口共享吗?答案:可以,但是有限制条件;且不可用共享二字,应该是属于复制,无法互操作。...
1、sessionStorage本身sessionStorage就是每打开一个新窗口,就有一个自己的sessionStorage对象,关闭窗口即 过期当前窗口的sessionStorage;但是通过A页面打开的B页面( 如:window.open('同源网址') ),会进行源网页sessionStorage复制,并在窗口B中可以访问到;修改窗口A的sessionStorage,不会对窗...
2023-04-10 09:14:00
1169
原创 前端FileReader 文件预览
这玩意好像挺强,可以操作用户选择的文件,转为base64或者二进制,blob;1、实际应用我的行车记录仪记录事反着放的,所以查看视频都是反过来的,那么我就写了个html,选择对应视频反向播放;input框选择视频文件后,我们就能拿到当前视频文件,使用let f = new FileReader()f.readAsDataURL( $('#file').get(0).files ) ; ...
2023-04-07 14:44:00
94
原创 node简易命令行开发
一、在学习的过程中,好奇npm run build 到底做了什么?打包 build对应的命令行为:cross-env NODE_ENV=dev vue-cli-service build1、修改环境变量NODE_ENV为dev2、执行vue-cli-service build命令进行打包二、这条命令在干什么?为什么会有这条命令?1、在干什么?这个不是我写这个的目的,主要是在干静态资...
2023-04-06 15:18:00
161
原创 H5 如何实现唤起 APP?
1、不同平台的实现方式有些不同,一般常见的有这几种,分别是:URL Scheme(通用)Universal Link (iOS)App Link、Chrome Intents(android)2、推荐使用:3、优缺点对比...
2023-04-03 16:21:00
163
原创 模拟点击事件
模拟点击事件写法1、直接click()原生元素.click()2、dispatchEvent申明Event事件:let cusClick:Event = new Event('click')原生元素.dispatch(eventName: Event)
2023-03-27 15:38:00
81
原创 移动端 1px问题
1、概念:设备像素比DPR(devicePixelRatio)DPR = 设备像素 / css像素(某一方向上)2、什么是1px问题?比如:iphone6的屏幕宽度为375px,设计师做的UI一般是750px,所以也就是1:2;所以设计师在画的1px的边框,在“border-width:1px”上展示为2px,这就是移动端 retina屏 1px问题。3、如何解决呢?解决方案还是挺多...
2023-03-27 09:40:00
153
原创 TS(类)
1、interface接口可当tpe用;但是interface可以约束类的定义,按照特定的方式去创造类interface classA{name:string;jump():void;}// 实现 implementsclass A implements classA{'name': string;constructor(name : string){this.name = n...
2023-03-24 11:12:00
37
原创 Vuex 和 localStorage 的区别
Vuex 和 localStorage 的区别最重要的区别:vuex 存储在内存中localstorage 则以文件的方式存储在本地,只能存储字符串类型的数据,存储对象需要 JSON 的 stringify 和parse 方法进行处理。读取内存比读取硬盘速度要快。应用场景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则...
2023-03-24 11:12:00
333
原创 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' /...
2023-03-24 11:11:00
64
原创 Vue.use方法
1、Vue.use 在引入各种插件、组件、plguin时都会使用;那么这个函数到底在干嘛?查看Vue.use的interface第一个参数要么是PluginObject ,要么是PluginFunction意思就是:要么给个对象里面带install函数,要么给个函数我约定好参数然后给你操作反正调用install函数或者调用你直接传的函数,然后我们在定义的函数内部,对vue构造函数上挂上某...
2023-03-24 11:07:00
64
原创 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...
2023-03-23 16:41:00
117
原创 vue3学习记录
1、组合式API既然有和vue2一样的options和组合式可选,那学options等于和以前一样啊,还不如改为学习组合式;组合式就是把所有之前的options拆分data部分可以拆成:ref() reactive() 函数传入参数,return 出一个响应式对象,这样return出来的可以在任何地方使用;[ref在script中需要通过.value方式访问](第一个感受就是:我还要vu...
2023-03-20 10:30:00
32
原创 设计模式——状态模式
1、定义事物内部状态的改变往往会带来事物的行为改变。在处理的时候,将这个处理委托给当前的状态对象即可,该状态对象会负责渲染它自身的行为2、核心区分事物内部的状态,把事物的每种状态都封装成单独的类,跟此种状态有关的行为都被封装在这个类的内部3、优缺点优点:状态切换的逻辑分布在状态类中,易于维护缺点:多个状态类,对于性能来说,也是一个缺点,这个缺点可以使用享元模式来做进一步优化将逻辑...
2023-03-17 16:35:00
27
原创 设计模式——享元模式
个人理解:抽离公共方法所需的属性进行共享;不需要的字段抽离到外面进行管理。1、享元模式享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能。这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式。享元模式尝试重用现有的同类对象,如果未找到匹配的对象,则创建新对象。我们将通过创建 5 个对象来画出 20 个分布于不...
2023-03-17 10:47:00
81
原创 设计模式5——模板方法模式
1、定义模板方法模式由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。2、核心在抽象父类中封装子类的算法框架,它的 init方法可作为一个算法的模板,指导子类以何种顺序去执行哪些方法。由父类分离出公共部分,要求子类重写某些父类的(易变化的)抽象方法3、实现模板方法模式一般的实现方式为继承以运动作为例子,运动有比较通用的一些处理,这部分可以抽离开来,在父类中实现。具体某...
2023-03-17 10:04:00
25
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人