自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

pixle的博客

前端领域,javascript,vue,uniapp

  • 博客(63)
  • 收藏
  • 关注

原创 electron-vite工具打包后通过内置配置文件动态修改接口地址实现方法

使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包,对于多环境切换或者频繁变更接口地址就显得麻烦。如果能在安装目录添加一个可配置文件,通过修改配置文件内容改变接口地址问题将迎刃而解。这里记录下一种实现方法。

2024-05-09 09:27:11 468

原创 vite-electron 静默打印功能实现

本文将介绍基于electron-vite构建工具下vue3项目内如何实现打印机静默打印功能,并以热敏打印机打印二维码为示例用代码实现该功能。

2024-04-23 14:03:34 1023

原创 web实现usb扫码枪读取二维码数据功能

通过上面介绍可以看出usb扫码枪虽然使用简单,但是限制多,只能满足一些特定场景,对用户一些不确定操作可能会影响读取成功率,这个时候也可以从产品设计上引导用户主动触发聚焦减少用户乱点击频率,提高成功率。

2024-04-02 16:53:10 1410

原创 Web Serial API串口通信,实现web和electron扫码枪读取数据

本文将讲述Web Serial API简单应用,以扫码枪为示例,通过代码实现web端读取扫码枪扫码内容。

2024-02-23 16:26:10 2933 10

原创 vue3 element-plus 省市区选择器组件封装

vue3封装一个省市区选择器组件,通过element-plus Cascader 级联选择器实现

2024-02-20 11:17:43 381

原创 一文读懂vue+scss实现主题换肤功能

web实现主题换肤方案有很多种,例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理(less/scss)方案,这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量,这个变量可以是HTML标签属性值也可以是类名,这个变量位置既可以是最顶层也可以是需要换肤地方(子节点)。变量如果是类名的话需要设置一个独一无二的名称,这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发,所以更好的选择变量是属性值。//顶层方案。

2024-01-26 15:08:44 1671

原创 electron+vite+vue3 快速入门教程

本文将介绍electron基本使用和构建electron+vite+vue3脚手架开发项目electron框架对web开发人员来说非常友好,无须了解原生开发技能,就能通过web技术进行桌面应用开发,大大减少学习成本,一套代码能快速构建生成多端应用,也大幅减少了开发成本。简言之,electron开发可以看成是桌面功能开发+纯web页面开发,桌面功能开发在主进程调用Electron API,而web页面开发就是html,css,js技术栈。

2024-01-17 14:45:52 2133 1

原创 web端播放rtsp视频流(摄像头监控视频)教程及window下开机自启动部署

像海康大华一些摄像头或者直播源 为rtsp视频流,想在web上播放必须进行协议转换。已知一些方案例如rtsp转rtmp需要flash,现在浏览器基本不支持flash。还有转hls或者flv这些延迟都比较高。经过实践对比比较理想方案是 经转码后视频流通过websocket传送给客户端在将视频流解码成图片通过canvas渲染出来,延迟比较小基本在1s以内。所用工具(插件)为ffmpeg+node(node-rtsp-stream)+jsmpeg。

2024-01-09 15:06:17 4921 23

原创 express+mongoDB开发入门教程之mongoose使用讲解

本文将讲述Mongoose的入门开发教程,以及通过一些示例演示对mongoDB数据库的增删改查操作。

2024-01-03 16:19:55 1449 2

原创 express+mongoDB开发入门教程之mongoDB安装

MongoDB是一个基于分布式文件存储的数据库。是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似json的bson格式,因此可以存储比较复杂的数据类型,可为WEB应用提供可扩展的高性能数据存储解决方案。传统关系型数据库由数据库、表、记录、3个层次概念组成,而MongoDB由数据库、集合、文档组成。

2024-01-03 16:02:40 1113

原创 node.js express框架开发入门教程

node.js express框架开发入门教程,包括express-generator生成器、nodemon、基础路由、中间件、模版引擎介绍、app.js解读等也可以使用其他模版引擎例如jade、mustache、dust、ejs等,不加--view=pug默认jade引擎,官方已弃用,现在推荐用pug。模版引擎主要用来服务端渲染HTML,在运行时,模板引擎将模板文件中的变量替换为实际值,并将模板转换为发送给客户端的 HTML 文件加载依赖启动项目npm start。

2023-12-27 15:31:58 1616

原创 uniapp H5、小程序、APP端自定义不同运行环境(开发、测试、生产)、自定义条件编译平台、以及动态修改manifest.json值讲解

