- 博客(86)
- 收藏
- 关注
RSS订阅原创 js把数据导出excel表格并给表格设置样式
// 整理表格const formatExcel = (data, name) => { // 创建一个新的工作簿 const workbook = XLSXS.utils.book_new(); // 创建数据 const worksheetData = data; // 将数据转换为工作表 const worksheet = XLSXS.utils.aoa_to_sheet(worksheetData); // 设置样式 cons
2024-10-08 11:19:12
316
原创 js判断一个对象里有没有某个属性
使用in操作符时，它会检查对象自身及其原型链上是否有该属性。hasOwnProperty()只检查对象自身是否有该属性，不检查原型链。Object.keys()会返回一个由对象自身所有可枚举属性键组成的数组，然后通过includes()检查数组是否包含该属性键。propertyIsEnumerable()检查对象自身是否包含该属性，并且该属性是否可枚举。
2024-09-25 11:15:35
519
原创 vue实现从粘贴板获取图片
const pastPic = async (e) => { let items = (e.clipboardData || e.originalEvent.clipboardData).items; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { //只过滤出粘贴的图片 formList.loading
2024-09-14 13:15:39
129
原创 js使用网络请求下载文件
// 网络请求下载文件export const donwloadFileByUrl = async (item) => { axios.get(item.filePath, { responseType: 'blob' // 拿到文件的blob数据 }).then(async (blob) => { console.log(blob); const url = URL.createObjectURL(blob.data); const a = document.cr
2024-09-10 16:06:49
389
原创 vue使用全局指令实现左右拖拽调整元素宽度
app.directive('draggable', draggableObj)const draggableObj = { mounted(el, binding, vnode) { let xOffset = 0; let yOffset = 0; el.style.width = binding.value + 'px'; const handleMouseDown = (event) => { xOffset = event.clientX;
2024-08-28 09:52:46
312
原创 vue3 el-table手动选中某一行、设置默认选中某一行
选中某一行用的是el-table的toggleRowSelection方法，用来切换某一行的选中状态
2024-06-25 11:24:40
2061
原创 用vue把iconfont阿里巴巴的图标封装成组件（可该颜色、大小、增加css动画等样式）
一般来说iconfont图标库是下载图片作为icon，这样对编码来说就有些局限性，比如不能图片的颜色，css动画等等，我们来把iconfont的图标库封装成组件就可以实现：1. 在components文件夹下创建个空的myIcon.vue文件：2. 在iconfont-阿里巴巴矢量图标库中找到适合自己项目的icon，我随便找了一个，然后不下载图片，点击复制svg代码：......... 以上是更改颜色，除此之外还可以把myIcon完全当做组件来用，比如增加css的animation动画：
2024-05-30 11:18:57
634
原创 解决css使用@keyframes/animation属性失效的问题
导致该属性失效的原因可能有很多种，这里记录我遇到的一种：以下代码阴影不生效：以下代码阴影生效：
2024-05-13 15:14:44
839
1
原创 uniapp解决后端传来的id太长导致精度丢失（超过16位的数字会变成0000）的问题
办法一：让后端把id传成字符串类型；办法二：用jsonBig转换为bigInt数字类型：1.在项目根目录打开命令行输入命令安装jsonBig插件：2.在封装的请求中使用插件，核心是在uni.request的配置项添加{dataType: 'String'}配置(因为默认会使用JSON.parse()解析从后端的来的数据)，再用json-bigint插件把长类型数字解析成字符串，解析失败就代表没有长数字可解析，使用JSON.parse()解析
2024-05-11 16:23:55
970
原创 axios解决后端传来的id太长导致精度丢失（超过16位的数字会变成0000）的问题
办法一：让后端把id传成字符串类型；办法二：用jsonBig转换为bigInt数字类型：1.在项目根目录打开命令行输入命令安装jsonBig插件：2.在封装的请求中使用插件，核心是在创建sxios实例的时候假如transformResponse这个配置项，可以拦截接口返回的内容进行处理(因为默认会使用JSON.parse()解析从后端的来的数据)，再用json-bigint插件把长类型数字解析成字符串，解析失败就代表没有长数字可解析，使用JSON.parse()解析
2024-05-11 16:23:04
1401
原创 微信开发者工具预览和真机调试的时候显示游客appid无法使用此功能的解决办法
并扫码选择登录你的账号，没有账号要点二维码下边小程序注册。这里有你的小程序appid，复制。打开微信开发者工具，点详情 - 基本信息 - 修改appid。微信开发者工具的appid和uniapp的appid无关。把再微信公众平台复制的appid粘贴进来再确定就行了。
2024-03-29 11:41:37
2486
原创 鸿蒙开发运行“Hello World“ 项目时报错：Can not find @ohos/hvigor Please check @ohos/hvigor configuration and sync
当我新创建一个项目想预览时提示报这个错：Can not find @ohos/hvigor Please check @ohos/hvigor configuration and sync
2024-01-09 17:29:40
7741
6
原创 uniapp app端路由跳转时设置跳转过渡时间
其中，animationType和animationDuration属性只在app端生效，而且只有uni.navigateTo可以使用uni.reLaunch无法使用 uni.navigateTo({ url: this.nextUrl, animationType: "slide-in-left", animationDuration: 15000 });
2023-11-22 15:42:57
794
原创 javaScript解决手机浏览器下载为图片之后，图片漆黑无法保存的问题
pc端能正常下载图片并查看手机移动端下载的图片全是黑色的并且无法保存，这个问题可能与移动浏览器的安全策略有关解决办法：使用Blob对象和createObjectURL方法来创建一个临时URL，然后将其赋给链接的href属性下载：
2023-11-22 15:34:18
1048
原创 解决uniapp的video标签和transition属性使用时出现错位的问题
视频错位了 ，因为视频消失又出现的时候transition过渡还没结束，所以错位了，这时候在点击按钮向上滚动的时候给控制视频消失/显示的样式延后0.3秒就行了，如(v-if)
2023-11-02 11:08:34
1377
原创 vue3中使用vue-i18n
1.先在项目中下载vue-i18n2.1 .为了结构清晰，在src目录下创建一个lang文件夹2.2 . 在lang文件夹分别下创建两个文件：en.js / zh.js代表两种语言2.3 . 接着在lang文件夹下创建一个index.js文件：3. 在main.js中引入并use刚才创建的index.js文件：4. 到此基本配置已经完成了，接下来使用：在项目中任意一个.vue文件中：5.修改语言
2023-10-30 17:35:59
988
原创 uniapp把文件中的内复制到另一个文件中
使用的是Html 5+的plus.io.resolveLocalFileSystemURL方法切记：要操作一个目录必须就要plus.io.resolveLocalFileSystemURL一次，像我示例里边有三个操作目录的动作，1.读取目录2. 删除老目录3. 把读取到的目录内容移动到目标目录所以就嵌套了三层plus.io.resolveLocalFileSystemURL；
2023-10-24 17:37:49
1509
原创 uniapp退出微信小程序的代码
uni.exitMiniProgram()是UniApp提供的方法之一，用于在小程序平台中退出当前小程序应用该方法还可以接受一个配置项，配置项包含成功和失败的回调函数：
2023-09-04 15:10:43
3242
原创 npm v10.0.0 is known not to run on Node.js v12.8.0. This version of npm supports the following node
执行命令时报错：ERROR: npm vxxx is known not to run on Node.js vxxx. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.报错说你现在的npm版本是vxxx 不支持你现在Node的版本vxxx，需要把node版本改成npm支持的
2023-09-04 10:38:01
4304
原创 Refused to execute script from ‘‘ because its MIME type (‘text/html‘) is not executable, and strict
Refused to execute script from 'http://localhost:8080/style.js?v=1.1' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.造成这个报错的情况有很多，比如服务器配置错误、缓存问题、代码错误、应用部署问题等等这篇文章是在前端项目运行时产生的问题，原因就是我在vue.config.js中设置了静态资源
2023-08-22 11:58:56
7795
原创 Vue3如何像在prototype（原型）上挂载数据
1. 首先，由于Vue团队对原型链的封装和改进，Vue3无法像Vue2一样直接在原型上放置数据，2. 在Vue原型上挂载数据的作用是为了所有组件都可以通过 this. 获取到挂载的这个数据，如果Vue3想要达到同样的效果，即（所有组件都可以通过this.myName获取到张三），需要用到vue3的mixin方法：这样，在其他组件使用this.myName的时候就可以获取到'张三'，达到与在Vue.prototype上挂载数据同样的作用
2023-08-08 11:41:49
4391
1
原创 vue全局状态管理工具 Pinia 的使用
与vuex的作用一样，用于全局共享数据。其实Pinia就是起源于vuex的一次更新，Pinia 于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式api的 vue 状态管理库，就是说在vuex中可以写vue3的代码。，即“菠萝”，菠萝花是一组各自独立的花朵，它们结合在一起，形成一个多重的水果。Pinia确实比vuex方便了很多，它不需要受到action和mutation的限制，可以直接对仓库中的数据进行读写我感觉Pinia与Vuex的关系就像是Vue3和Vue2的关系。
2023-07-25 15:54:52
953
原创 创建一个vite项目，一个命令创建
1. 在一个文件夹下打开cmd命令窗口并输入命令：2. 接着询问你是否需要安装以下这些包，这些都是需要的，输入y回车3.接着起一个项目名称，默认是vue-project4.接着是否使用TypeScript，根据个人需求选择，如果你不知道TypeScript是什么就选No5.接着JSX同理，不知道是什么就选No6. 接着是否添加路由（Router），根据需要选择，这个我一般选择yes7.接着是否添加Pinia，Pinia的作用于vuex相同，用于全局共享数据，根据需要添加8. 接着是否添加单元
2023-07-25 14:28:52
445
原创 Vue 中 route.path 和 route.fullPath 的区别
route.path和route.fullPath是Vue Router中route对象的两个属性，用于获取当前路由的路径信息，区别如下： 1. route.path只包含从基本URL后开始的路径，假设基本URL（base URL）为/app，并且当前路由为/app/home?a=1，那么route.path的值将是/home； 2.route.fullPath包含从基本URL后开始的路径，假设基本URL（base URL）为/app，并且当前路由为/app/home?a=1
2023-07-20 10:35:33
4137
原创 vite运行或打包时报错：Big integer literals are not available in the configured target environment (“chrome87“
意思是编译无法在进行编译("chrome87", "edge88", "es2019", "firefox78","safari13.1")我的解决办法是升级一下vite版本就不报错了，原来是vite2x版本，升到了vite4x可以参考一下我的依赖：
2023-07-11 11:34:51
4232
2
原创 Converting circular structure to JSON\n --＞ starting at object with constructor ‘d‘\n | pr
// 由于json.stringify嵌套循环导致报错的解决函数，obj是要stringify的对象const circularSafeStringify = (obj) => { const cache = new Set(); return JSON.stringify(obj, (key, value) => { if (typeof value === "object" && value !== null) { if (cache.has(value)) {
2023-07-03 17:44:16
3060
原创 ethers.js常用的操作方法
--ethers比web3来说使用方式相对简洁很多，主要就操作三个大对象 1. Provider，（提供者）是一个用于连接以太坊网络的抽象类，提供了只读形式来访问区块链网络和获取链上状态； 2.Signer，（签名器）通常是以某种方式直接或间接访问私钥，可以签名消息和在已授权网络中管理你账户中的以太币来进行交易。 3.Contract（合约）是一个运行在以太坊网络上表示现实中特定合约的抽象，应用可以像使用JavaScript对象一样使用它。
2023-06-15 10:47:06
3901
2
原创 web3.js 常用的操作方法
1. 链接metamask账户，返回结果是promise对象，对象里有账户信息，该方法会启动Chrome的metamask插件，并链接2. 创建账号web3.eth.accounts.create(), 参数是密码，不填参数默认生成密码3. 获取余额web3.eth.getBalance(), 参数是账户的地址，返回的结果是promise4. 换算wei： Web3.utils.toWei(), 参数是字符串的数字，参数以以太为单位，返回结果换算成wei wei换算成其他单位：
2023-06-08 11:00:30
997
原创 Web1、Web2、Web3是什么，它们之间有什么不同
Web3与Web1和Web2的主要区别在于，Web1和Web2分别以静态网页和 互动性更高的网页为主，而Web3则致力于建立一个去中心化的网络，使用户能够更好地掌控自己的数据和信息。
2023-06-05 16:42:05
1003
原创 Adapt Learning使用教程（Adapt Framework/Adapt Authoring）（二）
此文章在上一章的环境配置下操作的，如果还没配置参考我的上一篇文章：https://mp.csdn.net/mp_blog/creation/editor/130824951
2023-05-24 17:08:36
831
原创 Adapt Learning使用教程（Adapt Framework/Adapt Authoring）（一）
因为这是一个外国的技术，在国内又很小众，再加上公司业务需要用到这个东西所以就来总结一下。刚接到任务的时候也是稀里糊涂的，官网全是英文，国内也搜不到教程，让使用这个变得难上加难，没有其他教程参考我只能一点点看官网试错，我来把踩过的坑总结一下，希望能帮助到其他开发者。
2023-05-23 14:14:46
676
原创 缩小图片体积的网站及使用方法
分享一个超级方便的缩小图片体积的网站：Squoosh使用方法：1.进入网站后把图片拖入网站可视区域内2.直接点右下角下载，巨方便无比！
2023-05-12 08:30:00
110
原创 js中，深克隆、浅克隆的概念，以及手写一个深克隆函数
在 JavaScript 中，浅克隆可以使用 Object.assign() 或展开符（…）来实现。深克隆通常使用递归函数 或 第三方库（如 Lodash 或 jQuery）来实现，某些情况下使用JSON.parse(JSON.stringify(obj))也能实现，之所以说某些情况下是因为使用此方式的时候，如果对象包含函数、日期、正则表达式等属性 会将这些属性转换为 null。
2023-05-10 08:30:00
401
原创 uniapp如何使图片宽度变化的同时，高度也跟着变化
在代码中我给图片宽度为设备宽度的95%，高度不设置，正常情况下图片的高度会随着宽度自适应而变化，但uniapp不是。只需要把样式改成以下即可 .banner { margin-top: 3vw; width: 100%; height: 0; padding-bottom: 70%; /*根据图片宽高比计算出的高度占比*/ position: relative; overflow: hidden; /* 防止单独设置 paddingBottom 值的情况下，图片超出容器造成的
2023-05-05 08:30:00
538
原创 uniapp调取摄像头并拍照，并把照片给后端
uniapp写的安卓app的项目打开摄像头要先在manifest.json里勾选这个选项：更改配置后需要重新打包运行；调取摄像头并拍照，并把照片照片给后端：
2023-04-28 08:30:00
3058
原创 css 的 calc() 值如何使用
calc()是 CSS 中的一个函数，没错，css也能使用函数。其实css的上限很高，可以处理 很多逻辑，甚至有那种专门写css不写js的程序员。只是一般情况下都把逻辑写在js中 calc()允许你在表示距离的值可计算的 CSS 值之间执行基本的数学运算。如，可以用于任何需要长度、宽度、高度 或其他尺寸的 CSS 属性值，例如width、height、margin、padding，使用方法如下：下面这张表格列出了css的常见函数，以及他们的作用
2023-04-26 08:30:00
854
原创 uniapp如何创建一个安卓app项目，并制作自定义调试基座，并成功运行
1.新建项目；2.选择uniapp默认模板，vue版本2或3都可以；3.点击创建完之后需要创建自定义调试基座；4.关键的来了，更改成这两个配置再点打包：；6. 会出来一个弹框，不要管，点继续打包；7.之后的打包过程也可能很慢，或几分钟、或几十分钟，我有次等了一个多小时，这取决于你打包的同一时间有多少人同时再排队打包，去刷会儿抖音吧......8.等到出来这个提示就ok了：；9.然后掏出你的数据线链接你的手机，注意，一定要点用于文件传输！并且要用好点的数据线，拼多多几块钱一根的不灵，一定要打开手机的开发
2023-04-24 08:30:00
2350
原创 解决web-view组件的@message事件不触发的问题
这是h5页面，uni 的 SDK别忘记引入，本来没写uni.navigateBack()，以为执行了uni.postMessage()之后web-view的@message事件就会收到，然而并不会，加上uni.navigateBack()后@message正常接收到参数
2023-04-23 08:30:00
6236
3
空空如也
uniapp视频播放时绿屏
2023-02-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人