- 博客(85)
- 收藏
- 关注
RSS订阅
原创 前端性能优化之回流重绘
首先，我们需要先明白一个问题用户请求的资源到达渲染引擎后如何工作？构建DOM树构建CSSOM树和样式计算构建渲染树下面是网上的一张图片，可以很清晰的说明前三步布局阶段布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切的大小和位置，所有相对的测量值也都会被转换为屏幕内的绝对像素值。绘制浏览器主进程将默认的图层（普通文档流的元素）和多个独立图层交给GPU进程，GPU进程再将各个图层合成，最终显示在屏幕上。哪些元素会独立图层？ <video>
2021-01-17 14:14:35
2023
7
原创 ES6 promise
Promise是在 JavaScript（也称为 ECMAScript-6）中实现异步编程的一种方式。JavaScript 中使用Promise进行异步编程。对于异步编程，JavaScript 使用回调，但使用回调会出现一个问题，即回调地狱（多个或依赖回调）或所谓的 "地狱金字塔"。使用 ES6 的Promise将简单地避免与回调相关的所有问题。
2024-04-11 13:52:06
523
原创 本地调试，使用charles拦截响应内容
localhost:9528/loan_manage/loan_material_export 改成：http://localhost.charlesproxy.com:9528/loan_manage/loan_material_export。第一步：将本地调试地址从localhost改成 http://localhost.charlesproxy.com。打开charles的Windows Proxy。找到需要拦截的请求，点击右键。返回到页面上就是修改后的数据。
2024-04-07 16:28:08
125
原创 微前端-无界wujie
无界微前端方案基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。1）子应用 js 在和主应用同域的 iframe 内运行，所以 window.parent 可以直接拿到主应用的 window 对象来进行通信。2） 主应用可以向子应用注入 props 对象，里面可以注入数据和方法供子应用调用。beforeUnmount：子应用卸载前触发（生命周期改造专用）
2024-01-20 10:30:42
587
原创 npm yarn nrm
npm和yarn都是包管理器，yarn是在2016年发布的，那时npm还处于V3时期，那时候还没有package-lock.json文件，不稳定性、安装速度慢等缺点经常会受到广大开发者吐槽。此时，yarn 诞生了。当然，后来 npm 也意识到了自己的问题，进行了很多次优化，在后面的优化（lock文件、缓存、默认-s…）中，多多少少能看到 yarn 的影子，可见 yarn 的设计还是非常优秀的。npm默认情况下是使用npm官方源，在国内使用的话下载速度慢，很多人在国内会使用淘宝源，有的公司还有自己的私有源。
2023-07-28 11:19:08
738
原创 vue项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？
vue项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？
2023-02-02 10:59:27
59
原创 记录报错：vue项目从public文件下取资源，cordova打包的apk报错文件找不到的问题
vue项目从public文件下取资源，cordova打包的apk报错文件找不到的问题
2022-11-18 13:36:54
1070
1
原创 forEach和map循环中如何等待异步加载，在循环中如何正确使用await
forEach和map循环中如何等待异步加载，在循环中如何正确使用await
2022-11-18 12:31:28
718
转载 webpack打包vue项目之后生成的dist文件该怎么启动运行
项目打包，我的项目分开发，测试和生产环境，以开发环境为例。打包命令之前配置的。所以执行npm run develop打包。打包后的dist文件直接打开index.html文件会报错，因为没有启环境：安装express-generator生成器执行npm install express-generator -g进行安装创建一个express项目执行express expressDemo（expressDemo是项目名）expressDemo项目目录如下图：进入..
2021-12-30 16:21:43
2367
原创 微信小程序安装vant-weapp，将vant的px转成rpx
Vant-weapp官网地址：https://vant-contrib.gitee.io/vant-weapp/#/home安装：1、npm init （这是初始化，一定要做，否则不能安装，官网没说。）一路回车。2、npm安装npm i @vant/weapp -S --production3、修改app.json将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。4、修改project.confi
2021-12-24 13:36:54
1053
原创 微信小程序类似于路由拦截的中间件
在小程序中无法做路由拦截，所以用page中间页面来代替类似进入页面之后（onShow）判断是否登录，没有的话重定向到登录页的这种需求。中间页面的主要功能：1）在每个需要判断是否登录的功能的页面onshow生命周期中来获取storage中的token值，如果有，则跳转到对应页面，没有则跳转到登录页面。2）跳转到登录页面之前，需要将即将跳转的页面（验证是否登录的页面）的路径及参数存入storage中，以便登录完成后继续跳转到之前想跳转的那个页面。全局引入中间页：每个页面使用：需要使用中间页的
2021-12-24 10:13:33
1096
2
原创 微信小程序全局状态管理store
wxMiniStore一个基于原生小程序的Mini全局状态管理库，跨页面/组件的数据共享。1、安装npm init npm install wxministore -S2、微信开发者工具中勾选‘使用npm模块’3、工具->构建npm4、项目中引入5、使用1）app.js中引入store.js2）store.js中可以引入其他模块存放全局状态的文件3）其他模块的全局变量的写法4）更改全局变量的值，在需要使用的组件中，加入useStore: true，表示当前页面或组件
2021-12-24 09:50:32
2281
1
原创 微信小程序发版流程
无论是体验版还是正式版，在发布之前，都需要先配置服务器域名。配置服务器域名的作用？小程序只可以跟指定的域名进行网络通信，包括普通的https请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile）和websocket通信（wx.connectSocket）。如何配置配置服务器域名登录下程序后台https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=274463507&
2021-12-23 16:39:18
2007
原创 创建第一个微信小程序
1、在微信官网下载微信开发者工具，并安装https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，用微信扫码登录开发者工具。2、新建项目，选择代码存放的硬盘路径，填入申请的小程序AppID，勾选‘不使用云服务’，点击‘确定’。小程序创建成功。...
2021-12-23 14:39:00
16
原创 微信小程序注册流程
一、小程序注册1）进入微信管理后台https://mp.weixin.qq.com/，点击‘立即注册’在微信官网下载微信开发者工具并安装，https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2021-12-23 14:27:42
1439
原创 axios切换页面时取消当前页面的http请求
一、全局加1、axios封装文件2、拦截器请求头3、错误处理4、在路由守卫处加上取消请求二、也可以在单个组件中加
2021-11-11 13:55:21
167
转载 cordova打包项目加自签名生成apk
起因：下载好的apk安装到机器上以后发现一直报错‘发现恶意应用，含有不良信息’，设置一些杀毒软件将我的apk当成病毒来提示用户卸载。后来才明白，apk需要证书和签名来验证身份。最初apk：加上签名后：第一步：生成证书，我是直接生成在cordova目录下，使用起来方便：keytool -genkeypair -alias name.keystore -keyalg RSA -validity 4000 -keystore name.keystore/*-alias name.keystore
2021-09-08 11:46:30
340
转载 cordova禁止屏幕截屏和录制
使用cordova-ourcodeworld-preventscreenshots插件。安装：//这种方法不稳定，因为网址有时不能访问。cordova plugin add https://github.com/sdkcarlos/cordova-ourcodeworld-preventscreenshots.git于是我将代码下载到本地，再进行安装。cordova plugin add F:\cordova-ourcodeworld-preventscreenshots-master禁用
2021-08-27 14:17:37
470
转载 cordova+vue扫二维码和条形码
首先我们需要使用cordova的插件cordova-plugin-qrscanner安装：cordova plugin add cordova-plugin-qrscanner贴上vue项目的代码：<template> <div class="scroll-container scan-container"> <div class="scan-none-1"></div> <div class="scan-box-contain
2021-07-12 13:22:29
2075
原创 cordova监测apk版本是否是最新的，更新下载apk
我起初的做法是：将版本卸载了vue项目的配置文件中，进入首页的时候对比数据库版本和配置文件中的版本是否一致，如果配置文件中的版本比数据的低，则提示不是最新版本，询问是否更新，点击更新后跳到系统默认浏览器或者指定的浏览器下载。上机测没问题，以为一切完美。然而，测试人员使用小米手机测试的时候发现，提示无法找到路径，我怀疑的是他的手机不能打开默认浏览器，于是将apk地址改成了随便一个网页地址，继续上机测试，成功跳转到手机浏览器并打开了网页，，，中间尝试过开权限，然而也并无效果。就这样，开始换个思路。。。不用
2021-07-12 13:21:21
553
转载 vue中 .env .env.develop .env.production .env.alpha详细说明
1.配置文件有：.env 全局默认配置文件，不论什么环境都会加载合并.env.develop 开发环境下的配置文件.env.production 生产环境下的配置文件.env.alpha 测试环境下的配置文件2.命名规则：属性名必须以VUE_APP_开头，比如VUE_APP_XXX3.关于文件的加载：根据启动命令vue会自动加载对应的环境。比如执行npm run develop命令，会自动加载.env.develop文件。注意：.env文件无论是开发还是生成都会加载。如下图所示，如
2021-05-11 17:45:30
601
原创 axios全局配置，请求拦截，响应拦截配置
axios全局配置import axios from 'axios';export const service = axios.create({ baseURL: process.env.VUE_APP_BASE_URL //配置axios请求的地址})//post请求的请求头service.defaults.headers.post['Content-Type'] = 'application/json';拦截器：请求之前拦截，请求后对返回数据拦截。应用场景：1、每个请求都带上
2021-05-11 17:43:30
1497
1
原创 前端实现自动化打包部署如何配置jenkins
一、基础：Jenkins 地址：http://192.168.20.17:32769/前端工程目录：目录名称含义：1、不带run命名的代表构造器部分2、*run 代表触发器部分二、构造器：1、新建：进入新建的工程->配置2、配置工程此处所用环境变量，在全局中已经进行配置指定源码位置为git上对应项目地址，指定分支填写对应git上的分支Node版本Shell脚本：echo $PATHrm -rf dist/**rm -rf node_modulesn
2021-04-30 16:45:15
531
原创 弄懂 JavaScript 执行机制event loop
一、EventLoopjavascript是一门单线程语言，既然是单线程的，就是同一时间只能做一件事情。那么问题来了，我们访问一个页面，这个页面的初始化代码运行时间很长，比如有很多图片、视频、外部资源等等，难道我们也要一直在那等着吗？答案当然是 不能所以就出现了两类任务：同步任务和异步任务1.同步和异步任务分别进入不同的 ‘‘场所’’ 执行。所有同步任务都在主线程上执行，形成一个执行栈；而异步任务进入Event Table并注册回调函数。2.当这个异步任务有了运行结果，Event Table会将
2021-04-26 20:18:28
72
原创 elementUi中的popover嵌套导致弹窗不能自动关闭
问题描述：组件A中有个弹窗el-popover，这个弹窗里面引入子组件B，B中又有弹窗el-popover，这样相当于是popover嵌套，导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭，看效果：这个问题在网上差了好久，什么‘popover嵌套导致的问题’等等啊，竟然没有一篇这个问题的文章，看来也挺冷门的，于是打算自己尝试改一下，中间的复杂过程就不说了，最后的解决方案如下：因为无论是第一级的popover，还是嵌套的，都在body上，平级显示，所以不能区分出来，给嵌套的子
2021-04-16 08:27:06
2799
4
原创 el-form中只有一个表单时，按回车键刷新页面问题
当表单中只有一个input，按回车默认是执行提交表单事件，如果是两个input不会出现这个问题。那如何解决呢？在el-form上加@submit.native.prevent阻止默认事件。如果需要回车查询数据，给el-input加@keyup.enter.native="queryInfo"属性，其中queryInfo是查询数据的函数。<el-form ref="form" :model="form" size="mini" :inline="true" @submit.native.preven
2021-04-12 08:20:39
411
转载 cordova打包apk更改图标
我用的是10.0.0的cordova在根目录下的config.xml文件添加如下代码段在这一版的cordova 版本中，根目录下没有res文件夹，需要自己新建，然后把图标图片放进android文件夹去，打包apk，图标更改成功。版权声明：本文为CHENJIANCONG66原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/CHENJIANCONG66/article/details/109275634
2021-04-07 13:06:21
404
原创 cordova+android studio+vue使用过程中问题总结
问题一、cordova run android打包成apk过程中报错如下：这个问题让我被迫大周六从早晨6:00起床，请教了各路神仙，最后在前同事的提醒下解决了。整整5个小时~~~~解决方案：重装jdk，之前装的是这个同事说可能有冲突，换了这个提醒一下，下面的地方一定要选择正确，选择android自带的...
2021-03-13 16:59:07
272
原创 vue-cli3.0，vue-cli4.0搭建项目流程，git克隆项目流程
注：本人能力有限，此文章中如有说明不周或者错误的地方，欢迎大家指正，感激不尽。我也会不断更新完善。下面描述在电脑上已经安装了node的前提下。本人使用node版本是14.15.1因为我之前使用的是vue-cli2.0，所以在使用4.0之前需要先卸载之前的vue-cli，卸载命令npm uninstall vue-cli -g安装新版本vue-cli，npm install -g @vue/cli检查版本号 vue -V （大写V）新建项目：vue create firstPro
2021-03-09 14:39:09
474
原创 ＜el-form＞的＜el-form-item＞使用自定义label的写法
如果不需要自定义，直接下面这样写就可以。<el-form ref="ruleForm" label-width="100" class="formStyle"> <el-form-item label="工作说明"> <el-input type="textarea" v-model="editOrder.workDesc" class="textareaRate" resize="none" size="mini"></el-input> <
2021-03-08 09:56:50
11896
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人