- 博客(132)
- 收藏
- 关注
RSS订阅
原创 一文搞懂什么是TS，死记硬背不理解只会写成anyScript
取自element-plus的类型，引用该类型后可以直接使用内部属性。]) 表示固定长度和类型的数组。前端项目中，涉及到TS的部分，可以粗略划分为以下几大部分。要针对性的设计不同的类型规范，来避免代码可能造成的错误。数组 (Array 或 T[]) 表示特定类型的数组。前者是传入子组件的接口，后者是该接口请求发起需要的参数。，规范传入el-table内数据的类型结构。函数类型，定义函数的参数和返回值类型。可选params参数，要符合。，规范接口返回时的数据类型。可选api参数，要符合。
2024-10-30 17:28:56
1016
原创 详解安卓和IOS的唤起APP的机制，包括第三方平台的唤起方法比如微信
App Links是Google推出的类似于Universal Links的技术，它允许你在Android上使用标准的HTTP链接来打开特定的应用程序。Universal Links是苹果推出的一种更安全和可靠的网页与原生应用之间进行通信的方式。最开始微信是支持以上三种方法唤起第三方APP的，但是呗各大平台滥用，导致微信成了引流的平台。它可以让你用标准的HTTPS链接来启动你的应用，并且当应用没有安装时，会自动打开网页。”，是一种能将用户直接从链接带到App指定页面的技术，填写格式需要是。
2024-10-12 14:40:18
1467
原创 h5网页嵌套安卓苹果APP内 遇到的各种适配问题与解决方案汇总 --持续更新
在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。
2024-08-06 09:51:20
731
原创 前端前沿web 3d可视化技术 ThreeJS学习全记录
就像前端需要webpack来进行模块化开发 three JS也需要一个对应的工具，他就是PARCEL https://www.parceljs.cn/随着浏览器性能和网络带宽的提升 使得3D技术不再是桌面的专利 打破传统平面展示模式。Threejs封装了WebGL的底层细节，可拓展性强，有很多开源的插件和工具，更易上手。就像2G时代文字信息是主要传输媒介 3G时代的图片 4G时代的视频。拷贝项目到本地即可查看文档 案例文件 使用编辑器等。随着硬件性能与技术的提升，未来的前端也一定是3D的。
2023-03-11 22:52:09
12652
3
原创 从零创建完整的个人项目 （webapck+vue3+element vite+vue3+VantUI）
参考安装node安装vue-cli脚手架npm i -g @vue/cli-init建立项目文件夹执行脚本vue create projectname手动选择需要的插件 vuex、router、babel 、vue版本、Css预处理器 等等配置——项目创建过程已经集成化了 很简单待补全：引入elementUI配置axios与不同环境的访问地址登录环境变量webpack脚本vue.config.js相关配置...
2022-02-15 14:53:31
891
原创 自用快速复习(前端高频常用知识大汇总)前端入门知识树
数组(223查找排序判断遍历定位映射)字符串(3slice substr replace 2 4值索引indexof search索引值charAt charCodeAt)对象(只拷贝基本数据类型和引用的地址-浅 真正实现数组对象的拷贝-深 Object.assign() {…obj}解构 JSON)解构(let [foo, [ , baz], ...arr] = [1, [[2], 3], 4, 5];数组解构对索引可嵌套可省略 let { round:r } = Math;
2021-07-16 10:19:17
811
1
原创 H5支付 两种成熟方案
H5支付，对前端来讲并不算难。主要工作量都在后端，需要对接支付宝API文档配置大量参数与商户信息。前端需要做的是正常调取支付接口，拿到配置好的支付信息，触发后续流程，再利用本地存储拿支付订单号判断支付结果即可【如果跳转支付宝的H5支付中间页，不同于IOS的机制，在嵌套安卓APP-webview的情况下会被销毁，无法保持页面状态，其中一个解决方案就是localStorage需要保存支付订单号】。
2024-09-26 11:13:47
571
原创 H5网页嵌在APP内部 手机锁屏后再打开 setInterval会重复执行
在H5网页嵌入到APP内部时，如果手机锁屏后再打开，可能会遇到setInterval重复执行的问题。这是因为当应用进入后台或屏幕锁定时，浏览器的定时器可能会暂停或重置，导致重新激活时定时器被重新启动。WebView恢复：当用户解锁手机并返回应用时，WebView可能需要重新加载或恢复页面，这会导致setInterval函数重新执行。系统休眠：当手机锁屏时，操作系统可能会将应用置于休眠状态，暂停所有活动，包括JavaScript的定时器。
2024-09-23 15:15:19
348
原创 postcss-pxtorem插件理解与使用
rem（font size of the root element）是指相对于根元素html的字体大小的单位。简单的说它就是一个相对单位。设置 html 的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。如果根元素（即HTML元素）元素的字体大小是 16px，那么 1rem 就等于 16px。如果 HTML 元素的字体大小改变，那么使用 rem 作为单位的元素的大小也会相应地改变。项目地址postcss-pxtorem是一个PostCSS插件。
2024-09-13 14:23:47
469
原创 前端发布 CDN缓存
公司给服务器加了CDN，导致有时前端代码上传打包后，正式环境页面效果却不更新。每次都需要去找运维刷CDN…让我彻底记住了CDN缓存CDN（Content Delivery Network，内容分发网络）是一种广泛使用的互联网技术，旨在提高用户访问网站的速度和可靠性。CDN 的核心思想是将网站的内容缓存到全球分布的边缘节点上，让用户能够从最近的节点获取数据，从而减少延迟和带宽消耗。
2024-09-13 11:57:26
865
原创 H5接入Steam 获取用户数据案例 使用 OpenID 登录绑定公司APP账户 steam公开用户信息获取 steam webapi文档使用
communityvisibilitystate - int型，资料可见模式 1 = 隐私 2 = 仅好友可见 3 = 用户好友的好友也可见 4 = 只对登录Steam的用户可见 5 = 公开，任何人可见。personastate - 用户状态 0 - 不在线 （如果资料为隐私也是如此） 1 - 在线 2 - 忙碌 3 - 离开 4 - 休息？gameid - 如果用户在游戏中，这会是以String形式的游戏APP ID（DOTA2是570）steamid - 用户64位ID。
2024-09-09 17:00:23
894
原创 前端接口请求与后端交互详解 联调后端取不到值 自己的一点记录写的比较随意 会比较乱但都是干货
Content-Type 为 multipart/form-data FormData的功能远超application/json。但是chrome浏览器的开发者工具会根据这个ContentType区分显示方式。Content-Type 为 application/json。Request Payload会对非字符串做字符串转换。默认的Content-Type为text/plain。Content-Type设置的不同，数据提交方式相同时。这两种提交都会将数据放在请求体中。请求header设置。
2024-08-28 10:29:43
323
原创 JS常用url 链接入参出参 拼接新参数提取参数 可直接复制粘贴的工具函数
其实现在并不想写这种博客了，毕竟工具类函数真的随便搜，加上现在各种AI工具让搜索效率大幅提升了，很容易就能搜到可用函数。但看到写的很棒的还是想记录下，就当水了一篇吧23333。
2024-07-30 14:15:13
225
原创 Vue3接入悟空IM实现直播评论互动需求 前端即时通讯 悟空IM连接失败问题 websocket IOS环境 safair浏览器连接失败问题
之前用websocket实现过跨端发送和接收任务，不算难。这次的需求复杂些，需要实现直播的评论互动，改用开源的悟空IM。
2024-07-22 14:47:31
536
原创 打包的意义 作用等前端概念集合 webpack基础配置等
model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
2024-04-26 11:10:25
636
原创 Vue的图片懒加载 vue-lazyload插件使用
是一种网页性能优化技术，页面加载时仅加载可见区域内的图像，图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。
2024-04-15 16:27:55
256
原创 理解vuecli和nginx启动Vue项目区别
Vue CLI 和 Nginx 在启动 Vue 项目时各自扮演着不同的角色，它们之间存在一些关键的区别。以下是关于这两者的主要差异：总之，Vue CLI 和 Nginx 在启动 Vue 项目时各自扮演着不同的角色。Vue CLI 主要用于本地开发环境的启动和管理，而 Nginx 则用于生产环境的部署和静态资源托管。它们在功能、用途、启动与配置以及实时重新加载与性能优化等方面存在差异。当然 也可以在本地下载Nginx服务器，配置好启动后，通过host文件指向本地代理，访问dist文件的形式实现本地运行
2024-04-12 14:23:06
465
原创 当我们在地址栏输入URL的时候浏览器发生了什么
浏览器缓存 -> 操作系统缓存 -> 路由器缓存 -> DNS缓存 -> 根域名服务器查询。浏览器解析HTML代码 分别渲染DOM树和CSS树 经过回流重绘最终展示。OSI七层模型(应用表示会话传输网络数据链路物理)后端服务器监听特定端口收到后进行对应的逻辑处理。后台代码经过解析封装 对数据库操作等。网络层：IP协议查询Mac地址。应用层：发送 HTTP 请求。传输层：TCP 传输报文。最终返回响应给浏览器。
2024-03-31 13:32:05
337
原创 浏览器页面缓存机制
在响应头由 Expires(服务器返回的过期时间) 和 Cache-Control (优先级更高no-store： 禁用缓存 no-cache：不用强缓存，每次需向服务器验证缓存是否失效) 控制。Chrome会根据本地内存的使用率来决定缓存存放在哪，如果内存使用率很高，放在磁盘里面，内存的使用率很高会暂时放在内存里面。浏览器和和服务器对每个缓存资源先商量一个 “保质期” ，被浏览器缓存的资源在“保质期”内是有效的。如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。
2024-03-31 12:28:48
328
原创 React入门 学习全记录(适合和我一样有Vue经验想学习react的同学~)
相对于Vue而言，react因为更复杂的JSX语法和社区文档，React项目代码结构相较vue不是太清晰和直观等原因，学习成本比VUE高。但也是前端必会的技术栈。是由Google开发，对java和c的使用者而言，angular的静态检查、依赖注入的特性，以及面向对象的编程风格，使得angular都要更亲切一些。同时，React真正的在拼开发者的JS功底，如果一个开发者对于JS不精通或者熟练，也会在学习Reat时感觉比Vue难。是一款轻量级、渐进式、灵活且易于学习的框架，适合快速构建单页面应用。
2024-03-13 19:00:35
999
原创 Mock.js使用
以前开发流程中，接口比较慢时都是自己写点死数据测试，不够高级~目前在新项目中接触到了mock接口，现在记录学习下：在Vue项目中，可以使用mock来模拟接口，方便进行开发和测试。且正式环境中应该移除mock的配置和依赖，使用真实的接口数据。Mock.js官网地址。
2023-09-11 10:07:22
281
原创 Uniapp uni-app学习与快速上手
uni，读you ni，是统一的意思。Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位，致力于推进HTML5发展构建，HTML5生态。2012年，DCloud开始研发小程序技术，优化webview的功能和性能，推出了HBuilder可视化开发工具。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。
2023-06-15 16:33:14
3031
原创 VueQuill 富文本 快速上手开发全记录——附axios小坑 需手动重写axios以支持formdata对象
【代码】VueQuill 富文本 快速上手开发全记录。
2023-03-30 17:09:12
384
1
原创 访问GITHUB太慢修改HOST文件 以及原理是什么
访问GITHUB太慢需要修改windows HOST文件的原理是：本机网络设置的 DNS 服务器解析 Github 相关域名到遭受污染的 IP 地址，这些 IP 地址要么本身无法访问，要么节点过远，从而导致了访问失败或者速度缓慢。修改 HOST 文件可以绕过公共 DNS 解析，直接访问 Github 在韩国、日本等的服务器，从而达到加速访问的目的。hosts 文件路径。
2023-03-11 21:50:56
957
原创 three.js和WEBGL的关系 优劣对比 哪个更流行 在中国更好就业(本文由chatGPT自动生成)
根据GitHub上三个库（BabylonJS、Threejs、LayaboxJS）在2020年12月份到2021年12月份之间新增star数量对比分析结果显示：BabylonJS新增star数量最多（约为5000），其次为Threejs（约为3000），最后为LayaboxJS（约为1000）。Three.js是一种高级的库，它封装了WebGL的底层细节，提供了更简单和友好的接口，以及丰富的功能和示例。WebGL是一种低级的API，可以直接在浏览器中绘制3D图形，但它需要编写很多代码和处理复杂的数学计算。
2023-03-11 19:59:52
3924
原创 Vant 弹出列表多选 输入框下拉选择 (可直接复制使用)
项目要做移动端，部分功能迁移过程中发现，VantUI组件库不支持原Element组件库的部分功能，例如el-select 可以做到输入的同时下拉选择 下拉多选。故需要手动改写，分享记录下代码。
2023-02-20 13:43:41
9704
1
原创 为什么要有websocket 如何使用 伪服务器推 HTTP定时轮询 长轮询 (笔记)
websocket协议同样基于TCP，在HTTP的基础上使用。将HTTP请求超时设置的很大，在较长时间内等待服务器响应，例如百度网盘的扫码登录就是用的这种长轮询机制。为应付网页游戏，网页聊天，网页协同办公等复杂场景，websocket协议应运而生。HTTP1.1基于TCP协议，但只支持同一时间段的单向通信，也就是半双工。以上两种方法本质还是客户端主动请求数据 只能使用扫码等简单场景。TCP是全双工协议，通信两端都可以主动向对方发送数据。随机base64码 用于协议升级转换后的通信验证。
2023-01-31 11:08:01
345
原创 VUE项目添加全局滚动条记录功能
思路：在离开某个路由时 保存当前页面的滚动条高度 再次访问时将滚动条高度重新赋值方式1：尝试使用VueRouter的scrollBehavior()方法调试时发现 在进入无滚动条页面返回有记录值的有滚动条页面时会出现问题。且该方法执行在页面渲染之前，弃用换其他方法。方式2：全局混入activated生命周期VueX：Main.jsAPP.vue或其他根组件
2022-12-07 14:04:27
474
原创 TS学习笔记 类型标签 联合类型 枚举类型 泛型 类型别名
js天生没有编译和类型检查的束缚 灵活好上手 结合项目使用时也可以做到热更新提升开发体验。(需要编译的JAVA以前开发DEBUG很麻烦但现在有了容器编排技术，也可以实现类似效果)TS是JS的超集，添加了类型标注，不能直接在浏览器或Node中运行(Deno可以支持)，其他情况都需要TSC转译为JS后执行。TS可以提升代码的健壮性，可维护性，可扩展性与可读性变量添加类型标注参数添加类型标注可选参数:number){}函数返回值类型标注联合类型类型别名。
2022-11-18 15:37:45
1480
原创 VUE3的 单文件组件 ＜script setup＞理解与实际上手案例
第一次使用VUE3时，项目中使用的时兼容VUE2引入setup函数的写法，上手很快也容易理解。直到发现官方的源码展示都用了全新的单文件组件写法，意识到这个才是主流。这篇文章记录下学习过程。
2022-11-01 10:49:13
2952
1
原创 前端面试题个人汇总(精简知识要点 总结话术) / 前端小知识 保持学习 (年终奖年终奖 心心念念年终奖)
ES6++函数、VUE相关、原生JS等各种小知识点 每日学习记录
2022-06-29 10:00:17
403
原创 VUE文件与JS文件的动态引入CSS或其他组件
核心是动态引入的模板字符串import (../styles${url})JS文件中,这里通过接口返回结果判断import { getUserInfo } from '@api/user'getUserInfo({}).then(res => { let url = res.data.sex==1?'/ele-variables.scss':'/ele-variables-teacher.scss' import (`../styles${url}`)})VUE中<
2022-04-24 20:48:10
2117
1
原创 VUE实现自定义指令v-drag与拖拽的实现 + 可用案例代码下载
vue部分<template> <div> <div id="dragTest" style="position: fixed;top: 13%;left: 70%;z-index: 2110; width: 540px;background: #ffffff;box-shadow: 0 4px 8px 0 #eeeeee; border-radius: 4px;left: 20%;top: 20%; width:
2022-03-04 12:07:20
589
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人