- 博客(42)
- 收藏
- 关注
RSS订阅原创 IOS15.1/15.2 Safari 推流崩溃crash解决方案webrtc
IOS 15.1/15.2 Safari 和 Chrome 进行推流时，浏览器页面会 crash此处使用 canvas 采集的方案规避了该问题，该规避方案性能开销相对会更大些。出于性能的考虑，建议在 iOS 15.1 采集 Profile 不高于 720p, 15fps。需要注意的是，该方案需要本地视频流处于播放状态.我们写一个简单的单页面demo来演示怎么使用基于本地流新建canvas流,推流时使用canvas流即可避免crash问题。
2023-03-09 15:34:48
575
1
原创 js阻止浏览器返回上一页
最近有个项目,客户需要在app内嵌浏览器页面使用rtc通话,但是有前置页面,所以发生虽然不在rtc页面但是rtc通话内的语音播报并没有中断的异常场景。出现了安卓机左右滑动返回手势,已经退回前置页面,但web容器并未关闭。虽然异常操作不需要我提供解决方案,但还是想试试有没有解决方案,页面离开前弹出提示,点击决定是否离开当前页。所以网上找了一圈,发现以下适用方案。甚至可以发个请求出去。...
2022-08-11 18:01:07
1836
原创 vite打包配置(静态资源合并打包/清除log/gzip压缩/ENV配置等)
vue3+vite项目的 vite打包配置,包含静态资源拆分打包\超大静态资源拆分\静态资源压缩\去除console和debugger\旧版chorme和ie兼容\ENV配置等内容,持续更新中
2022-01-13 16:53:12
49133
49
原创 vite+vue3(vuex、vuerouter、axios)+elementplus项目保姆教程
简单来说就是记录一下怎么从0开始搭建一个vue3+vite+elementplus的项目,本文详细记录了每一步的代码\控制台和文件操作,可以说是保姆级教程了,喜欢可以收藏一下,有问题大家一起在评论区探讨
2021-12-24 18:25:06
4984
2
原创 单页面vue项目注册使用组件(使用httpVueloader)
目录安装并引入插件插件准备组件引用其他注册方法插件js文件主要是最近写的项目涉及到,就顺便记录一下,使用的概率不是很大啊毕竟现在大部分都是直接搭的项目组件正常方式使用组件即可安装并引入插件插件既然是单页面使用,最简单快捷的就是直接script引用了,这里我就直接把文件放出来自取好了,今天百度网盘有点卡分享不出来,文件又比较长,就放文章最末尾吧<script src="./lib/httpVueLoader.js" type="text/javascript"
2021-12-15 09:57:15
2501
原创 js滚动条自动到底(聊天框效果)
今天同事写个小demo的时候遇到的,太久没有写原生了都快忘了,就随手写一下记录一下大概思路效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width.
2021-12-01 10:42:47
1482
原创 前端使用js进行RSA加密并在vue中使用
目录前言生成秘钥vue中的安装进行验证加密操作前言前后端网络请求通信的时候携带的数据并不能全部明文传输,否则容易出现这样的的情况任何人都可以在请求里看到所有的内容,非常不安全那么我们就需要对数据进行加密,加密方法有很多,这里就简单介绍下RSA加密在vue中的使用原理什么的这里就不做赘述了,看到感兴趣的话可以自己了解一下,这里主要说明一下使用步骤生成秘钥1.在项目文件夹右键打开git bash here生成私钥$ openssl genr...
2021-12-01 09:46:48
774
原创 vue&百度地图绘制行进路线/路书/路线规划/线路展示
实现效果申请KEY/安装插件点击这个链接注册账号https://lbsyun.baidu.com/https://lbsyun.baidu.com/然后按图操作安装插件操作都在这个链接https://dafrok.github.io/vue-baidu-map/#/zh/start/installationhttps://dafrok.github.io/vue-baidu-map/#/zh/start/installationnpm install vue-baidu..
2021-09-26 23:14:07
5620
16
原创 vue/javascript-音视频声纹响应组件wavesurfer使用简述
实现效果左上电池是我扣的datav组件 可以忽略安装/引用组件npm install wavesurfer.js --save（datav安装）npm install @jiaminghi/data-view在使用界面引用import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.jsimport Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timelin.
2021-09-22 18:42:47
1783
原创 axios请求/响应拦截器配置自动携带token和自动提示错误
目录通过请求拦截器设置自带token基础信息实现过程响应拦截器配置提示错误实现方法简述一下，方便记忆：通过请求拦截器设置自带token意义：避免每次请求都去获取token，烦角色token来判定用户登录状态、当前用户角色很很简单，就不赘述了，这里讲一下发送请求自带token的方式，基础信息基于vue和第三方框架开发的后台系统，角色权限不同的情况下增删改功能向后台发送请求都需要携带当前用户token，token值在登录时获取，退出时清除，这个很基础也不赘述了，此..
2021-09-04 16:36:16
1001
原创 vue权限开发——路由跳转权限
除了我之前写的三篇vue后台系统权限内容vue权限控制——菜单及界面控制（含模拟数据）vue权限控制——动态路由vue权限控制——按钮控制再提一个路由跳转权限控制方法占个坑 太晚了写不动了，明天再写...
2021-09-01 01:02:26
1144
2
原创 vue依赖注入简述
简单记录下这个可以给后代组件传递参数的方法,主要是简单方便官方文档点这里，提到了依赖注入这个方法的作用、优势和缺点有兴趣的可以自行研究，本文不赘述，只简单介绍、实现功能创建项目首先建个vue项目，为了方便展示直接在home页编写代码，分别写创建子、孙、曾孙三代组件并注册home页代码通过provide提供要注入后代组件的内容，就像编写data数据一样，注意要写return这里就是传递了home数据和clog方法，后代组件在接受注入时，home即为home组件...
2021-08-30 23:48:47
298
原创 vue拖拽组件awe-dnd使用方法简述及参数说明
目录安装组件应用实例及参数说明实现效果代码参数说明做拖拽的时候搜到这个小组件 简单易用 记录一下官方文档：点击此处安装组件很简单啊 先控制台安装npm install awe-dnd --save然后去main.js里引用import VueDND from 'awe-dnd'Vue.use(VueDND)应用实例及参数说明用官方文档给的数据写的实例，因为文档说的也不是很细致，所有的参数说明是我自行理解的有不对的地方还请大佬指正先新建个.
2021-08-30 22:31:24
4677
原创 vue3+vite项目配置axios及跨域
目录安装axios封装请求全局引用配置跨域请求测试测试结果折腾了几次终于弄好了 记录一下vite创建vue3项目啥的就不赘述了 可以看这篇blog（附router和vuex安装）安装axiosnpm install axios封装请求此处是在src/assets/js下新建的js文件封装，引用时候要从这里引用不准备用qs库可以不安装 ，代码里用到的地方修改下就行import axios from "axios";import qs from ".
2021-08-24 23:57:21
8284
2
原创 多选内容的增删改变时序号自动更新
简单记录下大概实现效果：点击多选的内容自带序号，会根据选择的顺序、选择数量自动更新序号，如下图：首先模拟一组数据，就来个长度30的图片数组吧imgInit() { for (var i = 1; i <= 30; i++) { this.imgList.push({ id: i, url: '自定义图片地址', name: '图片' + i, ischeck: false, checkOrder: 0 .
2021-08-10 19:48:59
465
原创 elementui内置upload组件获取dom节点索引的方法小记
简单记录下如果是通过一组数据遍历出的dom元素使用upload组件，要对组件进行修改、删除要通过组件自带的methods几乎不能完成因为组件自带的methods无法获取当前操作dom的索引，就无法确认操作对象所以在...
2021-08-10 16:55:25
717
1
原创 使用vite安装vue3项目，vue3安装router和vuex
目录安装vite/创建vue3项目安装router安装vuex安装vite/创建vue3项目node环境就不说了 看下这个网址就行 下个较新的稳定版本就行，推荐14以上命令行输入npm init vite@latest然后控制台会询问项目名称，自己其就行了 我这里就叫vue3vite了j接下来控制台会要求选择项目类型和使用语言，按需选择即可项目就创建好了，但没有依赖，所以我们这里还是要安装一下，根据控制台提示按步操作就行了安装router首先在控制.
2021-08-03 15:42:38
7044
原创 安装react前配置nodejs导致vite命令报错的处理方案
使用react前需要配置下node环境，可以根据这个网页来操作完成配置并测试可成功创建react项目后使用命令安装vite或用vite创建vue3项目，会导致报错npm ERR! code ENOLOCALnpm ERR! Could not install from "Files\nodejs\node_modules\npm\node_cache\_npx\14564" as it does not contain a package.json file.npm ERR! A compl
2021-08-03 14:44:08
775
原创 vue中使用echarts及报错（Cannot read property ‘init‘ of undefined）处理
安装步骤项目控制台输入npm install echarts --save找到main.js 引入import * as echarts from 'echarts'Vue.prototype.$echarts = echarts然后就可以按照官网文档里的5分钟上手内容使用了这里给个简单例子 官网上扒的示例图表<template> <div class="home"> <div id="echarts" style="width:6...
2021-08-02 15:24:01
1310
原创 vue中router的封装
写vue项目时 新增页面设置路由操作比较繁琐。故此处记录一下简单的路由封装内容首先在项目里建一个common文件夹（名字随便）用来保存设置文件然后在新建的router.js内编辑内容，我们这里就随便设置几页来说明const routes = [{//设置主页部分内容 path: '/', name: 'mainpage', redirect: '/home/home', component: 'mainpage',//编辑主页的子路由，只需要填写下附件信息即可，met.
2021-08-01 20:48:11
775
原创 elementui内置navmenu组件如何占满高度
随手小计使用ele自带的container布局布置的时候 如果侧边栏aside内容不够填满页面，会出现下面这种情况侧边栏无法占据全高度这时候就要给侧边栏所有的父元素增加这个属性height：100%包含但不限于 el-coutainer、el-aside标签和侧边栏navmenu的el-menu标签同时不要忘记在index.html给html和body标签同样设置这个属性少一个属性则无法占据全部高度设置完成效果图...
2021-08-01 20:32:11
1822
原创 uniapp小程序获取定位（高德SDK)
由于uniapp自带的getlocation方法不支持解析地址，所以这里记录下使用高德sdk的方法首先登陆高德开放平台登录/注册后打开控制台，在应用管理里创建新应用然后点击添加按钮，添加key这样你就会获得一个key然后点击这个网址下载文件，找到amap-wx.js文件，放到项目common文件夹里(放哪里看个人意愿，别放static就行)然后我们新建一个vuex的module，这里随便起了个名字= =不要在意如何在uniapp里使用vuex看这里然后go...
2021-07-29 18:48:39
2074
原创 uniapp升降排序点击的dom变换设置
简单记录 以备不时之需目录domcssmethods方法dom先把tabbar写出来，这里v-for的是请求的数据，模拟的话随便编个数组就行了<template> <view> <view class="tab"> <view v-for="(item,index) in screen.list" class="tab-item "> <text class="tab-txt" >{{item.na
2021-07-20 19:27:06
2297
2
原创 uni app实现左右联动
目录编写dom右菜单栏联动左内容栏左内容栏联动右菜单栏求助插件市场自带的插件不太好用 还是手动写吧编写dom<scroll-view class="total" scroll-y="true" :style="'height:'+height+'px'"> <scroll-view scroll-y="true" class="title"> <view v-for="(item,index) in cateList" class="n
2021-07-19 22:31:55
1083
1
原创 请求接口拼接写法小记
简单记录，以防突然想不起来比如这里我们要请求接口是个…………/index_category/id/page?id=1&page=1方法一：字符串拼接getInfo() { let id= 1 let page = 1 this.$H('/index_category/id/page?id='+id+'&page='+page).then(res => { console.log(res) }) }方法二getI
2021-07-15 21:16:30
994
原创 uniapp自定义navbar小程序、H5适配
本文简述如何在使用uniapp写代码的时候去掉H5页面顶端红色区域，直接展示绿色区域并适配小程序端navbar组件这里就不展开说了，内容看我往前第2篇blog写完要在page.json里对想要使用自定义navbar的页面进行编辑，这里以index页面为例"pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "home-page", "enablePu.
2021-07-15 20:53:57
2459
1
原创 uniapp使用vuex方法简述（附vuex数据无法获取小坑说明）
简单记录下，有需自取新建文件根目录下新建store文件夹和index.js和普通vue项目写法一样编写index.js内容然后正常编写内容，很简单啊直接上代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { }, getters: { }, mutations: { }, actions: { }})expo..
2021-07-15 20:33:46
2186
原创 uniapp小程序/H5内容区高度适配
目录编写navbar区域编写页面区设置内容区高度没什么复杂内容，简单记录下万一有人需要呢编写navbar区域利用模板组件首先写上一个nav-bar，component文件夹里写好引用就行，uni这里还是比较方便的，代码如下<template> <view class="main"> <uni-nav-bar fixed="true" class="title"> <view slot="default"> &l
2021-07-15 20:18:01
1279
原创 uniapp自定义可滑动分页金刚区grid
因为uniapp自带的grid组件不是很好用，这里就简述下如何自定义金刚区，达到vant组件grid的效果新建组件首先还是在component文件夹下面新建同名文件夹和组件页面配置组件我们预设一组本地数据用于测试即可，共有10个宫格，分两页滑动展示首先写dom，标签里的属性可以直接参考uniapp的scroll-view组件<template> <view> <swiper :indicator-dots="true" class=...
2021-07-13 20:59:21
1769
2
原创 uniapp自定义滚动标签栏tab
目录新建组件配置组件编写css样式本文主要介绍如何在uniapp里自定义一个向vant组件库里的标签栏滚动 ←点击查看新建组件首先在component文件夹里新建组件同名文件夹和组件配置组件通过uni自带的scroll-view标签，用v-for展示数据（数据自己编一组就行）标签属性说明看这里 ←点击查看<template> <view> <scroll-view scroll-x="true" class="...
2021-07-13 20:31:06
1061
原创 uniapp配置简易网络请求(h5端适配)
目录创建文件写入配置引用使用H5端适配设置创建文件根目录下新建common文件夹，内建lib文件夹（可以省略），最后新建request.js文件（名称随意）写入配置接口是我从朋友那里要的一组数据接口，这里做个演示const baseUrl = 'http://121.40.58.83:5001/api'const request = (url='',data={},type='GET',header={})=>{ return new Promi.
2021-07-13 20:06:21
2215
原创 vue权限控制——按钮控制
本文续接上一篇博客vue权限控制——动态路由因为写完才想起来，所以直接上传完整的代码，下载地址：提取码：Shin提示：此处下载的是完成后的代码目录数据初始化添加权限信息到路由组件编辑自定义指令数据初始化此处提供的数据不包含依赖，需要自行通过控制台安装依赖npm install接下来是取消vue纠错 ，在文件夹下新增vue.config.js文件，写入以下代码module.exports = { lintOnSave: false}然后修改...
2021-07-09 11:22:15
270
原创 vue权限控制——动态路由
本文续接上一篇博客vue权限控制——菜单及界面控制（含模拟数据）使用同样一组模拟数据，但进行了部分修改，下载地址：提取码：Shin提示：没有根据上一篇blog进行操作的建议直接下载此处文件， 所有在原文件基础上修改的代码都会伴随注释。目录数据初始化修改路由配置编写动态路由方法使用方法适用刷新数据初始化此处提供的数据不包含依赖，需要自行通过控制台安装依赖npm install接下来是取消vue纠错 ，在文件夹下新增vue...
2021-07-08 20:52:41
1177
原创 vue权限控制——菜单及界面控制（含模拟数据）
本文主要通过一组模拟数据来简要说明：vue中如何通过权限控制来达到根据用户角色控制菜单及界面展示文件自取：提取码：Shin提示：所有在原文件基础上修改的代码都会伴随注释。目录初始化获取用户角色数据修改菜单展示页面session存储识别token初始化此处提供的数据不包含依赖，需要自行通过控制台安装依赖npm install为了方便后期的登录操作，找到Login.vue页面，把data内的数据填写上默认值，登录页面会默认填写进admin角色的账户和密
2021-07-08 17:27:24
2550
2
原创 vue中的过渡css
应用于vue中组件的进入、离开时添加过渡适用于：v-if/v-show的组件、动态组件、组件根节点通过一个简单的例子来解释，首先通过脚手架创建一个项目在首页设置两个router-link 用于跳转界面<template> <div id="app"> <div> <router-link to="/about" tag="button">to-about</router-link> <route
2021-07-05 19:58:44
150
原创 vue中sync的简述
用途：子组件内想要修改父组件data数据优点：父组件内不需要通过methods方法接收我们先写个简单的父组件，配上一个具有切换子组件是否展示的按钮<template > <div class="home" > <h1>this is home page</h1> <button type="button" @click="change" >展示/隐藏子组件</button> <son v-sho
2021-07-05 16:58:22
633
原创 vuex中的辅助方法（mapMutations/mapGetters/mapActions……）的记忆点
无子路由store单独js文件情况store数据编写首先在store文件夹下index.js里写入几个mutation等数据备用export default createStore({ state: { count:0, arr:[ {code:1,name:'1',status:true}, {code:2,name:'2',status:false}, {code:3,name:'3',status:true}, {code:4,name:'
2021-06-30 16:35:20
1216
原创 vue2.x通过vant的简易安装及按需引入
npm安装法控制台 npm i vant -Smain.js内引入//引入import Vant from 'vant'import '../node_modules/vant/lib/index.css'//使用Vue.use(Vant)vue ui安装法ui界面添加vant插件即可，注意：会重置app.vue界面，如果使用了默认生成的app.vue页面请注意备份...
2021-06-30 15:11:51
2075
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人