前端
关注
分享
扫一扫
周皮皮皮皮皮皮
这个作者很懒，什么都没留下…
展开
-
webpack和vite: Gzip打包压缩
Gzip压缩是一种http请求优化方式，通过压缩文件体积来提高请求加载速度。需要前端打包生成.gz后缀的文件，同时nginx配置文件启动gzip原创 2023-03-13 11:06:21 · 1564 阅读 · 0 评论 -
前端 数组去重
一、普通数组去重：利用es6的new Set实现。二、对象数组去重：利用数组方法reduce获得。原创 2022-09-26 17:37:47 · 244 阅读 · 0 评论 -
Taro UI 表单验证
前提其实这个很久之前就想写了，但是因为最近一直在搞vue3，就拖到现在了。TaroUI对表单的验证不是很友好，所以写了个表单组件，涵盖验证功能。原创 2022-08-01 10:52:02 · 1543 阅读 · 1 评论 -
taro图片上传压缩
需求：taro开发h5，需要压缩上传图片，利用canvas绘制进行压缩原创 2022-06-21 17:47:33 · 1062 阅读 · 0 评论 -
uniapp 蓝牙连接测温仪
需求：app通过蓝牙连接硬件测温仪，使用uniapp的ble蓝牙连接原创 2022-06-17 11:07:57 · 1191 阅读 · 0 评论 -
Taro（React+typescript）+Taro Ui 踩坑
前提：因为需要做个采集的h5，想用React写，因此选择了Taro+Taro UI，其实之前也写过，但是在正式项目中并没有使用过，因此踩了一些坑原创 2022-06-15 17:12:46 · 1321 阅读 · 0 评论 -
uniapp 前端导出excel
需求：app前端导出excel，不需要后台原创 2022-06-13 11:38:45 · 3261 阅读 · 5 评论 -
地图飞线图 echart+高德地图实现
前提：其实这个东西已经做了很久了，但是因为昨天他突然不显示了，所以重新整了一下实现效果：一、引入echart的两个js和高德地图<!-- 引入echarts --><script src="./static/js/echarts.min.js"></script><script src="./static/js/echarts-amap.min.js" charset="UTF-8"></script><!-- .原创 2022-05-19 10:58:00 · 2324 阅读 · 0 评论 -
签名组件 微信小程序/Vue
一、微信小程序<template> <div class="bmxt box-jwbs"> <div class="content-jwbs"> <div> 请在下面方框中使用正楷字体签名 </div> <div class="box-autograph"> <canvas class="firstCanvas"原创 2022-03-10 10:10:46 · 1575 阅读 · 0 评论 -
uni-app 打开文件(文件或文件流)
需求：uniapp可以在平板上面打开excel文件或word文件，可以用wps打开后打印1. 创建个koa项目模拟后台返回二进制文件流const router = require("koa-router")();const xlsx = require("node-xlsx");router.get("/excel", async (ctx, next) => { const res = [ ["name", "age"], ["wuliu", "111"],原创 2022-02-17 10:35:26 · 6133 阅读 · 3 评论 -
uni-app 踩坑
开头：最近做一个平板app，比较简单，为了快速开发上手，所以用uniapp，踩了一些坑相关链接：uni-app官网一、开发工具+基础模板1. 使用HBuilder X编辑器进行开发DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架2. 新建项目，选择uni-app默认模板，其他的配置（store、router、api等）自己加上去3. ui库（uni-u原创 2022-01-24 17:16:16 · 8846 阅读 · 0 评论 -
vue 图片拖拽验证码
思路：1. 需要从后台获取：小拼图的初始位置y,小拼图的图片以及背景图片；2：图片滑动之后将小拼图的x和y传给后台一、封装图片拖拽code组件<template> <div id="slideVerify" class="slide-verify" :style="widthlable" onselectstart="return false;"> <canvas ref="canvas" :width="w" :height="h" />原创 2021-04-23 16:58:35 · 1882 阅读 · 2 评论 -
flv.js的使用
需求：因为之前项目用的是vue-video-player的flash模式播放flv，而谷歌浏览器在2021并不支持flash，因此采用哔哩哔哩团队开发的flv.js进行替换1. 引入依赖npm install flv2. 代码<videoclass="video-playervjs-custom-skin"ref="videoElement"controlsautoplaymuted>You...原创 2021-04-12 17:36:14 · 693 阅读 · 0 评论 -
vite+vue3+element-plus搭建项目 踩坑
需求：因为vue3出了一段时间了，element也出了基于vue3.x版本的element-plus，vite打包听说很快，尝试一下。一、用vite构建项目npm install -g create-vite-appcreate-vite-app vite_demonpm install二、安装element-plus依赖，在main.js全局引入PS：element-plus不兼容element-ui，一些提示类组件前面要加El，比如ElMessagenpm install e原创 2021-03-17 17:39:43 · 3137 阅读 · 3 评论 -
node 复制图片到另外一个文件夹
代码const fs = require("fs");var files = fs.readdirSync("./public/1/"); // 需要复制的所有图片files.forEach(item => { var readStream = fs.createReadStream("./public/1/"+ item); // 被复制文件 // 创建一个写入流 var writeStream = fs.createWriteStream("./public/原创 2021-03-17 17:42:43 · 912 阅读 · 2 评论 -
node express 导入excel转成想要的excel格式下载
需求：根据不同考试，导入不同格式的excel，再将excel转成想要的格式一、创建一个experss项目express 文件名二、使用html模板1. npm install ejs2.app.jsvar ejs = require("ejs"); // 引入ejsapp.engine("html", ejs.__express);app.set("view engine", "html");三、界面文件 index.html<!DOCTYPE html>原创 2021-03-04 17:54:35 · 446 阅读 · 1 评论 -
vue 在线看PDF(PC端和移动端)
一、PC端：直接用iframe，让后台返回文件流就可以看到了<template> <div> <!-- PDF --> <iframe :src="url" width="100%" height="900px"></iframe> </div></template><script>export default { data() { return {原创 2021-01-21 14:28:31 · 953 阅读 · 0 评论 -
element-ui table树结构 增删查改+全选 踩坑
前提：项目表格是树结构，增删查改不能刷新整个表格，因为官网关于树结构表格的方法比较少，所以踩坑分享下一、关于全选坑：树结构里面它只勾选第一层的数据，子数据都是没有勾选的解决方法：@select-all=“selectAll” 写个方法自己全选....不过这也是有坑的，这种方法只能在一次性拿到tableDatad的情况下使用。我试了异步加载树结构好像没拿到tableData，所以不能进行全选代码：<el-table ref="table" :data="tableData"原创 2020-05-28 14:47:10 · 2400 阅读 · 3 评论 -
DEC解密
一、安装crypto-jsnpm install crypto-js二、代码import cryptoJs from 'crypto-js'const key = 'ABCDEFGFEDCBA1234567890_' // 秘钥export const encryptDes = message => { const keyHex = cryptoJs.enc.Utf...原创 2020-02-26 16:00:16 · 828 阅读 · 2 评论 -
微信小程序调用摄像头
一、调用摄像头与身份证对比验证 摄像头层级太高，要用cover-view和cover-image写按钮和icon，才能覆盖在camera上二、代码<template> <div class="bmxt container-camera"> <camera device-position="front" flash...原创 2019-12-30 18:06:48 · 12257 阅读 · 5 评论 -
微信小程序（2）
前提：最近因为被派去别的组，开发微信小程序，遇到了很多坑，记录一下一、框架 1. mpvue 2. vant-ui二、踩过的坑1. 分包 因为有一次提交的时候，提示主包文件过大，不能超过2M，所以就需要将代码分包 需要注意的是：tabBar标签所需要的路由链接，都必须写在主包里面，packageA和packageB必须在pages文件下 ap...原创 2019-12-30 18:04:41 · 371 阅读 · 0 评论 -
浏览器播放语音SpeechSynthesisUtterance
目的：因为公司项目需要来浏览器播放语音，看了科大讯飞的产品，后面有发现html5有原生的api，更加方便，所以使用了一、语音合成和语音识别 “语音识别(Speech Recognition)”目前的就Chrome浏览器和Opera浏览器默认支持，但是，“语音合成(Speech Synthesis)”的兼容性要好上太多了Chrome，FF，Edge，Safari等等都是支持的。二...原创 2019-10-25 11:43:35 · 9844 阅读 · 5 评论