- 博客(146)
- 收藏
- 关注
RSS订阅转载 react-router(V6)配置路由的两种方式BrowseRouter组件式和createBrowseRouter函数式
1.createBrowseRouter()函数、createRoutesFromElements()函数、RouterProvider组件、Route组件搭配使用。方式二：函数式（更受人喜爱的方式！，官网原话：https://reactrouter.com/en/main/start/tutorial#jsx-routes）背景：前端项目都离不开前端路由，react-router第三方库为我们提供了配置前端路由的统一解决方案，其中就有两种方式。
2024-04-25 09:55:11
2
原创 运用useRef实现数据存储
在React中，useRef用于创建一个可变的、持久化的引用对象，这个对象可以在组件的整个生命周期内保持其.current属性的值不变，即使组件重新渲染。因此，useRef常被用来在组件间跨渲染周期存储任意数据。以下是关于如何使用useRef。
2024-04-15 17:00:59
180
原创 ts中高阶类型的理解
时，TypeScript 会生成一个表示对象所有可能键的类型，这对于编写更灵活且类型安全的代码非常有用，尤其是在处理映射、枚举对象属性或创建基于现有类型的接口和函数参数时。这个类型主要用于检查和限制变量必须是给定对象类型的所有可能键名之一，确保在代码中使用的属性名是有效的、与类型。此处的 `extends` 用于在条件类型表达式中进行类型检查，如果 `T` 扩展自数组类型，则推断并返回数组元素类型 `U`，否则返回 `T` 类型本身。如果我们想创建一个新的类型，其中所有的属性都是可选的，可以使用。
2024-03-12 16:54:42
869
原创 鸿蒙os开发做全局路由拦截
请注意，以上示例代码基于假设和类比其他前端框架的路由拦截原理，具体实现可能需要参考鸿蒙OS最新的官方文档和SDK说明来定制符合实际需求的解决方案。： 如果框架不支持直接的全局路由拦截器，可以考虑在所有页面跳转路径上的一个公共父组件或通过事件总线（EventBus）与服务通信的方式实现拦截。在进入每个页面前，由这个中间层组件或服务来决定是否允许继续跳转。： 对于涉及系统权限级别的拦截，应遵循HarmonyOS的安全规范和API设计，结合系统提供的权限管理机制，在用户授权之前阻止访问某些特定页面。
2024-03-06 09:51:52
897
原创 解决使用node版本管理工具 NVM 出现的问题（找不到 node，或者找不到 npm）
3.安装后执行 nvm use 【版本】 当node文件夹正常生成即可。1.首先确保删除了之前下载的node。2.通过NVM安装指定版本的node。
2023-11-20 11:41:15
602
转载 vite vue-router history模式打包部署
总结一下history模式部署时需要改动的地方如果是部署在根目录下，只需要改nginx配置如下即可，前端配置无需修改如果是部署在二级目录下(如部署在/wj目录)，修改内容如下nginx配置# nginx 修改后配置vue-router配置})配置// 其他代码省略。
2023-09-19 15:25:00
1095
转载 Node快速切换版本、版本回退(降级)、版本更新(升级)--Windows
【代码】Node快速切换版本、版本回退(降级)、版本更新(升级)--Windows。
2023-09-06 10:36:23
1046
转载 this为什么会为undefined?
运行环境’也是对象，this指向运行时所在的对象。如果一个函数在全局环境运行，this就指向顶层对象（浏览器中为window对象）；如果一个函数作为某个对象的方法运行，this就指向那个对象；如果一个函数作为构造函数，this指向它的实例对象。
2023-07-18 14:15:45
744
原创 uni-app App权限配置参数详情
android.permission.ACCESS_LOCATION_EXTRA_COMMANDS 访问定位额外命令 允许程序访问额外的定位提供者指令。
2023-06-08 15:32:58
2538
转载 uniapp 代理proxy配置方法
上述配置中，我们将所有以/api开头的请求都代理到http://example.com上。其中，target属性表示代理的目标地址，changeOrigin属性表示是否改变请求头中的Origin字段，如果设置为true，则会将Origin字段设置为代理的目标地址。由于我们已经在vue.config.js中配置了代理，请求会被代理到http://example.com/api/users上。上述配置中，我们使用了正则表达式来匹配请求路径，并将/api替换为/example/api。
2023-06-01 10:53:51
2685
转载 js中的函数
但是，一旦第n个位置的形参、实参、arguments都存在时，形参将于arguments绑定，同步变化，(即，在函数中修改形参的值，arguments也会改变。>>>当调用函数，并且实参赋值时，实际上参数列表已经保存到arguments数组中，可以在函数中，使用arguments[n]的形式调用。递：将函数执行上半部分，遇到自身的调用语句时，继续进入内层函数，再执行上半部分。注意：使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！函数的形参列表，默认为函数的局部变量，只能在函数的内部使用。
2023-04-20 14:27:13
136
1
转载 动态引入DynamicImport实现原理
本文介绍的动态引入实现方式基于 rollup 插件通常情况下，我们都是通过确定的字面量路径来引用文件模块的，例如：123import'./a.js';require('./a.js'import('./a.js'对于确定的文件路径来说，构建工具可以轻易的抓取文件并进行相关的转换。但当import或者require的目标不是一个静态字符串，而是一个动态表达式时，构建工具其实也不确定用户到底引用了什么，所以通常这种情况只能依靠 JavaScript 的运行时来解析。
2023-01-13 14:51:42
2351
原创 格式化get请求路由参数
changeParam(param) { let url = '?'; for (let key in param) { if (param[key] !== undefined) { url += `${key}=${encodeURIComponent(param[key]) === 'null' ? "" : encodeURIComponent(param[key])}&` } } url = url.substri..
2022-11-30 11:38:04
417
转载 Vite 的打包和预览功能
而在打包成功后，我们通常需要在浏览器中测试一下打包出来的东西有没有问题，那么一种方法是通过。而在开发完成后，我们需要将项目代码打包到指定的输出文件夹（比如。）中，之后再到服务器中部署打包出来的这个文件夹。而如果是在打包之后，想要预览打包出来的代码的效果，那就执行。之后，如果是在开发阶段想要把项目跑起来，那就直接执行。这个预览的效果也就是我们打包出来的效果。当然，在真实开发中，我们一般不会一直敲。打包成功后，会在项目目录下生成一个。会默认把我们的代码打包进。文件中会存放第三方的资源。的打包和预览功能的说明。
2022-09-09 12:10:03
7809
4
原创 uniapp小程序props传值，对象方法丢失
如果包含function属性则会被忽略掉 主要原因 uniapp props实现采用了JSON.parse(JSON.stringify(ret))，导致this中的data中会识别到对象如果包含function，会直接丢失到该属性。
2022-09-01 13:50:37
1578
转载 renderjs有什么用？聊聊uniapp中用renderjs的一些细节
3.1在renderjs中使用better-scroll做过app-vue开发的话应该知道在service层中没有document对象，无法获取dom节点。所以引用一些外部js的时候，如果初始化的时候需要传入一个选择器的，那基本就断定用到了document对象获取节点。这时候就需要用到renderjs了，首先看一个的示例。根据官方给出的示例做一些修改，我们可以得到以下代码3.2better-scroll自定义id重点来了，上面的例子中虽然实现了效果，但是也出现了一个问题id是固定的。。...
2022-07-29 11:55:07
4184
2
转载 VUE3 中的 Watch 详解
一、监听基础类型二、监听复杂类型复杂类型的监听有很多种情况，具体的内容如下其第一个参数是直接传入要监听的对象。当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 demo.name），还是孙属性变更（如 demo.soulmate.name）...，都是会触发 watch 方法的。2. 监听对象中的某个属性如上代码，监听 demo 对象的 name 属性，那么只有当 demo 对象的 name 属性发生变更时，才会触发 watch 方法，
2022-07-13 11:04:51
28205
5
转载 Vue中高德地图多版本混用
Vue中使用的是amap-jsapi-loader包，在src/index.ts文件中有一个reset方法，调用后会删除已加载的AMap、AMapUI和Loca，其他页面在调用别的版本地图时就会重新加载，而不是报错了。调用的方法：AMapLoader.reset()，别忘了先引入import AMapLoader from '@amap/amap-jsapi-loader'。...
2022-07-12 09:34:57
1037
1
转载 Vue3中shallowReactive和shallowRef对数据进行非深度监听
1.Vue3 中 ref 和 reactive 都是深度监听2.说明 ref 对数据进行深度监听 3.使用 shallowReactive 非深度监听4.使用 shallowRef 进行非深度监听折叠5.triggerRef更改shallowRef创建的数据
2022-07-11 17:30:23
345
原创 【uniapp框架错误】[ERROR] reportJSException ＞＞＞＞ exception function:createInstance, exception
h5端运行正常，一用基座连接手机端就会报这个错误reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught ReferenceError: Element is not defined，求大神指点！！！！网上大部分说是props中使用了this造成的，或者引入了第三方不兼
2022-06-02 17:40:41
22528
17
转载 什么是render.js？UNiAPP中怎么使用它来绘制高德地图？
UNiAPP怎么绘制高德地图？下面本篇文章带大家了解一下render.js的用法，介绍一下如何在uniAPP中使用render.js 绘制高德地图，希望对大家有所帮助。什么是render.jsrenderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。renderjs的主要作用有2个：大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力 在视图层操作dom，运行for web的js库使用方式设置 script 节点的 lang 为 render
2022-05-30 16:15:17
2661
原创 UniAppCli安装sass失败或报错问题
关于SCSS依赖SCSS，您必须要安装此插件，否则无法正常运行。如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可 如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。// 安装sassnpm i sass -D// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容
2022-05-25 14:29:32
1529
原创 sass Maps遍历某些细节
Maps可视为键值对的集合，键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围，键值对被逗号分割 。 Maps中的keys和values可以是sassscript的任何对象。（包括任意的sassscript表达式 arbitrary SassScript expressions） 和Lists一样Maps主要为sassscript函数服务，如 map-get函数用于查找键值，map-merge函数用于map和新加的键值融合，@each命令可添加样式到一个map中的每个键值对
2022-05-24 11:41:33
236
转载 轻松绘制 3D 地图板块，自由配置纹理样式
在大屏效果中，3D 地图往往会成为设计师首选的主视觉，因为 3D 地图不仅仅能将数据和地理空间位置结合起来，还足够炫酷好看，而且地图还可以作为 3D 楼宇、园区、以及城市的基座。为了绘制上面的这些 3D 地图，最常见的做法就是使用 threejs/babylonjs 等常见的渲染引擎，自己拼接顶点构建地图版块，具体的实现可以参考下面的例子：three.js examples2912401452.github.io/easyvExamples/这种方法最大的问题就是自己绘制的地图板块
2022-04-29 14:47:45
3021
4
转载 地理坐标系转换工具，支持WGS84/GCJ02/BD09等常用坐标系互转
地理坐标系转换工具，支持WGS84/GCJ02/BD09等常用坐标系互转https://github.com/hujiulong/gcoordREADME.mdGcoordgcoord(geographiccoordinates)是一个处理地理坐标系的JS库，用来修正百度地图、高德地图及其它互联网地图坐标系不统一的问题。支持转换坐标数组和GeoJSON数据，能在node环境以及所有现代浏览器（IE8+）中运行，gzip后仅3kb。更多信息可以阅读地理坐标系In...
2022-04-28 09:27:20
6610
原创 kmz转kml
KMZ文件可以转换成KML。KMZ文件本身就是KML文件加上一些其他内容经过压缩后生成的,其文件名就可以理解为KML+ZIP。因此,通过WINZIP等解压缩文件将KMZ解压缩,就会得到包括其中的KML文件。
2022-04-27 16:25:29
3603
转载 uni-simple-router：使用vue-router管理uniapp路由
笔记中的内容仅适用于HBulider构建的uniapp项目，通过其他方式构建的uniapp项目请参考uni-simple-router官网 uni-simple-router (hhyang.cn)uniapp用到了vue的很多api，但在路由管理的功能上相较于vue-router还是比较欠缺的，比如全局导航守卫。我们可以通uniapp的插件uni-simple-router来实现类似于vue-router的功能，但多端兼容时，一些用法还需要注意，我们会讲到。一、安装如果你的项目没有使用pa
2022-04-20 17:20:19
7333
6
原创 Vue图形验证码组件
<template> <span class="s-canvas" @click="changeCode"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </span></template><script>export default { name: "Code", data() .
2022-04-12 10:59:22
1846
原创 vue读取SVG
/** * 读取svg文件 * @filePath:svg文件路径 */const readFile = (filePath) => { // 创建一个新的xhr对象 let xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } const okStatus.
2022-04-07 14:23:16
2512
原创 echart地图 选择区域保持颜色不变
geo: [ { //left: 40, itemStyle: { areaColor, emphasis: { areaColor, }, }, label: { emphasis: { show: false, }, }, zoom: 1.2, ..
2022-03-31 20:47:33
2038
转载 纯js做鼠标拖拽物体并记录鼠标位置的效果（附pageX clientX offsetX screenX的区别图）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div{ width: 100px; .
2022-03-18 21:37:25
478
原创 echart画地图实现鼠标悬浮显示省的名字和颜色
label: { emphasis: { show: true, //开启悬浮事件 color: '#D4EEFF'//字体颜色 } },
2022-03-17 13:30:07
3349
转载 react-router-dom 在hook中的使用 v6 和 v5的对比
react-router-dom 的版本介绍v5文档：https://v5.reactrouter.com/web/guides/quick-start本文使用的两个版本： v5(5.3.0) 和 v6(6.1.1)其中：v5版本既兼容了 class component（react v16.8前），又兼容了function component(v16.8及以后，即hook)v6版本，若仍然使用this.props.history.push()，此时props会提示是空值，v6文档里把路由组件.
2022-01-30 17:08:20
1235
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人