微信小程序
文章平均质量分 93
andr_gale
船到桥头自然直
展开
-
20_微信小程序2.16.0以上基础库版本无法触发onUnhandledRejection的替代方案
关于这个问题,一直在纠结要不要处理,因为这个问题在之前只有在微信开发这工具的模拟器中会出现这个问题,在真机环境下一切正常,但是就在前段时间,电脑版微信可以打开小程序了,出于好奇,我把之前做好的小程序,在电脑版微信中打开,而之前所有调用服务端接口的地方都通过Promise进行了二次封装,不试不知道,一试吓一跳,所有promise抛出的异常,无法被捕获到,影响最大的就是业务里面所有登录…拦截失效了,于是联想到应该是和。原创 2023-05-06 19:40:30 · 709 阅读 · 1 评论 -
19_微信小程序之优雅实现侧滑菜单
这个随机数的生成规则,你可以自己写算法实现,这里我用了一种比较巧妙的办法,那就是在事件触发的回调中,系统会给我们一个event对象,我们通过这个event对象的timeStamp属性,可以获取到事件触发的时间戳,这个时间戳必然是唯一的,因此event.timesSamp就可以作为这个唯一的随机数来使用。上图中,红色区域是一条辅助线,被固定在了组件的最由边的位置,为了好演示,我把宽度设置的比较宽,正常1px就够了,蓝色区域为侧滑面板的右半边。最后,我们把辅助色块去掉,就大功告成了。,如果是回弹关闭,设置。原创 2023-02-19 17:33:18 · 2004 阅读 · 0 评论 -
18_微信小程序之微信视频号滚动自动播放视频效果实现2.0
关于这个效果呢,我之前已经实现过一个12_微信小程序之微信视频号滚动自动播放视频效果实现,只不过之前的实现是监听scroll-view的onscroll,根据scroll-view的滑动位置动态计算出播放的index来控制自动播放,本文将采用微信小程序为我们提供的IntersectionObserver来实现。IntersectionObserver wx.createIntersectionObserver(Object component, Object options)IntersectionObse原创 2022-06-21 10:47:22 · 4286 阅读 · 2 评论 -
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下,1千个,甚至上万个的情况下,只要有一个swiper-item,就会渲染一个Video播放器,这样是非常耗费性能的,本文将在这个基础上做优化,大致思路就是,不管我们的数据有多少条,我们都只渲染3个swiper-item,再配合swiper的切换,切换swiper-item的内容实现复用二.swiper实现循原创 2022-03-17 00:52:03 · 2672 阅读 · 7 评论 -
16_微信小程序之基于WebAudioContext实现带波形图的自定义音频播放器
微信小程序之基于WebAudioContext实现带波形图的自定义音频播放器一.实现思路定义自定义属性获取音频的二进制流将音频的二进制流解码为AudioBuffer播放控制,计算播放时长以及播放进度确定播放器的宽高,通过AudioBuffer获取音频时长,根据音频时长duration以及播放器宽度确定波形的宽度根据波形宽度以及AudioBuffer生成波形图数据,并计算峰值确定canvas宽高绘制波形图和播放进度音频播放过程中,根据播放进度重绘波形二.定义自定义属性属性原创 2022-01-24 16:25:55 · 6320 阅读 · 18 评论 -
15_微信小程序之svg地图自定义组件编写
微信小程序之svg地图自定义组件编写之前写过一篇android中实现svg地图的文章,感兴趣的请点击android_打造通用svg地图自定义组件,本文将在小程序中实现一个svg地图自定义组件一.地图svg数据准备可以从下面这个网站下载自己需要的svg文件:http://datav.aliyun.com/tools/atlas/index.html二.实现思路和android同理,先准备好json数据,这里不直接使用svg文件是为了方便和后端结合,因为我们往往会希望一个省份的地图里面需要显示哪几原创 2021-12-03 03:15:39 · 1647 阅读 · 3 评论 -
12_微信小程序之微信视频号滚动自动播放视频效果实现
12_微信小程序之微信视频号滚动自动播放视频效果实现一.获取视频的分辨率、时长、缩略图微信小程序提供了三种方式可以获取视频的分辨率、时长:wx.getVideoInfo(Object):只能用于本地视频VideoDecoder.start(Object):可用于网络视频或者本地视频借助video标签的bindloadedmetadata回调: 可用于网络视频或者本地视频,但必须在video标签被渲染的情况下才能获取到,并且获取速度较慢 /** * @author gale原创 2021-01-01 07:09:36 · 5635 阅读 · 0 评论 -
08_微信小程序之大转盘svg实现
08_微信小程序之大转盘svg实现一.关于微信小程序对svg的支持这里先准备一个静态的svg文件做测试<!--components/turntable-svg/images/secs.svg--><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="rotate(-67.5,1原创 2020-11-24 05:16:17 · 788 阅读 · 0 评论 -
07_微信小程序之大转盘自定义组件编写
07_微信小程序之大转盘自定义组件编写一.界面布局通过传入的size控制圆盘大小<!--components/turntable/index.wxml--><view class="turntable" style="width:{{size}}rpx; height:{{size}}rpx;"> <image class="outer" src="../../images/outer.png"></image> <canvas clas原创 2020-11-22 20:28:11 · 4568 阅读 · 9 评论 -
微信小程序笔记
微信小程序项目笔记一.限制组件的宽高比(以宽高比为2:1为例)1.父组件指定以下属性: position: relative; width: 100%; padding-top: 50%;2.子组件指定以下属性: position: absolute; left: 0; top: 0; width: 100%; heig...原创 2018-08-17 12:48:06 · 509 阅读 · 0 评论