企业项目开发流程上一般都要配置多个运行环境(不同的服务器请求地址)。不同环境有不同用途,主要用于区分开发、测试、上线,对应的环境称为开发环境、测试环境、生产环境。实际开发中经常要在不同环境进行联调或者打包,对于uniapp每次都要手动修改服务请求地址很是麻烦,有什么方法能实现按需运行按需打包呢,答案是——自定义条件编译平台HBuildex默认编译平台例如有H5端、小程序端、APP端,像小程序端细分还有微信小程序,钉钉小程序等,不同编译平台我们可以用条件编译来指定特殊代码运行在哪种平台上。

2023-11-24 16:30:52 4345

原创 微信小程序隐私协议引入开发教程和uniapp 最佳实现方式

微信小程序从2023年9月15日开始,涉及处理用户个人信息的小程序开发者,需通过弹窗等明显方式提示用户阅读隐私政策等收集使用规则。为规范开发者的用户个人信息处理行为,保障用户合法权益,微信要求开发者主动同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则,方可调用微信提供的隐私接口。简而言之,就是调用某些涉及用户隐私api比如获取用户位置(wx.getLocation)、选择照片(wx.chooseImage)等api(隐私接口)前需要弹出隐私政策告知用户取得同意后方可正常使用功能。

2023-09-29 23:33:49 1404 6

原创 web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程

本文将讲述如何利用高德地图JS API实现地图标点、聚合点、自定义图标、点击窗体信息展示等基本功能实现,结合实际项目中遇到场景需求进行演示聚合点自定义样式通过设置renderClusterMarker字段配置渲染函数,并在渲染函数中通过dom操作生成样式节点插入聚合点父节点上//聚合点实例renderClusterMarker:renderClusterMarker,//自定义样式渲染});//渲染函数//自定义图标背景//聚合个数。

2023-08-18 21:47:30 4462 7

原创 nvm安装和使用,对node.js版本进行切换控制

脚手架项目一些依赖模块对于node版本有兼容性问题,如果平时开发既有新项目也有老项目,经常需要切换对应的node版本使得项目能正常跑起来,如果每次都去卸载node版本重新安装就非常麻烦,还好有nvm工具,能帮助我们快速切换node版本。

2023-07-17 16:59:55 1396

原创 vue移动端手把手教你封装一个可移动悬浮窗、可移动打开扇形悬浮按钮组件

本文将手把手教你封装一个可移动的悬浮框组件,利用悬浮窗在进阶封装一个可展开可移动的扇形悬浮按钮组件。本案例将以移动端为背景采用uniapp技术实现一个三端(H5、小程序、APP)通用的悬浮组件。

2023-06-18 17:49:26 4685

原创 低代码导出前端代码遇到一些字符串和数据处理记录

最近在做纯前端低代码导出代码功能,遇到的一些字符串和数据对象处理方法总结记录。

2023-06-17 14:54:40 189

原创 uniapp APP端在线升级功能实现讲解——强制或可选升级,下载进度显示

本文主要讲述uniapp APP在线升级功能实现,并用代码演示包括强制升级、可选升级、下载进度显示、下载自动安装等功能,示例代码已经过测试可结合实际开发场景做调整直接引入使用

2023-06-16 15:20:33 14002 64

原创 app签名文件 SHA1、SHA256和MD5值查询

其中 xx.keystore换成自己的签名文件名称以及路径。新版jdk查不出md5值可使用下面命令查询。

2023-04-27 15:32:50 606 1

原创 vue脚手架支持 es11 ??和?.语法——插件安装记录

?语法?.语法。

2023-03-25 21:30:33 430 1

原创 uniapp APP和H5正确使用echarts总结和填坑说明

对于一些频繁的dom操作,uniapp提供了一个renderjs方案,是一个运行在视图层的js,大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力,只支持h5和app端。app端使用echarts自然采用renderjs方案。h5端使用区别不大,因为h5逻辑层和视图层实际运行在同一个环境中,相当于使用 mixin 方式。小程序依然采用wxs方案,可以使用u-chart等第三方插件。

2023-02-25 12:46:00 4068 6

原创 vue+uniapp瀑布流布局多种实现方式

瀑布流布局是网页设计常见的一种布局,一般用于图片多列展示。列宽固定,图片根据自身高度自适应交错排列。

2023-01-08 13:54:01 9650 11

原创 uniapp App端后台间隔时间发送定位功能实现

uniapp开发app端时候,某些业务场景需求:在后台不间断(间隔一定时间)向服务器发送用户定位信息,不管页面是否关闭,app是否处于前后台,发送位置信息功能必须持续,直到某一个页面操作行为触发事件才停下来。

