- 怎么打开微信小程序官方demo?
点击在“开发者工具中预览效果”字段后。进入的页面显示“请打开工具手动导入,若未安装可点击下载”,当前工具是打开的,要怎么样操作才可以把官方的demo导入工具预览效果,在线等
2020-05-08 - 小程序live-player组件在安卓端的“拉流:视频渲染⾸帧事件”状态码由2032变为2033了?
我们小程序中,使用了 live-player 播放 RTMP 的视频流,逻辑上会根据“拉流:视频渲染⾸帧事件”的状态码判断是否显示遮罩。但这个状态码在2022年10月13日时发现由"2032"变为"2033"了,导致我们判断逻辑失效。 另外这个状态码变更只在安卓端变了,iOS 端并没有变。请问这是为什么?
2022-10-13 - 原生组件不支持部分样式问题
原生组件不支持动画,圆角属性等问题,在微信开发者工具上支持是因为工具端的模拟器模拟的原生组件,跟真机的是不一致的,需要以真机为准,已经实现了同层的原生组件则支持,如video,map等
2019-08-30 - 微信小程序video组件,安卓部分手机播放1080p视频特别卡顿(最近才卡的,之前挺好的)?
微信小程序video组件,安卓部分手机播放1080p视频特别卡顿(最近才卡的,之前挺好的),视频改为720p后还是有些卡顿。 视频源是放在阿里云的。video组件上已经加了 custom-cache="{{false}}" ,版本库也更新了,但是都没有啥效果。 想问下还有别的办法可以解决这个视频卡顿的问题吗?微信官方能不能给个解决办法呢?啥时候可以解决掉这个卡顿问题嗯呢?
2022-08-03 - [Event] 21 listeners of event videoPlaye
小程序,[Event] 21 listeners of event videoPlayerInsert have been added, possibly causing memory leak.是撒意思,如何解决?
2018-12-27 - video可以禁止加载缓冲吗?
或者设置缓冲值吗
2021-12-30 - 同一页面存在多个video时,video无法正常播放一直在加载转圈
不建议同个页面使用多个video组件,建议不超过3个video,如果要实现video列表功能,请进行优化(image列表,选中时将image替换成video)
2019-08-29 - 小程序的视频内容流自动播放
小程序的视频内容流自动播放 啊啊啊,又解决一个问题 0、起因 这个需求产生的起因,是在做内容流(包含文本,图片,视频)的时候,需要如果流里面有视频,则滚动到一定位置时自动播放视频,类似朋友圈、微博等等的自动播放效果。 [图片] 1、第一版尝试 第一版的思路是: 收集当前所有内容流相对于页面头部的高度,做成一个Array 滚动过程中,监听页面滚动事件,当达到某个高度要求,则播放对应的索引视频 这个操作缺点太多了,捡几个主要的说 缺点: 内容流是一个个的组件,获取距离顶部高度不方便,也不太准。并且组件内需要通过事件传播到列表页,在列表页进行高度Array整理、事件监听、切换索引等等(如果有几种列表页,就要写几遍,很麻烦) 监听滚动事件本身就消耗性能,做了节流也不是那么优秀 2、第二版尝试 突然,就发现了[代码]wx.createIntersectionObserver[代码]这个属性,它的作用是:返回[代码]intersectionObserver[代码]对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见(创建一个目标元素,根据目标元素和视窗的相交距离来判断当前页面滚动的情况。通常这个方案也用于页面图片的懒加载)。参考https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.html 怎么解释呢,就是可以理解为,做一个监听,如果当前被监听的元素,进入了你规定的视界或者离开你规定的视界,就触发。 那么,怎么做到监听呢,参考如下代码: [代码]/** 监控视频是否需要播放 */ let {screenWidth, screenHeight} = this.extData.systemInfo //获取屏幕高度 let topBottomPadding = (screenHeight - 80)/2 //取屏幕中间80的高度作为播放触发区域,然后计算上下视窗的高度 topBottomPadding // 80这个高度可以根据UI样式调整,我这边基本两个视频间隔高度在100左右,超过了两个视频之间的间隔,就会冲突,两个视频会同时播放,不建议过大 const videoObserve = wx.createIntersectionObserver() videoObserve.relativeToViewport({bottom: -topBottomPadding, top: -topBottomPadding}) .observe(`#emotion${this.data.randomId}`, (res) => { let {intersectionRatio} = res if(intersectionRatio === 0) { //离开视界,因为视窗占比为0,停止播放 this.setData({ playstart: false }) }else{ //进入视界,开始播放 this.setData({ playstart: true }) } }) [代码] 其中,[代码]observe[代码] 是对应你需要监听的视频(也就是滚动进入视窗的元素) 那么,为什么选择[代码]relativeToViewport[代码]呢,是因为我们需要对它进入某一个视窗进行监听,而不是对进入整个屏幕视窗监听(因为可能整个视窗里会有多个视频)。 以上,就是整个逻辑思路。 最开始用的[代码]relativeTo[代码]监听视频进入某个元素(如[代码].view-port[代码]),但是后来发现每个页面都要写这个元素,太麻烦,并且容易遮盖操作区域 [代码]// 太麻烦,后来舍弃了这个方案 <view class="view-port" style="height: 100rpx; position: fixed; z-index: 1;width: 100%;letf:0;top:50%;transform: translateY(-50%);"></view> [代码]
2019-12-01 - scroll-view的scrollToUpper会在滚动过程中多次触发?
scroll-view组件向上滚动到upper-threshold范围内后,继续滚动会多次触发scrollToUpper事件。本身就是这么设计的吗???不是只在滚到upper-threshold时触发一次吗?
2019-08-19 - 小程序取消橡皮筋回弹效果解决方案及坑总结
提到ios系统的橡皮筋效果,作为开发者是又爱又恨,有想要这个效果又有不想要的,无奈的是却没有一个简单的开关来设置这个效果是否开启。 最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题,这里分两部分(取消橡皮筋回弹效果和因为这个效果遇到的坑)和大家分享一下。 取消IOS橡皮筋回弹效果的解决方案 1) 页面无滚动区域时,可通过页面json配置文件设置disableScroll:true禁止整个页面滚动,从而取消橡皮筋效果。 [代码]{ "disableScroll":true } [代码] 测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1 2) 页面有滚动区域,滚动区域通过view模拟实现,然后在页面json配置文件设置disableScroll:true禁止整个页面滚动,从而取消橡皮筋效果。 [代码]json文件配置 { "disableScroll":true } view元素模拟实现滚动样式 { height: calc(100vh - 120rpx); //高度必须是固定的值 overflow-y: auto; } [代码] 不足之处在于view元素模拟的滚动区域滚动时不够连贯,没有scroll-view那种原生丝滑般的感觉。 测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2 3) 页面有滚动区域,滚动区域使用scroll-view,这时通过disableScroll则无法实现,尝试设置一下scroll-view的scroll-y="{{false}}",上拉或下拉时居然不再触发橡皮筋的回弹啦,当然滚动区域也不能滚动。 小脑袋动一动,解决方法有啦! 通过设置一个变量scrollY动态控制滚动区域的滚动从而阻止回弹。 监听bindscrolltoupper\bindscrolltolower当scroll-view区域滚动到顶部或底部时候设置scrollY:false来关闭页面滚动,从而阻止回弹。 监听bindtouchstart\bindtouchmove 当用户反方向滑动的时候设置scrollY:true,再次开启页面滚动。 [代码]wxml滚动区域属性和事件处理,具体实现请点击测试代码链接 <scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" bindtouchstart="touchstart" bindtouchmove="touchmove"> <view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </scroll-view> [代码] 相对view模拟实现滚动区域,scroll-view滚动更丝滑,不过每次滚动到底部或顶部的时候,再反向滑动时由于再次开启scroll-view滚动会有操作卡顿的感觉,暂时没想到好的解决方法,有解决的大佬希望提供一下想法,一起学习下。 测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3 IOS橡皮筋效果遇到的坑 1) 操作左滑删除组件时上下移动,会触发橡皮筋效果导致页面抖动的问题 这个坑的严重程度看设计师的意愿了,反正我们团队目前是需要解决的,方案类似取消橡皮筋解决方案的第三种 在左滑的时候关闭scroll-view的滚动,取消时再次开启滚动 2) 如果页面顶部有置顶的横向滚动区域scroll-view,当页面滚动到底部时继续上拉会导致置顶头部消失,松开回弹后头部又会出现。 坑是社区里的朋友提出来的,我借了个iphone x 一预览,我嚓,还是真是个奇坑! 微信官方回复已复现正在解决中… 不想继续等下去的,暂时解决方法是 监听页面的滚动区域,当滚动到底部时设置顶部横向滚动scroll-view的scroll-x=false来解决。 写在最后 以上便是我在小程序开发中有关于ios橡皮筋回弹效果的分享,示例代码已上传github,可自行下载体验。 https://github.com/YuniorZen/minicode-debug/tree/master/minicode01 目前微信官方虽说已经着手解决(已两年)此类bug,但哪吒说 我命由我不由天,所以还是我们开发者多分享些解决方案自救来的快。 分享方案如有问题还望不吝指出,没有涉及到的坑也欢迎评论提出,一起学习和解决,后续也会基于此篇不断更新总结。
2021-01-14 - 小程序web-view 组件缓存问题
web-view 缓存严重,如果是老用户进去还是旧的页面,安卓上还可以使用手机管家清理一下可以了,ios上清理不了,测试都不好进行啦,已经在url加了时间戳了[图片]
2018-07-06 - 微信小程序web-view缓存极其严重,无法清除缓存?
微信小程序web-view的缓存极其严重,而且反应非常特别。有的时候,是修改服务端后,同一个人苹果与安卓手机,苹果手机立即更新了安卓手机没有,有的时候是安卓手机立即更新了苹果没有。 请问有没有好的办法彻底清除缓存,尝试过删除小程序(包括顶部与列表页)、尝试过重启手机,始终没有清除缓存。我在微信平台上搜索了此类问题的帖子还是很多,而且最终都没有给到合适的解决方案,也尝试了百度其他人的方案,目前未发现比较稳定可行的清缓存方案。 主要是HTML+JS等缓存非常严重。请官方帮忙关注一下此问题,感谢感谢。
2019-10-22 - 预览或者上传时报错,查到对应文件368行是这样的,如何解决?
message:Error: runTask COMPILE_JS, miniprogram_npm/psl/index.js catch error Error: node:events:368 throw er; // Unhandled 'error' event ^ Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory at new NodeError (node:internal/errors:371:5) at Worker.[kOnExit] (node:internal/worker:276:26) at Worker.<computed>.onexit (node:internal/worker:198:20) Emitted 'error' event on Worker instance at: at Worker.[kOnExit] (node:internal/worker:276:12) at Worker.<computed>.onexit (node:internal/worker:198:20) { code: 'ERR_WORKER_OUT_OF_MEMORY' } [图片] [图片]
2022-08-16 - 小程序使用腾迅位置服务的问题?
在webview中,通过jssdk配置,从wx.getLocation接口获取的用户坐标在安卓手机经常飘移,IOS手机位置正常, 测试了腾迅前端定位组件能解决位置飘移的问题,https://lbs.qq.com/tool/component-geolocation.html 现在的问题:小程序在使用时, 提示不支持非业务域名https://apis.map.qq.com ? 请问 腾迅前端定位组件 不能在小程序使用吗?
2019-05-29 - webview引用腾讯地图组件苹果提示iframe不支持引用非业务域名,安卓正常
在h5里面使用了腾讯地图的选点组件(https://lbs.qq.com/tool/component-picker.html); 此时苹果会提示页面iframe不支持引用非业务域名(https://apis.map.qq.com) 但是安卓正常显示。
2019-03-06