js
文章平均质量分 51
A黄俊辉A
这个作者很懒,什么都没留下…
展开
-
vue 公众号开发,调用jssdk封装
vue 公众号开发,经常会使用到 转发朋友,朋友圈,调用扫一扫等功能,这时就要使用微信的 jssdk。原创 2024-01-11 15:55:53 · 668 阅读 · 0 评论 -
Vue 封装的 axios 类的使用(小bug 改进)
改进方法, 每一次都来 new api()的实例有点麻烦,所以, 我在 api 的类中添加了一个静态方法。有了静态方法,就不用每次使用时就要new了。业务类 api 继承 http。原创 2024-01-09 10:38:14 · 1135 阅读 · 0 评论 -
vite项目报错 This file is being treated as an ES module because it has a ‘.js‘ file extension
NodeJS默认以CommonJS的规范来执行JavaScript代码,使用CommonJS模块的导出和导入方式,也就是对应代码中的module.exports和require关键字,如下所示。原创 2023-12-11 09:48:17 · 997 阅读 · 0 评论 -
php+vue3实现点选验证码
自已写一个试试, 后端的接口还是用的 buildadmin 的接口,前端我自己写了一下简易代码做了一下实验,如果开发的时候 可以使用上面的 代码, 注意上面的代码是 ts 的,稍稍改一下代码就可以了。id是前后端对应的, info 中 以 “-” 分隔了 两次点击的 坐标点 , 350是图片的完度,200是图片的高度。前端通过代码, 请求 后台的 验证码的 creat ,得到图片,并显示到前端页面。以下是我用 vue3 js写的简易代码, 也是可以实现验证码的 , 仅供参考。原创 2023-11-14 14:15:35 · 427 阅读 · 0 评论 -
js 加密解密 cryptojs(对称加密库)
js 加密解密可以使用 crypto-js这是一个对称加密的库, 可以使用 AES DES 但没有 rsa 等非对称加密的方法安装方法 npm install crypto-js它可以进行 MD5 SHA-1 SHA-256 Base64 AES DES 等算法和加密通过显式调用toString方法并传递编码器,可以将WordArray(二进制数据)对象转换为其他格式。我们把最后几行的 二进制转16进制和 二进制转base64 的结果和 php 生成的结果对比一下看看。原创 2023-11-10 10:25:45 · 1985 阅读 · 1 评论 -
小程序生成海报并下载到本地图库
小程序在海报页点需生成海报, 并下载图片到本机,同时, 下载的图片上有 名片信息, 和一个小程序太阳码图片。使用 canvas 来画出图片, 名片文本, 和小程序的太阳码。简易的代码, 其中 可以使用 promise 来等待图片画完。在小程序的 wxml 中添加 canvas 标签。设置canvas 的。原创 2022-11-19 18:24:51 · 469 阅读 · 0 评论 -
小程序中使用 web-view 嵌入H5程序 localStorage和vuex的选择
这里说一下它出再的问题 使用localStorage 把token 记录入缓存之后, 这个缓存不好控制清除的时间, 因为, 在用户访问期间, 我是需要它的, 用户走了之后, 我是要清除它的, 这对程序来说根本不知道该什么时候清除。如果一个用户使用完了,关闭了小程序, 10分钟后,又回来打开小程序,这时 localStroage 还是存在的,此时,就不会发送短信了,这与我们的要求 不相符,要求是用户每次进入的时候都要发送短信。这里要解决用户的认证问题,我们的思路是这样的。原创 2022-11-09 17:27:46 · 1244 阅读 · 0 评论 -
vue中使用pdfjs-dist + turnjs实现页面的翻书浏览
pdfjs-dist 的工作原理:把获取到的 pbf 的文件的数据流, 利用 canvas转换成图片turnjs 把多个元素做成翻书的特效我接手了一个展示大屏的项目, 其中有一个地方,就是要以翻书的形式来预览 pdf文件如图。原创 2022-10-31 11:10:21 · 860 阅读 · 0 评论 -
turnjs api中文文档
其中 class=“hard” 表示的是书的封面 中间的div是书的正文。1.引入jquery 以及turn的js库。最简单的js 示例如下。原创 2022-10-30 14:22:09 · 1124 阅读 · 0 评论 -
echarts绘制地图
第二种方法绘制地图是使用 json 数据, 这种方法更灵活一些, 可以绘制不同省份,市区,等的地图,上面的是 国家的地图, 那么这里的 使用json数据的方法可以绘制更小的地方的地图。从echart 的文档上来看, 我们在echart中使用 geo 和 使用 series 来绘制地图,它们之间有一点细微的差别,可以忽略不计。从站点上可以看到, 我们可以选择 是下载全国的数据, 还是下载某一个省的json数据, 我们这里只使用湖北省襄阳市的试试。两中方法都是可以了, 随便选择就可以了。原创 2022-08-22 20:17:06 · 10530 阅读 · 4 评论 -
flex 布局 justify-content:space-between 最后一行左对齐的解决方案
在前端的布局中,我们经常使用flex布局,当遇到分两栏或者n栏的时候,自然就会使用space-between.但是,如果是一行的话,上面的就没有问题,如果要让它自动换行的话,就有可能不是我们想要的效果了上图的情况就是最后一行变成了两端对齐了。......原创 2022-07-15 14:50:44 · 1167 阅读 · 0 评论 -
JS 文件base64、File、Blob、ArrayBuffer互转
二进制互转file对象转base64let reader = new FileReader(); reader.readAsDataURL(file[0]) console.log(reader)base64 转成blob 上传function dataURItoBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].原创 2022-04-25 16:17:24 · 3234 阅读 · 0 评论 -
vue的自定义指令来控制页面按钮组的权限思想
在vuejs中, 我们可以自定义一些指令,来控制一些按钮加载之前的动作, 比如现有的 v-if 或者 v-show这些功能是我们可以手写的, 现在们来做一个初级的页面级的权限控制的例子vue自定义指令<template> <div class="table-wrapper"> <div class="action-bar"> //v-hasProm 指令是说 如果指令中value 包含在 data.promission 数组中, 就把这个按原创 2022-04-21 17:22:09 · 1117 阅读 · 0 评论 -
async await在循环中使用的坑
今天在工作中遇到这样一的个问题, 在van-upload多文件上传的时候, 一般的是后端会给一个多文件一起上传的接口, 但是我这里遇到了天杀的后端只给了我一个 单图片上传的接口。于是我就想, 多文件上传, 就是把单文件上传接口调用多次,就可以了。但是这种上传时, 在返回的数据的时候要严格的控制住上传的顺序, 又因为是异步上传, 这个顺序基本上是很来控制的,所以我想到了在上传的函数中使用 async 和 await结果就发现, async await 没问题, 循环也没问题, 当它们合在一起使用时,原创 2022-04-19 00:13:12 · 688 阅读 · 0 评论 -
vant van-upload 的使用
如果是单图片的上传, 可以不用使用 fileList 我的这样个博客有说明 用户头像修改van-upload是 vant 中解决文件上传的一个组件,同时它还具备上传之后的回显功能,但是它的回显是通过本地的缓存文件显示的, 而我们的上传文件的时候, 后台会返回一个上传文件的地址,我们在提交上传文件的时候, 是把返回的文件地址传给数据库进行保存的, 所以我们要 把文件上传的地址保存到 fileList 变量中的, 但是如果我们简单的把上传过后的返回地址push到 fileList中, 我们可以看到, 文件的原创 2022-04-18 12:43:42 · 4730 阅读 · 0 评论 -
vant中修改用户的头像
我们的项目中经常会遇到用户个人信息的修改,当然用的组件就是 vant 中的 van-uploader 组件, 但是这个组的是有一个回显功能的, 它的样式不太符合我们, 更改用户头像的场景对比一下van-uploader 的本来的样式是这样的而我们需要修改用户头像的样式是这样的我们的需求就是 上传完图像之后, 再次点击头像, 还可以再次上传一个新的头像, 这样的需求, van-uploader 中的 fileList是实现不了的那么我是怎么实现这个功能的呢我没有使用 van-uplo原创 2022-03-30 11:32:04 · 1514 阅读 · 0 评论 -
vue项目中使用 vue-pdf 预览文件
git地址:https://github.com/FranckFreiburger/vue-pdf#readme1.下载npm install --save vue-pdf2.引入 <template> <div class="wrapper"> <p class="arrow"> // 上一页 <span @click="changePdfPage(0)" class="turn" :class="{grey原创 2022-03-28 20:54:13 · 364 阅读 · 0 评论 -
js 一个数组参照另一个数组的排序进行排序
工作中遇到了这样一个问题, 后端给我返回了一个地区的列表, 但是这个列表中的排序不是我们想要的, 此时, 我们没有机会去要求后端给我来进行按要求的排序, 因为后端不是我们公司的, 所以, 只有在前端拿到数据之后,再重新排序。如图, 后端给我们的顺序是这样子的前端 要求的排序是这样子的“市辖区”,“婺城区”,“金东区”,“兰溪市”,“东阳市”,“义乌市”,“永康市”,“浦江县”,“武义县”,“磐安县”,“经济开发区”也就是说, 我们要把上面的数组中的对象, 按下面数组中的名称顺序进序排序下面是方法原创 2022-03-11 19:02:31 · 3342 阅读 · 0 评论 -
js操作剪贴板
添加链接描述这个方法要浏览器支持才可以使用, 但是如果是手机端 H5 使用的话, 基本上都是可以的原创 2022-03-11 16:46:13 · 438 阅读 · 0 评论 -
js中的一个好用时间工具类 dayjs
开发中有时会要和时间显示找交道 , js原生的有 Date 对象, 用起来比较笨重, 这里绍介一个好用的 Date 的工具类 , dayjsDay.js开发文档 Day.js开发文档安装 npm install dayjs --save //或者 <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>```使用 let now = d原创 2022-03-11 15:21:45 · 3924 阅读 · 0 评论 -
vue的sync修饰符
vue 中父子组件通信的时候, 我们可能会看到 .snyc 的代码, 它实质上是一个语法糖, 不使用它我们也有解决的方案, 使用它的话,可以使我们的代码更加简洁而已。首先, 我们实现一个功能, 在父组件中定义一个变量来控制子组件的显示, 同时子组件也可以来修改父组件中的变量如图这其实就是一个父子组件间的通信, 父组件通过 props 传给子组件, 子组件要修改父组件的数据, 就要通过 this.$emit来修改如下面的代码:父组件<template> <div原创 2022-03-09 14:33:52 · 933 阅读 · 0 评论 -
vue的全屏组件
项目中有一个驾驶舱页面, 需要用到全屏的显示, 那么我们是怎么做全屏的切换呢有两个方法, 一个就是 使用 F11 键就可以切换全屏第二个方法就是使用 requestFullscreen 方法1.document下没有requestFullscreen2.requestFullscreen方法只能由用户触发,比如:在onload事件中不能触发3.页面跳转需先退出全屏4.进入全屏的元素,将脱离其父元素,所以可能导致之前某些css的失效解决方案:使用 :full-screen伪类 为元素添加全屏时的原创 2022-03-09 10:40:31 · 2561 阅读 · 0 评论 -
vue使用高德地图的行政区域浏览
工作用遇到这样的需求,要求在地图上把每个行政区画上不同的色块, 并且添加一个标注文本来说明,也就是实现下图这种的效果 : 这是金华市下的各级县市的 区域划分上面的效果, 高德可以有两种方式来实理一 绘制行政区划边界 高德地图api二 UI组件-行政区划浏览 UI组件库-行政区划浏览参考文档我们这里来说明一下, 第二种方法的使用方法如下引入 UI 组件库这里还是说一下 vue 中的 AMap 和 AMapUI 的引入吧,(不用 npm 下载 Amap 的 包)在vu原创 2022-03-03 17:04:38 · 3534 阅读 · 0 评论 -
canvas 画板宽高与画布宽高带来的问题
今天做了一个小程序项目的手写签名的功能, 使用的是 canvas思想就是在 小程序页面中添加一个 canvas , 然后为其绑定 touchstart 和 touchmove 事件, 这们要把这个画布 做成一个手写先说一下具体的方法吧首先小程序中创建一个 canvas注意,小程序中使用的时候要 给canvas 加上 type=“2d”在 js 文件中上面的就可以 在画布上 签名了但是,上面有一个严重的问题,看下图这种误差, 在别的地方可能可以接受, 但是这里时签名, 手原创 2022-02-19 23:38:43 · 1221 阅读 · 0 评论 -
使用 js 把当前面下载成为图片
我们在前端有时会把当前的页面显示成图片, 如订单, 物流信息打印出来, 这时, 我们要不用是使用截图工具转发, 要没就是手机拍照, 如果使用 js 来把当前的 html下载成为图片, 怎么做到呢这里有一个工具 html2canvas 使用起来很简单用法也很简单,html2canvas(这是里的参数是要使用 canvas 画的 html 上的文档节点)看下面的这段代码 daochu(){ let node = this.$refs.aaa; html2canv原创 2022-01-27 11:12:37 · 1916 阅读 · 0 评论 -
vue页面的缓存问题解决(keep-alive + 页面级路由守卫 + 生命周期activated)共同解决
上面的问题出现之后, 我们分析一下其结果可以简化成我们想要的功能是这样的列表页中的数据, 我希望, 如果是从详情页跳回来的时候就把页面内容给缓存下来,如果是从首页跳转过来的时候, 就要重新请求数据, 不要缓存解决步骤先把详情页跳转到列表页的问题给解决了当我们从详情页跳回到列表页的时候, 总是给我们跳回到了分页的第一页, 这样的体验对用户来说肯定是不好的, 所以这个问题我们可以在 router-view 加上 keep-alive这是我的真实项目中的代码, 其中 keep-alive :i.原创 2022-01-18 14:57:23 · 2358 阅读 · 1 评论 -
js中 把两个具有相同属性的对象 相互赋值
我们的开发过程中有可能会把两个具有相同属性的对象, 把这个对象的所有的属性值赋值给另外一个对象, 应该怎么做才方便一些呢?如下 let A = { name:"", age:"", sex:"", address:"", grade:"", like:"吃饭,睡觉,打豆豆" }; let B = { name:"huangjunhui", age:40, sex:"男",原创 2021-12-24 08:56:55 · 3066 阅读 · 1 评论 -
vue watch中获取this.$refs.xxx节点的方法
项目中要在 watch中使用 refs操作dom对象,因为我们的watch是监听特性,会使用时,this.refs 操作 dom对象, 因为我们的watch是监听特性, 会使用时, this.refs操作dom对象,因为我们的watch是监听特性,会使用时,this.refs是undefined , 所以我们的解决办法是 this.$nextTick()来帮忙解决...原创 2021-12-14 15:20:11 · 6326 阅读 · 1 评论 -
vue watch监视对象的属必以及它的深度监视
我们在使用vue的时候有是, 我们想监视视, data中的对象的某一个属性 data(){ return { student:{ age:10, sex:"男" } } }上面的属性, 我们想监视 student.age 的属性, 此时我们的watch 应该是这样写的watch:{ 'student.age':function(newvalue,oldvlaue){ ...... }}这样, 我们就可以监视到 student.age的属性的变化,原创 2021-12-08 22:15:38 · 511 阅读 · 0 评论 -
ES6 set数据类型 对数组去重, 求交集,并集,差集
Es6 新增了一个 set数型 先来看一下set 的操作首先, 我们的 html 页面都是 es5的不支持 es6的语法, 所以我们要使用 babel 来编译一般我们前端使用的脚手架, 如 vue react 等不会有这些问题因为已经集成了, 但是我们在 .html文件中写 es6 语法的js 时, 就要引入两个 js文件, 如下图上图中的红线地方, script 的type = “text/babel”先看一下 set 的操作 let s1 = new Set(); let原创 2021-12-07 21:52:01 · 475 阅读 · 0 评论