- 博客(23)
- 收藏
- 关注
RSS订阅原创 uniapp语音播放Android端细节进阶实现
上述代码片段基本实现了语音播放的各种细节，以及解决文章开头的三个问题，调用仅需要传入语音文件路径即可。针对问题1，使用音频焦点的请求聚焦及放弃，在播放音频时聚焦设置其持续时间为，用于指示临时增益或音频焦点的请求，预计会持续很短的时间；针对问题2，使用音频管理类的getDevices方法获取输出设备，配合类，判断输出设备的类型是否为耳机，最后配合问题3的解决方案即可实现耳机/扬声器的切换控制；针对问题3，使用音频管理类的setMode方法来控制音频切换扬声器/听筒。
2023-01-10 10:48:38
1118
1
原创 uniapp实现音频播放抢占系统音频焦点
编码完毕，实际上手调试，在后台其他APP（如音乐播放器）正在播放音乐时，本APP播放提示音，在Android/iOS两端都是表现为降低音乐音量，播放提示音，提示音播放完毕后，恢复音乐音量。至此，已完美完成需求，这里简单说一下本功能的开发感受：uni官方没有实现的功能，确实通过H5+plus绝大部分功能都是可以实现的，但对于没人写过参考的功能，就只能靠自己查阅原生开发文档、查阅原生开发相关代码，之后尝试使用native.js改写，这整套流程下来，对一个纯前端开发而言确实不容易。
2022-12-30 09:55:59
2039
1
原创 uniapp视频压缩踩坑记录
关于本文中提及的直接用压缩视频失败的问题，在前段时间已反馈给官方，而关于文末的压缩规则制定，是根据博主自身的需求出发考虑的，各位有需要可以参照着修修改改（不过这里面也有坑！如码率过高也会导致压缩失败）每踩一个坑，都是一个成长的脚印，在官方对这些BUG问题无作为无反馈的情况下，只能硬着头皮找出路，明知山有虎，偏向虎山行！
2022-09-09 16:28:28
4604
原创 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
7904
2
原创 uniapp实现语音播放功能
需求点语音播放不跟随系统铃声模式。语音播放支持扬声器/听筒播放。扬声器模式下播放检测到距离接近需要息屏（防误触）并实时转换为听筒播放，距离远离需亮屏并转回扬声器播放。听筒模式下播放检测距离变化不需要切换播放声道，但距离接近需要息屏（防误触），距离远离需要亮屏。分析需求首先明确一点，语音播放支持扬声器/听筒播放，那就只能使用plus.audio.createPlayer来实现，而切换播放声道，可以使用plus.audio.createPlayer创建出来实例的setRoute()方法。由3.
2021-08-31 11:08:50
11312
5
原创 uniapp如何让APP播放的音频跟随系统铃声模式
需求乍一眼看起来感觉很简单，但是上手一查阅资料才知道，uniapp关于这些涉及底层类功能的调用知识真的是太少了！一、uni.createInnerAudioContext()一开始使用播放音频的方法是uni.createInnerAudioContext()，挂载到全局后指定src，在需要播放的时候调用。但是，该方法并不支持跟随系统铃声模式，尽管官网API介绍有是否遵循系统静音开关，但是并没有什么卵用。this.audioContext = uni.createInnerAudioContext()
2021-08-31 09:36:26
1938
3
原创 uniapp聊天页nvue开发踩坑记录
由于前段时间开发出来的vue版本的聊天页，性能、用户体验等方面十分不尽人意，故开启了新的征途，nvue版本聊天页的开发。痛点一、进入页面保持在最底部这次重构nvue版本的聊天页，使用了标新立异的渲染方式。总所周知，前端渲染页面都是由上而下渲染的，那么如果需要进入页面的时候，便保持在页面的最底部，就需要等待页面渲染完毕后跳转至最底部。这样的渲染方式就会导致在进入页面时，用户能很明显的感受到页面抖动了一下（可能多次）。所以此次重构，博主选择将整个页面旋转180度，原本的最顶部，变成了页面的最底部，进入页面
2021-06-10 10:56:02
2093
10
原创 uniapp开发聊天APP踩坑记录
最近工作重心转移到了uniapp上，有一说一，这个框架跨端确实牛逼，一套代码能一次编译到多端使用。但随之而来的兼容性问题也是层出不穷，同样的在面临APP底层的改动也显得力不从心。同时，uniapp的性能问题也是一直被人所诟病的一点，这个点上一还是要提高自己本身的编码能力，二还是得依靠dcloud团队能持续优化框架。本篇博客是记录使用uniapp开发一个聊天APP的踩坑问题。一、输入框吞字，光标闪动问题uniapp中使用输入框，无论是input组件还是textarea组件，都存在一个问题。就是如果组件绑
2021-05-06 23:06:37
2269
7
原创 koa返回前端响应后，后台静默做其他操作
需求描述后端使用Koa框架，需要接收到请求后立即给予前端相应，后续由后端继续做其他异步调用API的操作遇到的问题Koa中返回前端响应的方式有两种，一种是直接return你需要的响应参数；另一种则是设置响应body，接口方法走完后就会自动响应到前端但是需求是需要在响应后继续做其他异步操作，如果在异步操作前return了，则后续的代码都不会执行；如果在异步操作前设置相应body，则也需要在异步操作走完之后，才会给到前端响应。如何解决一、先写一个模拟异步调用API操作的方法/** * 模拟异步调用
2021-01-22 15:25:20
635
3
原创 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
3157
4
原创 Scrapy爬虫踩坑记录
Scrapy作为一个优秀的爬虫框架，尽管其体系已相当成熟，但实际操作中其实还是需要借助其他插件的力量来完成某些网站的爬取工作，今天记录一下博主爬虫路上的一些坑及解决方案，避免大家走太多弯路。一、DEBUG: Filtered duplicate request: GET xxx - no more duplicates will be shown (see DUPEFILTER_DEBUG to show all duplicates)对网站全站爬取数据时，遇到了这个报错。Scrapy会对reques
2020-12-17 17:29:51
1732
1
原创 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
5202
3
原创 uniapp使用uni-nav-bar自定义顶部状态栏和导航栏
使用组件问题描述在使用NavBar组件后，其顶部状态栏和顶部导航栏会在大部分机型下表现为高度64px，在某些特殊机型下会表现为高度88px（如iPhone X）。页面内使用了uView的tabs标签组件，配合Swiper轮播图组件作为可轮播切换的商品列表页。tabs组件要求需要吸顶，这就引出了问题，因为使用到的组件为外部引入，对于其内部样式的修改，需要通过获取（顶部状态栏 + 顶部导航栏）的高度后重新设置吸顶的高度。解决方案（顶部状态栏 + 顶部导航栏）的高度几乎所有页面适用，所以写在mixi
2020-10-20 16:44:35
18566
3
原创 Canvas自定义文字旋转缩放渲染
最近遇到一个新需求，需要以给定的参数，在Canvas画板上渲染还原文字。参数如下：translateX（X轴方向上的偏移量）：0translateY（Y轴方向上的偏移量）：92scaleX（X轴上的缩放量）：1scaleY（Y轴上的缩放量）：1rotate（旋转角度）：25fontSize（字体大小）：16fontFamily（字体集）：‘微软雅黑’color（字体颜色）：‘rgb(229,80,80)’txt（带换行的文本，换行标识为\n）：‘我不行了\n快扶我去喝酒’要求：文
2020-10-10 11:34:20
2929
原创 ElementUI组件table展开expand子项动态获取数据时，视图不更新
最近碰到一个新的需求，先是需要获取用户组列表（做成表格），表格项可以展开，在展开的时候动态的获取所展开的用户组底下的用户列表。问题描述起初，我是把表格数据分开来，即外层用户组列表使用list数组，内层嵌套的用户列表使用innerList数组，两者互不干扰。然后监听外层表格的expand-change事件，在事件回调中配合表格属性expand-row-keys来控制展开的行（需求是手风琴模式，即一次最多展开一行），同时回调中去动态请求数据，数据返回后对innerList进行赋值。示例Demo代码如下：
2020-08-31 17:32:15
7461
原创 初探TypeScript
TypeScript菜鸟学习笔记TypeScript是什么？TypeScript = Type + EcmaScript6TypeScript是JavaScript的强类型版本。然后在编译器去掉类型和特有语法，生成纯粹的Javascript的代码。由于最终在浏览器中运行的仍然是Javascript，所以TypeScript并不依赖于浏览器的支持，也不会带来兼容性的问题。TypeScript是Javascript的超集，这意味着他支持所有的JavaScript语法。并在此之上对JavaScript添加
2020-08-14 17:39:01
213
原创 使用squoosh网的压缩方法实现浏览器前端压缩图片功能
假如说你做的网站有需要用户自定义上传图片的功能，那么往往这些图片，都需要进行压缩，且往往是需要经过服务器端压缩的。同时如果说你不懂图片压缩原理的话，你还得去花钱使用他人的API进行图片压缩（例如tinyPng），熊猫压缩的服务器部署在国外，我们调用其API也存在响应速度慢、丢包等问题。这时候有人会说，canvas压缩不就完事了吗？的确，使用canvas也能够进行图片压缩，但是博主上手操作之后发现其效果有点糟糕。假如说画布大小与图片大小一致，调低quantity的话，压缩完的图片往往会很模糊；而如果画布大小
2020-08-10 17:20:02
3308
9
原创 一个Scrapy项目实现同时爬取不同的网站，网站内不同的站点
Scrapy作为一个优秀的Python爬虫框架，深受博主喜爱，尽管博主从事大部分工作是前端开发，但也会对爬虫，数据库以及后台的工作感兴趣。最近又有了新的任务，能够以相同的数据库表结构去存储爬取的数据；在以往，博主虽然说会爬虫，但也只是非常浅显的，一个Scrapy项目只能跑一个爬虫，而实际上是可以在一个Scrapy项目中写多个爬虫的。前期准备工作创建一个新的Scrapy项目，在工作间文件夹打开控制台，输入以下命令：scrapy startproject xxx（xxx为项目名）像上图，当你电脑已
2020-07-23 14:34:27
7074
8
原创 饿了么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
2342
1
原创 饿了么UI组件库中，Upload组件上传闪动的解决
最近接触到elementUI的上传组件，一路顺畅，就是在上传之后总是发现有闪动的现象，博主对其进行深入研究后发现，其闪动原因，是因为使用的file-list并不会自动添加上传了的图片，而需要由我们来人工来添加，而添加则必须使用on-success事件中自带的参数去做赋值操作，心中有一万只草泥马奔腾而过的赶脚有木有？闪动问题复现先是出现闪动问题的GIF图以及其问题代码，如下：可以非常明显的看到，图片上传成功后，图片会有一个先向右，然后停顿片刻摆着位置后，返回左侧的现象。<!-- 上传组件，其中
2020-07-09 18:49:11
4602
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
1419
原创 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
4482
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
9657
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人