- 博客(83)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 TcPlayer腾讯播放器
TcPlayerLite业务需求：直播过程中需要不断的拉流进行播放，遇到网络突然中断的情况时，直播推流中断会中断；此时因为播放器拉流失败无法正常播放而导致播放器会播放失败。当直播恢复推流恢复时候，播放器需要自动恢复拉流来自动恢复直播播放。综合了常用的播放器做对比，对比结果如下：阿里云播放器（aliplayer）推流中断时播放失败，此时其可以设置指定重复拉流次数的恢复拉流尝试，当达到尝试的次数时，播放器会报错，提示信息不是很明显，当再次恢复推流时候，会一直停留在播放失败的页面；腾讯播放器（TcPla
2020-11-25 14:50:03
4945
4
原创 aliplayer视频点播加密播放
Aliplayer视频点播加密播放aliplayer视频点播分为Flash和HTML5两个版本，移动端不支持Flash播放器。Flash播放器兼容IE8+，HTML5播发器支持比较新的浏览器，对浏览器的版本要求较Flash播放器对浏览器的版本的要求要高一些。其中：h5播放器在移动端不支持flv和rtmp的播放播放flv、m3u8视频，PC端支持的浏览器，需要启用允许跨域访问HLS标准加密与MPS私有加密对比加密类型/设备环境iOSAndroidPC标准加密 HLS√
2020-11-03 09:06:23
1556
原创 vue微信H5页面鉴权
VueCLI微信授权登录前言使用Vue开发的SPA项目H5版需要在微信端进行微信授权登录。此次项目Mobile端与PC端是部署在同一服务器的不同目录下的。故移动端和PC端的访问路径是保持一致的，只是子域名有所差异。为了保持路径的一致性，移动端也采用了同PC端一样的路由模式，即history模式。History模式和Hash模式vue SPA单页面项目中使用的vue-router路由有hash模式和history模式两种，其默认是hash模式。history模式与hash模式的区别主要有：hash
2020-10-23 09:19:24
1457
原创 vue history模式微信自定义分享
history模式微信自定义分享前言最近做的Vue SPA项目涉及到微信自定义分享，最初只是在指定页面下实现微信的二次分享功能。但是因为移动端使用的是vue-router的history模式，所以在iOS端微信和Android端微信分享出来的截然不同，大多数是iOS端微信会分享失败。上网查询了一些文档说是iOS端微信不支持pushState的H5新特性。还有就是iOS端微信记录的URL是首次访问网页时的网址，所以在使用window.location.href获取当前网址来换取微信的签名校验信息时候就会导
2020-10-23 09:10:07
2064
2
原创 WangEditor富文本编辑器图片拖放
富文本编辑器（图片可以100%宽屏）业务需求：根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor富文本编辑器。最初使用的是vue2Editor富文本编辑器，vue2Editor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果
2020-10-22 16:51:47
2484
4
原创 获取本地上传文件信息
通过此次文件上传处理分析，可以依据文件后缀名判断指定的文件格式类型，也可以通过上传的文件对象“file.type”来获取文件类型。两种方式都可以处理文件类型，早期开发，主要是通过判断文件后缀名的方式来区分文件类型，有些时候命名格式有些不规范，处理起相对来说容易出现差错。此次判断采用的文件file对象的方式来判断文件类型。相对来说，文件后缀名方式判断文件类型比文件对象“file.type”方式获取文件类型来说稍微简单点，也容易判断些，但是在明明不规范的情况下容易产生问题。...
2022-08-25 22:37:49
503
1
原创 「链判断运算符」“?.”和「Null 判断运算符」“??”构建失败
新的逻辑判断运算符使用起来很顺手，同时也一定程度上减少了因为逻辑判断导致的数据处理错误。最初判断一个多层次的数据对象是否存在某一个值，需要每层都做数值的判断处理，这样处理起来十分的麻烦，处理判断逻辑写的也比较多。自从使用了链式判断运算符和空值判断运算符，只要梳理清楚自己想要取的值，做相依的判断即可，原来好几个逻辑与和逻辑或的判断，现在一句话就可以搞定，高效的同时减少了代码量，也减少了逻辑判断，防止不必要的错误出现，从而提升工作效率，早点关电脑下班！！！🚗。...
2022-08-25 22:36:49
583
原创 Element UI之Select选择器优化
「????????????????」场景近期着手开发基于ElementUI的后台管理系统，偶然间发现「el-select」下拉选择时候遇到一个问题，当渲染下拉选项的「options」的数据量过多时「本项目中的数据条目已过万」，就会出现下拉选择器卡顿的情况，尤其是在模糊匹配过滤的情况下，显得十分的卡顿。初始化选择器的时候，也会点击无反应，有时候需要点击多次才可出现「dialog」弹窗(本次下拉筛选在弹窗中实现)。翻阅...
2022-01-09 21:25:00
118
原创 ElementUI之select多数据加载优化
「????」场景近期着手开发基于ElementUI的后台管理系统，偶然间发现「el-select」下拉选择时候遇到一个问题，当渲染下拉选项的「options」的数据量过多时「本项目中的数据条目已过万」，就会出现下拉选择器卡顿的情况，尤其是在模糊匹配过滤的情况下，显得十分的卡顿。初始化选择器的时候，也会点击无反应，有时候需要点击多次才可出现「dialog」弹窗（本次下拉筛选在弹窗中实现）。 翻阅多篇博客笔记之后，最终找到一个可以解决问题的方案，现将此次优化方案记录成为笔记，以便于日后遇到类似问题的时候便于查
2021-09-25 15:33:37
2405
2
原创 VUE3后台管理系统【路由鉴权】
????前言：在“VUE3后台管理系统【模板构建】”文章中，详细的介绍了我使用vue3.0和vite2.0构建的后台管理系统，虽然只是简单的一个后台管理系统，其中涉及的技术基本都覆盖了，基于vue3的vue-router和vuex，以及借助第三方开源插件来实现vuex数据持久化。前边只是介绍了vue后台管理系统的页面布局，以及一些常用的插件的使用，如：富文本编辑器、视频播放器、页面滚动条美化(前边忘...
2021-06-08 08:36:00
83
原创 vue3后台管理系统（模板）
系统简介此管理系统是基于Vite2和Vue3.0构建生成的后台管理系统。目的在于学习vite和vue3等新技术，以便于后续用于实际开发工作中；本文章将从管理系统页面布局、vue路由鉴权、vuex状态管理、数据持久化、用户信息加密等方面进行介绍和记录；这也是我边学习边实践的过程，此次记录一是方便自己日后开发过程中有用到时候便于借鉴和复习，再次是为了初学vue3和尝试上手vite2和vue3搭建管理系统的小伙伴提供一些学习方法和技术点；本Vue后台管理系统使用的技术点主要有：vite2、vue....
2021-06-07 16:16:04
10388
10
原创 ViewUI DatePicker日期范围限制
????场景需求近期着手开发酒店住宿相关功能模块，其间涉及到对日期进行相应条件的限制。最初因为公司网络问题，无法访问ElementUI网站进行开发，偶然间发现ViewUI，感觉代码看起来比较简洁，也符合我的选择需求，最后就选择了ViewUI进行开发。当初使用它时，还是免费的，现在逐步商业化了，但是需要使用高级功能的话可能就需要付费了，感觉没有ElementUI香了。但是没办法，已经上了????了，再下????就难了。此次主要就ViewUI DatePicker日期选择器的相关使用技巧做相应的介绍。因为在
2021-04-13 09:17:41
583
4
原创 文件导出
????场景需求开发后台管理系统时，难免会涉及到文件的上传和文件的导出。现在前端上传文件主要采用“二进制文件流”的形式来上传文件。上传主要方式有以下方式：前端直接传递云存储或者自身服务器，来获取上传文件的云端绝对地址；前端借助后台来实现文件的存储和上传，然后经后台处理来返回文件存储路径。上传文件也根据文件格式进行分类存储或者在上传前进行文件的大小和格式的校验处理，以防乱传递垃圾文件消耗云盘...
2021-04-08 08:38:00
26
原创 Vue I18n国际化语言切换
前言：近期业务需求，需要对原有项目进行国际化处理，该项目是基于Vue2+VantUI2.x的移动端H5SPA项目。上网查阅了相关资料，大多推荐使用 vue-i18n 国际化插件来实现不同语言的切换。经过测试，已基本实现中文和英文两种语言的切换。现在主流的前端UI框架也支持语言国际化，若项目中使用UI框架比较多，建议参考UI官方文档来配置国际化。Vue I18n 通过简单的API来实现项目的国际...
2021-03-15 11:25:00
24
原创 vue-i18n 语言国际化管理
Vue I18n 国际化前言：文档：使用：前言： 近期业务需求，需要对原有项目进行国际化处理，该项目是基于Vue2+VantUI2.x的移动端H5SPA项目。上网查阅了相关资料，大多推荐使用 vue-i18n 国际化插件来实现不同语言的切换。经过测试，已基本实现中文和英文两种语言的切换。 现在主流的前端UI框架也支持语言国际化，若项目中使用UI框架比较多，建议参考UI官方文档来配置国际化。Vue I18n通过简单的API来实现项目的国际化；该插件除了简单的翻译之外还支持数字、日期时间等本地化
2021-03-10 17:22:01
193
原创 vue-i18n语言国际化
前言： 近期业务需求，需要对原有项目进行国际化处理，该项目是基于Vue2+VantUI2.x的移动端H5SPA项目。上网查阅了相关资料，大多推荐使用 vue-i18n 国际化插件来实现不同语言的切换。经过测试，已基本实现中文和英文两种语言的切换。 现在主流的前端UI框架也支持语言国际化，若项目中使用UI框架比较多，建议参考UI官方文档来配置国际化。Vue I18n通过简单的API来...
2021-03-10 17:10:00
26
原创 JS检测移动设备环境
通过JS检测WeChat、Android、iOS环境代码块：// 检测微信状态下的手机设备环境function checkHJByWeChat() { // 设备变量区分 let web = navigator.userAgent, isiOS = !!web.match(/\i[^;]+;(U;)? CPU.+Mac OS X/), isAndroid = web.index...
2021-02-16 09:35:00
81
原创 禁用鼠标右键菜单
禁止右键菜单 || 禁止键盘事件1、禁止鼠标右键菜单// 屏蔽鼠标右键菜单document.oncontextmenu = function () { return false;};<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <lin...
2021-02-08 14:59:00
33
原创 移除生产环境console.log
业务需求：随着项目开发迭代，代码越来越多，在开发环境时，大多需要console.log打印日志做相应的处理，还有就是通过console.log()日志的状态来定位bug的位置。协同开发过程中，每个开发成员都也有可能打印console.log，有时候可能忙于疏忽，忘记注释掉打印的日志，也有肯能打印的信息是一些涉及用户个人信息安全的日志信息。当上生产环境时，这些日志信息都不应该出现在控制台。若是一...
2021-02-08 08:52:00
45
原创 iView文件上传（OSS直传）
前言：前期项目中使用了第三方的开源UI框架 View UI（前期叫 iView）。总体感觉该UI框架还是比较不错的。但是现在View UI商业化了，部分功能需要付费才能使用。近期做的功能模块需要上传文件，就想到UI中的Upload上传 模块，思前想后决定用它来实现文件上传。之所以选用UI自身的文件上传，主要是因为其可配置，还有上传进度条。本次文件上传因为要涉及到大文件上传，上传等待时间有点长，为了实时显示上传的进度，故采用Upload上传，其自身带有可配置的上传进度条以及上传文件列表，正好可以满足我的需
2021-01-18 10:35:51
902
原创 移除vue生产环境console.log
移除vue生产环境console.log业务需求：随着项目开发迭代，代码越来越多，在开发环境时，大多需要console.log打印日志做相应的处理，还有就是通过console.log()日志的状态来定位bug的位置。协同开发过程中，每个开发成员都也有可能打印console.log，有时候可能忙于疏忽，忘记注释掉打印的日志，也有肯能打印的信息是一些涉及用户个人信息安全的日志信息。当上生产环境时，这些日志信息都不应该出现在控制台。若是一个一个去找，去注释代码，这肯定不现实。现在可以通过第三方插件来统一处理
2021-01-13 16:10:57
299
原创 Vuex数据持久化存储
业务需求：在基于vue开发SPA项目时，为了解决页面刷新后数据丢失的问题，我们一般都是将数据存储在localstorage或sessionstorage中；当数据需要全局处理统一管理时，我们也会借助于vue官方提供的vuex来进行数据的统一管理。vuex相比localstorage或sessionstorage来说，存储数据更安全些。与此同时，vuex也存在一些弊端，当页面刷新后，vuex中state存储的数据同时也会被更新，vuex中存储的数据不能持久化，需要监听处理来维持vuex存储的数据状态持久化。
2020-12-24 10:19:13
1072
原创 微信自定义分享&限制分享
微信自定义分享&限制分享一、微信自定义分享【 (*￣︶￣)微信官方文档 】业务需求：开发过程中有些业务需要借助微信进行推广和宣传。难免需要使用微信提供的一些功能，比如微信的二次分享（也叫微信自定义分享）功能来方便用户查阅和了解。微信公众号提供的自定义分享功能涉及的模块主要有以下几类：自定义“分享给朋友”及“分享到QQ”（1.4.0）；自定义“分享到朋友圈”及“分享到QQ空间”（1.4.0）；获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。【提示】：新版的微信自定义分享相对
2020-12-09 09:16:56
968
2
原创 微信支付【 wx.chooseWXPay、WeixinJSBridge.invoke】
微信支付【 WeChatPay 】wx.chooseWXPay、WeixinJSBridge.invoke业务需求：现在涉及到微信相关的项目有很多，主要涉及到的功能有**【微信自定义分享、微信支付等】。开发微信公众号H5页面时，需要使用微信支付进行金融支付。当微信支付完成【支付成功 点击“完成”】时，需要出发相应的业务逻辑；比如：支付成功时跳转到订单页面；支付失败时跳转到下订单页面；支付取消时保持当前订单页面不变等。前期开发微信H5页面时，大多考虑的就是【支付成功】之后如何处理，因为是刚接触微信支付
2020-11-26 08:36:47
2141
原创 微信支付（WeixinJSBridge.invoke、wx.chooseWXPay）
微信支付【 WeChatPay 】WeixinJSBridge.invoke、wx.chooseWXPay业务需求：现在涉及到微信相关的项目有很多，主要涉及到的功能有【微信自定义分享、微信支付等】。开发微信公众号H5页面时，需要使用微信支付进行金融支付。当微信支付完成【支付成功 点击“完成”】时，需要出发相应的业务逻辑；比如：支付成功时跳转到订单页面；支付失败时跳转到下订单页面；支付取消时...
2020-11-26 08:34:00
51
原创 VSCode插件（前端）
Web前端常用VSCode插件web前端常用插件简介Atom one Dark ThemeAtom Dark主题Auto Close Tag自动关闭标签Auto Rename Tag自动重命名标签Beautify格式化代码Bracket Pair Colorizer 2代码块折线提示Chinese （simplified）Language Pack for Visual Studio Code中文简体Color Info颜色板CSS Peek查看CSS样
2020-10-26 17:29:02
446
1
原创 Vue二维码插件
二维码生成插件一、vue-qr二维码插件（Image版）1. 安装// 使用node的npm安装 npm install vue-qr --save// 使用yarn安装 yarn add vue-qr2. 引用项目<VueQr draggable="false" :correctLevel="3" :dotScale="1" :logoSrc="logo" :margin="15" :size="256" :text=
2020-10-26 17:25:37
2252
原创 axios数据请求
axios数据请求一、axios安装使用npm安装axiosnpm install axios使用cnpm安装axioscnpm install axios使用yarn安装axiosyarn install axios使用cdn链接axios<script src="https://unpkg.com/axios/dist/axios.min.js"></script>二、请求数据方法get请求：方式一：axios({ // 默
2020-10-26 17:19:15
152
原创 H5视频播放控制
视频播放控制&默认横屏播放一、视频列表中控制只允许一个视频播放// 获取DOM中所有的video标签var videoTags = document.querySelectorAll('video');// 控制播放的视频暂停var pauseAll = function () { // 改变this指向 var self = this; [].forEach.call(videoTags, function (i) { i !== self && i.p
2020-10-26 12:54:56
2410
原创 九宫格抽奖逻辑梳理
8、九宫格抽奖逻辑梳理一、页面布局图一： 【默认九宫格图】图二： 【九宫格占位图】HTML页面代码：<!-- center为九宫格区域 --><div class="center"> <!-- box为九个格子，DOM拼接区域 --> <ul id="box"> <!-- li中下标从0开始，0-8共九个格子 --> <li class="prize jp-0 activ
2020-10-23 10:08:33
2517
原创 vue2editor富文本编辑器（图片拖拽）
富文本编辑器vue2-editor在后台管理系统开发的过程中，富文本编辑器是经常会用到的一种文本编辑工具。目前主流的富文本编辑器有很多，但总有一款是符合自己需求的。在周末花费了大约半天的时间，尝试了许多富文本编辑器，大体上功能都相差无几。主要是对富文本中图片的处理，各个种类的富文本对图片的处理差异还是挺大的。此处的所说的图片处理指的是图片的大小调整、位置调整、是否可以拖拽等。此次我使用的富文本编辑器是vue2-editor ,并结合实际情况进行了相应调整。vue2-editor 富文本编辑器是基于 vu
2020-10-23 09:39:56
1853
原创 web前端开发相关网站
web前端开发相关网站（更新中）阿里镜像站yarn下载https://npm.taobao.org/mirrors/yarn/Node.js下载https://npm.taobao.org/mirrors/node/git-for-windows下载https://npm.taobao.org/mirrors/git-for-windows/node-sass下载https://npm.taobao.org/mirrors/node-sass/Vue UI
2020-10-23 09:35:27
308
原创 iOS橡皮筋回弹
处理iOS端橡皮回弹效果近期开发的项目有一部分是与微信公众号相关的H5页面，在Android端微信上页面效果展示无异常，但是在 iOS端微信多多少少会出现一些意想不到的bug。此次主要针对移动端H5页面在iOS端产生的 橡皮回弹（橡皮筋效果）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。方案一：使用 inobounce.jsinobounce.js github地址在 html主页面的 header 标签中引入inbounce.js，即 。当引入此文件之后，iOS端整个页面都无法滑动
2020-10-23 09:29:50
1461
1
原创 阿里云oss图片上传
OSS文件上传简介：开发过程中，多多少少会用到图片上传、文件上传等，大多数都会选择第三方云服务提供的相关功能，比如阿里云、腾讯云、七牛云等等云服务提供商提供的文件存储运营商提供的服务。本次介绍使用的主要是阿里云的OSS文件直传，阿里云存储文件方式有多种，目前主要就工作中用到的阿里云oss文件直传做案例做笔记，以便于帮助有类似需求的同行及自己学习。注意事项：1、文件分类：主要是方便日后文件的管理，同时也便于查找。2、文件重命名：上传文件有时候会出现重名等问题，有时候会给使用者造成一定的影响，不利用用
2020-10-23 09:27:31
580
1
原创 Yarn、NPM包管理工具源设置
Yarn、NPM包管理工具源设置（解决yarn、npm下载安装慢的问题）Yarn 和 NPM （npx） 是主流的资源包管理工具，默认安装使用时，下载资源的速度非常慢。其主要原因是 npm 资源包默认的服务器在国外，当使用 yarn 和 npm 安装资源包时候，速度非常慢。为了解决下载速度的问题，大多使用阿里的 淘宝镜像（cnpm）来解决下载速度慢安装失等问题。安装淘宝镜像安装 淘宝NPM镜像 前默认已安装 Node.jsnpm install -g cnpm --registry=https:
2020-10-23 09:23:26
571
原创 vue路由URL拼接全局参数
vue-router地址栏URL拼接全局参数业务需求：vue单页面项目，需要在URL地址栏拼接固定的参数，在所有页面使用。默认采用vue路由的history模式；hash模式也可以同样适用。主要是在 vue-router 导航守卫的全局前置守卫中实现。即 vue-router 生命周期钩子函数 router.beforeEach 中进行路由拦截处理。主要代码：router.beforeEach((to, from, next) => { if (Object.keys(to.quer
2020-10-23 09:21:10
3302
原创 VantUI移动端rem适配
移动端 VantUI rem布局字体配置Vant UI组件库的样式默认使用的单位是 px，若需要使用 rem，则需要使用插件进行进一步的处理转换工具postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值插件安装使用 npm或者 yarn进行安装yarn add postcss-pxtorem --save-dev// ornpm install postcss-pxtorem --save-devya
2020-10-23 09:16:51
484
原创 微信页面关闭事件
微信l浏览器页面关闭事件需求：在微信浏览器中，监听页面关闭事件，当页面关闭时，处理一些事件。这是平时工作中比较常遇到的问题。与此同时，还有微信页面的刷新问题，切后台问题等等。现就目前的需求，对前一段时间遇到的问题以及最终的解决办法，做一下记录。业务需求：微信浏览器页面关闭，暂停播放，停止记录时长；微信浏览器页面切后台时，同上，暂停播放，停止记录时长；后台杀死微信浏览器时，同上。此中涉及到的事件主要有：微信浏览器页面关闭事件：pagehide / unload 事件页面的后台前台切
2020-10-22 17:22:41
2307
2
原创 array.reduce()数组去重
JavaScript数组对象去重需求：多组数组元素组合拼接，最终导致数组中有一些重复出现的元素。现将数组中重复的元素剔除掉，最终得到一组没有重复数据的新数组对象。解决方法：采用reduce() 处理数组元素，达到最终目的；reduce（）方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值；reduce（）可以作为一个高阶函数，用于函数的 compose；注意：reduce（）对于空数组是不会执行回调函数的。语法：array``.reduce(functio
2020-10-22 17:21:01
952
1
原创 清理yarn、npm缓存包
清理yarn/npm本地缓存注：使用yarn、npm、cnpm、nvm等包管理工具安装插件包的时候，会在本地缓存一些插件包。若在安装包管理工具的时候，使用的是默认的安装路径， 则在安装的路径下会产生一个cache文件目录（缓存已下载的依赖包），随着时间的推移，开发项目安装的依赖越来越多，慢慢cache缓存文件越来越多，系统盘占用也越来越多，为此，想清除cache中的依赖文件。方法如下：查看已缓存包的列表yarn cache list查询cache缓存文件目录路径yarn cache dir清
2020-10-22 17:19:23
5985
本地web图片压缩软件
2020-10-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人