自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(154)
  • 收藏
  • 关注

原创 IOS证书获取(证书profile文件,p12私钥证书,证书私钥密码,Bundle ID)

打开Finder,按下Command + Shift + G快捷键,输入路径/System/Library/CoreServices/Applications。- 输入以下命令进入钥匙串应用的目录:cd /System/Library/CoreServices/Applications。记得在capabilities里选中自己需要的功能,我的app需要推送功能,所以我选择了push notifications。当我们在开发一个应用APP时需要真机测试,或者上架到对应的应用市场,这时就需要 App打包(

2025-02-27 12:34:32 935

原创 HBuilderX ios自定义基座真机测试

任务描述:用框架写了一个app应用,需要在ios苹果手机上真机运行测试。hbuilderx不再支持标准基座真机运行了,需要自定义基座运行制定自定义基座需要准备的材料:ios的appid,profile文件,私钥证书,证书私钥证书,这些材料都需要在(如何获取ios证书)如果以上材料都准备好了填写到对应的位置,就可以打包了(可能你的应用app用了一些原生插件,在打包的时候就会报对应的错误,一定要在去下载对应的插件配置好相关项)打包成功后就可以连接苹果手机安装自定义基座进行真机测试了,

2025-02-27 10:21:21 295

原创 集成Google Maps页面提示[For development purposes only]解决方案

您必须创建一个Google Cloud Platform账号,并且关联一张信用卡,以便在您的网站上提出的要求超过他们每月免费提供的200美元信用额时,您可以向其收费。它们都有不同的定价(有些甚至是免费的),因此Google提出了让您为您的域分别启用它们的观点。有关更多信息,请参阅:https : //cloud.google.com/maps-platform/pricing/因此,如果您在启用计费后仍然收到受限使用消息,请找出您想要提供的功能所需的API,然后检查是否已启用。转到左侧窗格上的库。

2025-02-07 18:13:14 468

原创 一文搞定Grid布局

Grid一起快速复盘一下Grid布局。

2025-01-22 11:22:42 1299

原创 NodeJS - OSS使用签名URL上传(返回前端上传地址)

前端通过 PUT 将文件上传到此 url 即可。

2025-01-21 15:31:05 356

原创 接口返回的结构体里包含图片(做图片预览)

拿到渲染v-html的这个元素下所有的img元素集合,如下在mounted里增加当前图片的click事件,this.$refs.stem.addEventListener("click", this.onPreviewHandler);然后检测是否点击的是image图片,如果是则可以执行预览了,代码如下,供参考。这是接口返回的字符串结构数据,这时候需要前端做一下图片预览,该怎么处理呢?摘要:有这么一种情况,页面上有一块儿内容是接口返回的,前端做渲染,比如。

2024-11-12 17:51:24 396

原创 模板字符串中定义方法并传参

遇到一个使用js es6的模板字符串进行事件绑定和传参的问题,这个问题的引起是因为使用innerHTML插入了一大串html并进行事件的绑定和传参。以react为例,写一个demo记录一下。其他框架的写法大同小异。

2024-09-20 17:14:21 422

原创 解决vite打包出现 “default“ is not exported by “node_modules/...问题

config.ts配置中添加插件,注意commonjs()必须在上面,否则可能不生效。为这个js文件添加一个默认导出。不太推荐这个方法,虽然比较简单。(3)将main.ts中的导入改为require。你自己本地代码里的js文件源码。

2024-09-06 10:56:51 2315 5

原创 uniapp vite3 require导入commonJS 的js文件方法

在Vite 3中,你可以通过配置vite.config.js来实现导入CommonJS(CJS)风格的模块。Vite 默认支持ES模块导入,但如果你需要导入CJS模块,可以使用特定的插件,比如@originjs/vite-plugin-commonjs。然后就可以在项目里面使用require引入,使用module.exports导出了,如下案例。vite3 导入commonJS 方式导出。然后,在uniapp项目根目录新建。

2024-09-06 10:49:01 1756

原创 运行npm install卡住不动的几种解决方案

在开发过程中,是安装和管理项目依赖的关键命令。然而,有时我们会遇到运行卡住不动的情况。

2024-08-19 17:22:21 3546 2

原创 uni-app打开外部链接方式汇总

App平台可以使用 plus.runtime.openURL、plus.runtime.openWeb或web-view组件;1. 在App内部打开一个浏览器,加载这个地址,在App端打开,这个方法会新开内置窗口打开页面,而且自带标题栏和返回。注意:web-view组件可能会存在跨域,比如你要打开一个发布的公众号页面,web-view肯定是会跨域。在应用中打开一个外部的http/https链接的页面,h5通过window.open或是内嵌。该组件的行为是在app内打开外部浏览器,在h5打开新网页。

2024-08-15 11:07:10 4212 1

原创 uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数

1、App端跳转微信小程序(注意id一定是小程序的原始ID,在小程序后台设置-基本设置里可以看到),App平台打开微信小程序,需要使用plus.share的。注意:与微信小程序跳转微信小程序不同,App端不支持。2、微信小程序端返回App端。

2024-08-15 10:50:48 1453 3

原创 JavaScript做网页是否过期的处理

基于这篇文章我们做网页是否超时,网页是否过期的处理。打开一个网页允许他在一定时间内可以访问,过了这个时间就不可以访问了,encrypt是h5加密方法,看看上面的文档解释:其实原理也很简单:就是设置一个过期时间,加到了当前时间上,然后再解析的地方获取一下这个过期时间的值,和当前时间做个比较就行了var tokenExpireSec = Math.floor(Date.now() / 1000) + 20 // 在当前时间上+30s表示30s之后过期用到的地方:// 拿到当前时间。

2024-07-31 17:50:20 513

原创 封装一个React的公共Toast组件

/ 上面的Toast.tsx文件。前言:很多toast的库不是自己理想的,也不太好看,下面封装一个TypeScript的Toast组件。.show('小芳学前端')第三步:定义一个ToastRef的ref对象用于控制显隐。组件源码贴到下面,可以随便修改成自己想要的样子。最后显示效果就是这样子的。,2500ms之后消失。第二步:放到dom里。

2024-07-18 11:36:01 370

原创 TS一个页面上如果用到了很多key一样的字段,可以用枚举

前言:如果页面内部有很多一样的key名,就可以考虑把他们抽离出来,下面是ts的写法,js写法逻辑类似可以参考,其中searchParams是路由上的参数,只供参考。

2024-07-17 15:02:00 299

原创 路由上传一个ui_control参数(uint32类型)控制页面UI显隐

按位与操作符和按位或操作符都是二进制位运算符。按位与操作符(&):对于每一个二进制位,只有当两个操作数的对应位都为1时,结果的对应位才为1,否则为0。例如,5(二进制101) & 3(二进制011)的结果是1(二进制001)。按位或操作符(|):对于每一个二进制位,只要两个操作数的对应位有一个为1时,结果的对应位就为1,否则为0。例如,5(二进制101) | 3(二进制011)的结果是7(二进制111)。这两种操作符在计算机编程中常用于位操作,如设置位标志、清除位标志、切换位标志等。

2024-07-17 14:47:07 342

原创 通过路由上的参数生成唯一md5和路由上token做验证

路由上的token和本地生成的md5值应该是一模一样才可以正常访问系统,token是和三方或者其他调用折约定好的。,通过路由上的mediaId,X-Test-Timestamp,ui_control 这三个字。为了防止用户通过修改路由上的某一个字段也能正常访问系统的问题,算是安全访问的一个优化。其中token是三方传的,代码内部用md算法来自己生成,规则必须保持一致,参数ru。段生成一个md5值,然后和token要、做一个对比,路由上有很多的参数,同时有一个token字段。前言:有这么一个场景,

2024-07-16 14:13:05 368

原创 DOM元素可编辑自定义样式获取编辑后的数据

内容比较多,好好看看,收获匪浅前言:有这么一个场景,比如一个dom元素是可以编辑的,并且编辑样式得自己写一下,这时候我们考虑单独写一套div来控制编辑样式和编辑的内容。内部有很多的span节点需要渲染,对这些span里面的文本需要修改调整,调整完对应文本传给后台做更新,那么这个流程应该怎么做?接下来我们梳理一下做法咱们分两种情况来讲:第一种是简单场景,只编辑一个div里面的文本内容,比较简单。第二种是复杂场景,编辑div下很多个span里面的元素内容。

2024-07-12 11:09:34 461

原创 uniapp的uni.request请求在浏览器H5和微信小程序都可以发送请求,真机和基座发送请求无效,解决方案

请求的时候会有各种各样的报错,比如下面等等,主要是 "errMsg":"request:fail abort statusCode:-1 看这个报错。但是我们并没有配置app的跨域问题,所以请求的时候把地址写全了,app端不要这个proxy就行了,下面针对h5和app做个兼容。2. 请求封装的地方, h5及其他baseURL是接口前缀,如果是app,把baseURL配置成接口全地址就行。4. 接口定义的地方还是正常用请求地址就行,比如api/user/info, 到3的app的请求url就是。

2024-05-08 14:49:28 991

原创 uniapp使用vconsole调试 兼容App

前言:引入vconsole发现uniapp打出来的包里,看不到vconsole,uniapp开发的h5需要使用vconsole真机调试,如果直接在main.ts引入,打包后整个项目会页面空白,经实验在单个页面引入可解决,以下是解决方案。而且引入后vconsole在其他页面并不会消失,因此并不是只能调试单个页面,直接在入口页面引入即可全局使用。在main.ts或js里引入vconsole,h5用。3 uniapp解决vconsole无法正常使用。

2024-05-08 14:35:04 2764 4

原创 vscode自动生成项目目录结构

目录结构如下:

2024-04-23 10:33:51 1087

原创 关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

项目中需要线下 扫描二维码 进入到小程序指定的页面,二维码中 要动态传递多个参数,接下来看看具体怎么实现,整个过程还比较顺利,特把整个过程中遇到的坑点做以总结。

2024-01-18 18:15:30 2229 2

原创 合并分支中 rebase 和 merge 的区别

git merge 会让2个分支的提交按照提交时间进行排序,并且会把最新的2个commit合并成一个commit。最后的分支树呈现非线性的结构git reabse 将dev的当前提交复制到master的最新提交之后,会形成一个线性的分支树添加好友备注【进阶学习】拉你进技术交流群。

2023-12-29 13:46:27 435

原创 WeakMap 和 Map 的区别,WeakMap 原理,为什么能被 GC?

WeakMap 中,每个键对自己所引用对象的引用都是弱引用,在没有其他引用和该键引用同一对象,这个对象将会被垃圾回收(相应的key则变成无效的),所以,WeakMap 的 key 是不可枚举的。最早最简单的垃圾回收机制,就是给一个占用物理空间的对象附加一个引用计数器,当有其它对象引用这个对象时,这个对象的引用计数加一,反之解除时就减一,当该对象引用计数为 0 时就会被回收。JS 中的垃圾数据都是由垃圾回收(Garbage Collection,缩写为 GC)器自动回收的,不需要手动释放,它是如何做的呢?

2023-12-29 11:05:10 2529 1

原创 如果 100 个请求,你怎么用 Promise 去控制并发?

现在面试过程当中 ,手写题必然是少不了的,其中碰到比较多的无非就是当属 请求并发控制 了。现在基本异步编程的理解了。

2023-12-28 14:06:31 931

原创 10 分钟了解 nextTick ,并实现简易版的 nextTick

在 Vue.js 中,有一个特殊的方法nextTick,它在 DOM 更新后执行一段代码,起到等待 DOM 绘制完成的作用。本文会详细介绍nextTick的原理和使用方法,并实现一个简易版的nextTick,加深对它的理解。nextTick简单的说,nextTick方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 JavaScript 的事件循环机制以及浏览器的渲染流程来实现延迟执行 DOM 更新操作。它的出现主要是为了解决 Vue 的异步更新导致的 DOM 更新后的操作问题。

2023-12-28 13:41:11 1112

原创 分享11 种有用的 JavaScript 技巧

今天这篇文章,我想与你分享 11个有用的JavaScript实用小技巧,它们将极大地提高你的工作效率。虽然,我们通过递归函数将多维数组转换为一维数组,但是有一个非常简单的方法可以解决这个问题。许多翻译网站都有此功能,你可以选择文本并将其翻译成另一个国家的语言。以上就是我今天想与你分享的11个有用的技巧,希望对你有所帮助。非常方便的帮助我们获取浏览器中的cookie信息。

2023-12-27 16:17:19 1279

原创 分析diff算法与虚拟dom(理解现代前端框架思想)

React和Vue作为目前国内主力的前端开发框架,想必大家在日常的开发当中也是非常熟悉了。不可否认的它们的存在大大地提高了我们的开发效率以及使得我们的代码可维护性得到提高,但是使用它们的“巧妙”的之后,对技术有着追求的你,是不是应该了解一下这些框架背后的一些思想呢?如果还没有,没关系,我们一起来!

2023-12-27 14:21:26 1236

原创 如何实现准时的setTimeout

想得到准确的,我们第一反应就是如果我们能够主动去触发,获取到最开始的时间,以及不断去轮询当前时间,如果差值是预期的时间,那么这个定时器肯定是准确的,那么用 while 可以实现这个功能。运行代码如下,通过一个计数器来记录每一次 setTimeout 的调用,而设定的间隔 * 计数次数,就等于理想状态下的延迟,通过以下例子来查看我们计时器的准确性。依旧非常的稳定,因此通过系统的时间补偿,能够让我们的 setTimeout 变得更加准时,至此我们完成了如何让 setTimeout 准时的探索。

2023-12-26 15:04:06 937

原创 分享3种常用的前端埋点方式

因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程,所以我们可以和后端约定一个接口通过ajax去进行数据上报。方法可用于通过 HTTP POST[1] 将少量数据 异步[2] 传输到 Web 服务器。前端埋点上报常使用ajax,img,navigator.sendBeacon。不推荐使用ajax。如果考虑兼容性的话,img是不二之选。

2023-12-26 13:55:48 942

原创 React、Vue3中父组件如何调用子组件内部的方法

当父组件需要调用子组件的方法时,可以通过useImperativeHandle钩子函数实现。以下例子是ts实现方式。在子组件中使用钩子,将指定的方法暴露给父组件,以便父组件可以通过子组件的引用来调用该方法。在子组件中使用了 useImperativeHandle 钩子将 someMethod 方法暴露给父组件。注意,为了使用 useImperativeHandle,需要将子组件包裹在 forwardRef 函数中,并在参数列表中添加 ref。上述代码中。

2023-12-26 09:00:00 502

原创 React组件在什么情况下会重新渲染

当我们使用React编写组件时,组件的重新渲染是一个重要的概念。重新渲染是指React组件在特定情况下会重新执行其渲染函数,更新用户界面以反映最新的数据。很多情况下,组件不必要的重新渲染会严重影响性能,所以要充分了解触发组件重新渲染的条件。当Context的值发生变化时,订阅了该Context的组件将重新渲染。在React中,组件的props是父组件传递给子组件的数据。当这些props发生变化时,子组件将重新渲染以反映最新的数据。当一个子组件嵌套在一个父组件中时,父组件重新渲染,子组件也会重新渲染。

2023-12-25 13:46:23 565

原创 JS 现代化的深克隆

前端手写深拷贝/深克隆是一道回头率超高的笔试题,但笔试版一般不适用于生产环境,JSON 的奇技淫巧和 Lodash 的工具函数也各有缺点。您知道吗,JS 现在有一种原生方法可以深层复制对象?您是否注意到,上述示例中我们不仅复制了对象,还复制了嵌套数组,甚至是Date对象?不仅可以如上操作,还可以:克隆无限嵌套的对象和数组克隆循环引用。

2023-12-25 13:31:38 969

原创 如何设计更优雅的 React 组件?

在导入依赖项的下方,通常会放那些使用 TypeScript 或 Flow 等静态类型检查器定义的文件级常量和类型定义。组件中的所有magic值,例如字符串或者数字,都应该放在文件的顶部,导入依赖项的下方。由于这些都是静态常量,这意味着它们的值不会改变。因此将它们放在组件中是没有意义的,因为放在组件中的话,它们会在每次重新渲染组件时重新创建。对于更复杂的静态数据结构,可以将其提取到一个单独的文件中,以保持组件代码整洁。下面是使用 TypeScript 声明的组件propsid: number;

2023-12-22 13:01:36 1116

原创 js 如何判断对象自身为空?很多人错了~

如何判断一个对象为空是我们在开发中经常会遇到的问题,今天我们来聊聊几种经常使用的方法,以及在不同的场景下我们如何去使用。判断一个对象是否为空时,使用方法最为完美。添加好友备注【进阶学习】拉你进技术交流群。

2023-12-22 12:58:29 344

原创 浏览器渲染原理

如果主线程解析到link的位置,此时link的CSS资源文件还没下载解析好,主线程不会等待,继续解析后面的HTML。合成线程拿到每个层、每个块的位图后,生成一个个的quad(指引)信息,指明位图信息位于屏幕上的位置,以及会考虑到transform的旋转、偏移、缩放等矩阵变换。这就是transform效率高的主要原因,因为不会引起样式的计算、布局、生成绘制指令等,它与渲染主线程无关,这个过程发生在合成线程中,且只需要进行最后一步-画。当进行了会影响布局树的操作后,需要重新计算布局树,就会引发重新。

2023-12-21 17:25:59 940

原创 代码提交分支规范

feature-${ver}:当前开发分支,从master分支创建。线上环境出包回归通过,feature-v_1.2.0代码合并到master,并由feature-v_1.2.0分支打tag。feature-jenkins:自动打包分支,由开发分支往该分支合并代码,自动触发jenkins打包流程。feature-${dev}:个人开发分支,从版本分支拉取创建,修改提交到版本分支。封版之后,feature-v_1.2.0版本分支出包线上环境回归。个人从版本分支创建/同步个人分支:feature-lisj。

2023-12-21 17:21:30 850

原创 页面滚动时隐藏element-ui下拉框/时间弹框

在系统中,当(有垂直滚动时)点击下拉框后滚动页面,会发现下拉项会遮盖住页面中的元素,不会隐藏。在页面滚动或者缩放时隐藏下拉项即可(借助点击目标元素,下拉项会自动隐藏的特点)1、监听当前滚动元素的scroll事件。2、定义滚动监听的容器。3、隐藏popper。

2023-07-26 17:55:17 1638

原创 video/audio timeupdate事件触发粒度(更新频率)调节

一旦触发该监听器,就立即分5次执行,每50毫秒执行一次,执行5次,恰好就是250毫秒。所以这个timeupdate事件触发频率也是250毫秒触发一次。一般来说,视频的进度条底层默认都是250毫秒更新一次的。其实可以在里面加上计时器。

2023-06-08 16:37:43 1675

原创 在nuxt引入element插件,报错,The client-side rendered virtual DOM tree is not matching server-rendered conten

翻译:[Vue warn]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的,例如在。上图中出现的这个问题是element-ui没有允许在服务端使用导致的。组件,该组件只是占位且用于仅在客户端渲染其他组件.在nuxt引入element插件,报错。在这element-ui组件最外层加上。警告: Nuxt 版本小于。中嵌套块级元素,或者缺少。

2023-05-30 15:34:21 442

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除