2022-12-12 15:53:08 3631 25

原创 vue element-ui表格(el-table)数据导出execl文件

功能实现:element UI 的el-table数据导出为execl文件使用到插件:xlsx、file-saver。

2022-11-21 15:45:53 2943 4

原创 vue自定义指令——input输入类型限制(数字、浮点、整数、英文等),解决中文输入法双向绑定失效问题

实现一个vue自定义指令——输入框(input,el-input)输入内容类型限制,解决中文输入法双向绑定失效问题,多种类型支持,数字类型,浮点类型、英文类型、整数类型、四则运算等。

2022-11-12 12:27:03 5629 5

原创 JS Date原型增加format(日期格式化)函数

【代码】JS Date原型增加format(日期格式化)函数。

2022-10-13 11:08:26 918

原创 vue自定义指令实现图片懒加载

图片懒加载原理1.初始化src属性设置为默认图片(占位图片)2 .img标签自定义一个属性存储图片真实url3.监听页面滚动,当图片出现在可视区域把真实url赋值给src前2步都很容易实现,第三步怎么判断图片是否出现在可视区域?通过element.getBoundingClientRect()可获知图片顶部和底部分别距离可视区域顶部距离,假设。

2022-10-04 19:43:26 1238

原创 海康视频H5插件 v2.0.0开发总结

海康视频h5插件开发教程,封装好组件分享

2022-10-04 13:01:08 5123 16

原创 JS通过原型实现数据深度拷贝,兼容所有类型值

深拷贝,原型实现

2022-10-03 21:34:18 304

原创 海康视频WEB插件 V1.5.2 开发总结

海康视频插件v.1.5.2开发教程总结,vue版本开箱即用组件分享

2022-09-24 14:12:46 10992 31

原创 JS树形结构数据筛选过滤递归算法实现

树形结构经常遇到顶部有搜索功能需求,JS树形结构数据筛选过滤递归算法实现

2022-09-08 15:45:47 3563 4

原创 JS树形结构遍历获取目标对象父级组成名称

JS树形遍历获取目标对象父级组成名称

2022-08-06 16:07:40 866

原创 js 手机号、邮箱、身份证等常用格式校验总结

js格式校验

2022-06-14 10:13:51 963

原创 js日期处理常用方法总结

js常用日期处理方法

2022-06-14 10:02:51 886

原创 html内容区域转pdf

html内容区域转pdf

2022-06-13 14:52:47 341

原创 vue3.2+ts 父子组件传值

child.vue<template> <div class="child"> <span>{{title}}</span> <button @click="onClick">跳转</button> </div></template><script lang="ts" setup> interface Props{ title?:

2022-05-05 16:51:35 951 1

原创 JS 树形结构数组遍历方式(深度遍历+广度遍历)

数组结构如下: let treeData=[ { id:1, children:[{ id:2 },{ id:3, children:[ { id:5 } ] }] },{ id:4 } ]深度遍历对单个元素由浅到深,一层层递进循环扒取数据方法1:for循环 function flatten(arr){ let fl

2022-03-03 16:44:03 2163 3

原创 手写一个简单Promise

function _Promise(fn) { var that = this; this.status = 'pending'; this.value = ''; this.error = ''; this.onSuccess = []; this.onReject = []; function resolve(value) { if (that.status == 'pending') { that.value = value; ..

2022-02-25 11:35:35 249

原创 uniapp vue3 <script setup> 用法总结

1.computed:<template> <view> <view>{{getTitle}}</view> <view>{{getMsg(0)}}</view> </view></template><script setup> import {computed} from 'vue'; //不带参数 const getTitle=com

2022-02-17 13:53:23 6460

原创 vue3 数学公式使用

vue3数学公式

2022-01-22 14:03:49 2311 1

web端播放rtsp/rtmp视频流demo

web端播放rtsp/rtmp视频流demo ,fmpeg+node(node-rtsp-stream)+jsmpeg,延迟较小方案,1s内

2024-04-02

微信小程序隐私协议引入组件demo

微信小程序隐私协议引入demo,全局封装api调用 this.$privacyCheck({ agree:()=>{}, disAgree:()=>{}, complete:()=>{} })

2023-09-30

可移动悬浮窗,可移动扇形展开悬浮按钮组件

uniapp可移动悬浮窗,可移动扇形展开悬浮按钮组件demo,兼容多端

2023-06-18

uniapp APP端安卓在线升级功能

uniapp APP端安卓在线升级功能——强制或可选升级,下载进度显示,demo

2023-06-16

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除