Vue
文章平均质量分 82
Vue专栏
ㄏ、Forgetˊ
这个作者很懒,什么都没留下…
展开
-
uniapp语音播放Android端细节进阶实现
上述代码片段基本实现了语音播放的各种细节,以及解决文章开头的三个问题,调用仅需要传入语音文件路径即可。针对问题1,使用音频焦点的请求聚焦及放弃,在播放音频时聚焦设置其持续时间为,用于指示临时增益或音频焦点的请求,预计会持续很短的时间;针对问题2,使用音频管理类的getDevices方法获取输出设备,配合类,判断输出设备的类型是否为耳机,最后配合问题3的解决方案即可实现耳机/扬声器的切换控制;针对问题3,使用音频管理类的setMode方法来控制音频切换扬声器/听筒。原创 2023-01-10 10:48:38 · 1252 阅读 · 1 评论 -
uniapp实现音频播放抢占系统音频焦点
编码完毕,实际上手调试,在后台其他APP(如音乐播放器)正在播放音乐时,本APP播放提示音,在Android/iOS两端都是表现为降低音乐音量,播放提示音,提示音播放完毕后,恢复音乐音量。至此,已完美完成需求,这里简单说一下本功能的开发感受:uni官方没有实现的功能,确实通过H5+plus绝大部分功能都是可以实现的,但对于没人写过参考的功能,就只能靠自己查阅原生开发文档、查阅原生开发相关代码,之后尝试使用native.js改写,这整套流程下来,对一个纯前端开发而言确实不容易。原创 2022-12-30 09:55:59 · 2227 阅读 · 1 评论 -
uniapp视频压缩踩坑记录
关于本文中提及的直接用压缩视频失败的问题,在前段时间已反馈给官方,而关于文末的压缩规则制定,是根据博主自身的需求出发考虑的,各位有需要可以参照着修修改改(不过这里面也有坑!如码率过高也会导致压缩失败)每踩一个坑,都是一个成长的脚印,在官方对这些BUG问题无作为无反馈的情况下,只能硬着头皮找出路,明知山有虎,偏向虎山行!原创 2022-09-09 16:28:28 · 5454 阅读 · 0 评论 -
uniapp实现APP中内嵌H5应用
现如今,各大APP平台都有属于自己的小程序体系,各种各样的应用都可直接内嵌在APP中实现一站式体验。使用uniapp开发的APP如何实现这样的功能呢?答案就是内嵌web-view注意事项APP中有vue页面及nvue页面,两种页面均可内嵌web-view,但两种页面的表现不一:vue页面会自动铺满整个页面,接收web-view页面通信使用的是@message;nvue页面则需要指定页面宽高,接收web-view页面通信使用的是@onPostMessage由APP通知web-view页面,无论原创 2022-04-06 16:38:07 · 8381 阅读 · 2 评论 -
uniapp实现语音播放功能
需求点语音播放不跟随系统铃声模式。语音播放支持扬声器/听筒播放。扬声器模式下播放检测到距离接近需要息屏(防误触)并实时转换为听筒播放,距离远离需亮屏并转回扬声器播放。听筒模式下播放检测距离变化不需要切换播放声道,但距离接近需要息屏(防误触),距离远离需要亮屏。分析需求首先明确一点,语音播放支持扬声器/听筒播放,那就只能使用plus.audio.createPlayer来实现,而切换播放声道,可以使用plus.audio.createPlayer创建出来实例的setRoute()方法。由3.原创 2021-08-31 11:08:50 · 11541 阅读 · 5 评论 -
uniapp如何让APP播放的音频跟随系统铃声模式
需求乍一眼看起来感觉很简单,但是上手一查阅资料才知道,uniapp关于这些涉及底层类功能的调用知识真的是太少了!一、uni.createInnerAudioContext()一开始使用播放音频的方法是uni.createInnerAudioContext(),挂载到全局后指定src,在需要播放的时候调用。但是,该方法并不支持跟随系统铃声模式,尽管官网API介绍有是否遵循系统静音开关,但是并没有什么卵用。this.audioContext = uni.createInnerAudioContext()原创 2021-08-31 09:36:26 · 2011 阅读 · 3 评论 -
uniapp聊天页nvue开发踩坑记录
由于前段时间开发出来的vue版本的聊天页,性能、用户体验等方面十分不尽人意,故开启了新的征途,nvue版本聊天页的开发。痛点一、进入页面保持在最底部这次重构nvue版本的聊天页,使用了标新立异的渲染方式。总所周知,前端渲染页面都是由上而下渲染的,那么如果需要进入页面的时候,便保持在页面的最底部,就需要等待页面渲染完毕后跳转至最底部。这样的渲染方式就会导致在进入页面时,用户能很明显的感受到页面抖动了一下(可能多次)。所以此次重构,博主选择将整个页面旋转180度,原本的最顶部,变成了页面的最底部,进入页面原创 2021-06-10 10:56:02 · 2135 阅读 · 10 评论 -
uniapp开发聊天APP踩坑记录
最近工作重心转移到了uniapp上,有一说一,这个框架跨端确实牛逼,一套代码能一次编译到多端使用。但随之而来的兼容性问题也是层出不穷,同样的在面临APP底层的改动也显得力不从心。同时,uniapp的性能问题也是一直被人所诟病的一点,这个点上一还是要提高自己本身的编码能力,二还是得依靠dcloud团队能持续优化框架。本篇博客是记录使用uniapp开发一个聊天APP的踩坑问题。一、输入框吞字,光标闪动问题uniapp中使用输入框,无论是input组件还是textarea组件,都存在一个问题。就是如果组件绑原创 2021-05-06 23:06:37 · 2366 阅读 · 7 评论 -
koa-body4接收formData数据
开发中往往会有上传文件的需求,最近使用了Koa作为Node后端的框架,记录一下如何接收formData的问题Koa2中使用Koa-body4接收前端封装数据的方式// 以ant-design-vue上传组件为例,使用其自定义上传事件customRequestcustomRequest(data) { const data = new FormData() data.append('file', data.file) // File文件 // 如果有多个File // data.app原创 2021-01-13 15:49:10 · 3240 阅读 · 4 评论 -
uniapp开发微信小程序设置字体踩坑记录
最近接到一个需求,需要在微信小程序中做出用户可自定义缩放旋转图片和文字的定制功能,开发使用uni-app,这里记录几个问题。一、canvas设置字体大小需数值需为整数使用canvas渲染文字时,需要设置文字的字体let ctx = uni.createCanvasContext('canvas')ctx.font = '16px Arial' // 设置成功ctx.font = '16.66px Arial' // 这样写会触发警告,不生效二、字体集font-family兼容的问题微信小程序原创 2020-11-30 14:09:40 · 5527 阅读 · 3 评论 -
uniapp使用uni-nav-bar自定义顶部状态栏和导航栏
使用组件问题描述在使用NavBar组件后,其顶部状态栏和顶部导航栏会在大部分机型下表现为高度64px,在某些特殊机型下会表现为高度88px(如iPhone X)。页面内使用了uView的tabs标签组件,配合Swiper轮播图组件作为可轮播切换的商品列表页。tabs组件要求需要吸顶,这就引出了问题,因为使用到的组件为外部引入,对于其内部样式的修改,需要通过获取(顶部状态栏 + 顶部导航栏)的高度后重新设置吸顶的高度。解决方案(顶部状态栏 + 顶部导航栏)的高度几乎所有页面适用,所以写在mixi原创 2020-10-20 16:44:35 · 18811 阅读 · 3 评论 -
ElementUI组件table展开expand子项动态获取数据时,视图不更新
最近碰到一个新的需求,先是需要获取用户组列表(做成表格),表格项可以展开,在展开的时候动态的获取所展开的用户组底下的用户列表。问题描述起初,我是把表格数据分开来,即外层用户组列表使用list数组,内层嵌套的用户列表使用innerList数组,两者互不干扰。然后监听外层表格的expand-change事件,在事件回调中配合表格属性expand-row-keys来控制展开的行(需求是手风琴模式,即一次最多展开一行),同时回调中去动态请求数据,数据返回后对innerList进行赋值。示例Demo代码如下:原创 2020-08-31 17:32:15 · 7772 阅读 · 0 评论 -
饿了么UI组件库中,Image组件预览图片错位的解决
使用过elementUI组件库中的Image组件基本都知道,其组件会自带一个图片预览功能,仅需要通过preview-src-list传入需要预览的图片url列表即可实现点击预览。博主使用了此功能,进行数组的循环渲染,具体渲染代码如下:<div class="img-wrap" v-for="(item, index) in baseboardList" :key="index"> <el-image :src="item.src" :preview-s原创 2020-07-17 15:00:25 · 2478 阅读 · 1 评论 -
饿了么UI组件库中,Upload组件上传闪动的解决
最近接触到elementUI的上传组件,一路顺畅,就是在上传之后总是发现有闪动的现象,博主对其进行深入研究后发现,其闪动原因,是因为使用的file-list并不会自动添加上传了的图片,而需要由我们来人工来添加,而添加则必须使用on-success事件中自带的参数去做赋值操作,心中有一万只草泥马奔腾而过的赶脚有木有?闪动问题复现先是出现闪动问题的GIF图以及其问题代码,如下:可以非常明显的看到,图片上传成功后,图片会有一个先向右,然后停顿片刻摆着位置后,返回左侧的现象。<!-- 上传组件,其中原创 2020-07-09 18:49:11 · 4709 阅读 · 5 评论 -
前端使用elementUI框架,后端使用thinkjs,上传图片至ali-oss系统
博主在最近的工作中,接触到了使用thinkjs框架作为后台架构的网店后台Node服务,因为其使用的qiniu上传图片接口不符合需求,需要改为ali-oss接口,一路遇到不少坑,在此做一下记录总结。首先是elementUI前端部分上传至后台,需要将flie文件,转为FormData对象后传至后台,因使用的组件库为element,其upload的组件中,action为必传(博主此项传空),同时将auto-upload传false(意思为不自动上传),然后上传操作在on-change事件中完成,回调完毕后重显原创 2020-07-03 15:54:02 · 1440 阅读 · 0 评论 -
ant-design-vue中select跟tree-select设置placeholder无效
ant-design-vue中select跟tree-select设置placeholder无效博主在使用ant-design-vue过程中,踩了非常多的坑,今天就部分组件的placeholder设置无效做记录。失效示例代码及界面<a-checkbox-group :options="descCheckOptions" @change="handleChangeDescCheckGroup"> <div class="desc-checkitem" slot="label" sl原创 2020-05-29 12:20:33 · 4569 阅读 · 3 评论 -
关于ant-design-vue的table内嵌输入框性能问题
关于ant-design-vue的table组件内嵌输入框性能问题总所周知,ant-design-vue是唐金洲老师凭借一己之力撸出来的一套基本ant-design的vue版本UI组件库,后来才归入了ant-design官方门下。不得不说,单凭一己之力能实现这么一套框架实在令人敬仰,但随之而来的问题也就显现了。antd官方推荐编写语言antd的官方推荐编写语言是react,其背后有着专业的前端团队以及社区维护。而vue版本的antd,则是由个人开发,由蚂蚁金服提供技术支持的,可见其完善程度远不如rea原创 2020-05-12 14:51:40 · 9844 阅读 · 4 评论