微信小程序解决视频在真机不能相对定位问题

最新推荐文章于 2022-09-22 22:40:53 发布
最新推荐文章于 2022-09-22 22:40:53 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序原生基础爬坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/79264932
微信小程序在真机上遇到视频相对定位显示异常的问题，本文介绍了一个使用盒子模型(flex)布局来解决此类问题的方法，确保在模拟器和真机上的表现一致。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

微信小程序解决视频在真机不能相对定位问题

   微信小程序中对视频设置相对屏幕定位会出现，在模拟器上运行正常，在真机上运行不正常的问题。


解决方法：

通过盒子模型(flex)布局解决该问题。


实现代码：

 wxml：

<view class="MainContent">
    <view class="TopBlock">

  TopBlock

    </view>
    <view class="BottomBlock">
        <scroll-view class="ScrollView" scroll-y="true">

 
了解本专栏 订阅专栏 解锁全文 超级会员免费看
微信小程序textarea的内容随着屏幕上下移动的问题
kerryqpw的博客
12-26 1万+
微信小程序textarea的内容随着屏幕上下移动的问题
解决小程序video控件在真机黑屏问题
01-05
解决小程序video控件在真机播放时视频黑屏问题，下载后执行如下命令： mp4box.exe -inter 500 -isma -hint 123.mp4
微信小程序视频组件控制
lzm150的博客
03-27 1万+
自己看微信小程序开发时的一些记录分享。 微信小程序中提供了一个video标签用于视频。已经为我们封装好了视频播放必须的多数功能，包括：暂停/开始，进度条，拖拽进度条，弹幕，全屏播放。 使用时需要编辑wxml与js文件。 wxml文件： 发送弹幕 跳转到50s播放 js文件： function getRandomColor () { let
微信小程序 Video 播放视频,宽高设置
我知道你很急,但是路要一步步走
11-09 3万+
1. wxml文件 &lt;view class="section"&gt; &lt;video class= "videoCss" src='{{url}}' objectFit='cover' show-center-play-btn = true controls danmu-btn page-gesture = "true" enable-progress-gesture =...
小程序禁止左右拖动_网课视频快进小技巧
weixin_39626237的博客
12-24 1万+
目前很多网课教程网站都是采取播放内嵌Flash视频课件进行教学的方式，且绝大部分屏蔽了视频快进（倍进）播放功能，只能等待整段视频缓冲完成后才可对视频时间轴进度条进行拖拽操作，加上网站课件视频缓冲速度较慢（有些可以说是龟速），在使用的时候增加了相当多的时间成本，尤其对于某些要刷课时的网站更是费时费力。下面的方法可以很好地解决这一问题。 本人平时使用的是谷歌浏览器，下面以谷歌浏览器为例...
uniapp微信小程序video标签指定播放位置（initial-time属性不生效）
m0_55258023的博客
09-21 4645
uniapp微信小程序video标签指定播放位置（initial-time属性不生效）
微信小程序canvas编辑器（真机可用）
03-15
3. **CSS布局**：理解微信小程序的样式系统，掌握flex布局和相对定位，以便正确地在页面上放置canvas元素和其他UI组件。 4. **绘图原理**：理解canvas的绘图原理，包括像素操作、坐标系统、路径绘制等。 5. **事件...
饿了吗微信小程序源码.zip
07-13
"饿了吗微信小程序源码.zip" 是一个包含饿了么平台微信小程序的源代码压缩包。这个源码可能包括了整个微信小程序的前端界面、逻辑处理、数据接口以及相关的配置文件，供开发者学习、研究或者二次开发使用。下面将...
微信小程序-原生-使用微信开发者工具
09-05
微信小程序提供了地图组件和位置接口，可以方便地在小程序中实现地图展示、定位、路径规划等功能。 8. **支付功能**： 微信小程序集成了微信支付接口，开发者可以轻松实现商品购买、充值等涉及支付的业务。 9. *...
微信小程序 实例汇总 完整项目源代码
12-20
9. **调试和发布**：微信开发者工具提供了一套完善的调试环境，包括真机预览、模拟器调试、性能监控等功能，帮助开发者快速定位并解决问题。完成开发后，需要按照微信的审核规则提交审核，然后才能发布上线。 这个...
微信小程序获取地理位置失败原因及解决方案
铁锤妹妹的博客
09-22 4万+
微信小程序获取用户地理位置失败的原因主要有3种情况：
【微信小程序】video视频组件问题
热门推荐
小平果的欢乐谷
12-02 5万+
前言将babel捧作前端一个划时代的工具一定也不为过，它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网？反正我是不放心，我就曾经过被坑过，于是萌生了研究babel代码转换的想法。本文不是分析babel源码，仅仅是看看babel转换的最终产物。es6在babel中又称为es2015。由于es2015语法众多，本文仅挑选了较为常用的一些语法点，而且主要是分析babel-
微信小程序video控件的使用
hacjy
03-19 4万+
微信小程序video控件的使用 微信小程序video控件的使用 一、简介 二、属性 三、相关实现api 1、wx.createVideoContext 2、videoContext对象 四、代码实现 实现效果，如下图 实现原理： 一、简介 video控件是微信小程序提供的系统组件之一，用于实现播放视频的功能。 二、属性 | 属性名 | 类型...
微信小程序获取地理位置，在真机上报错
qq_41620704的博客
07-17 2516
小程序需要获取城市名，通过wx.getLocation()获取经纬度，调用腾讯地图qqmapsdk.reverseGeocoder()获取城市名称，在开发者工具上能成功，但在真机上报错：fail url not in domin list ，找到原因是 实际上是 所以最后解决办法是设置合法域名，这样就ok了...
微信小程序-相对定位与绝对定位
WinFanChen的博客
04-24 6687
相对定位：元素是相对自身进行定位绝对定位：元素是相对于离他最近的一个已经定位的父元素进行定位相对定位：position:relative;//某一元素相对于父元素激活相对定位布局，position（位置、立场）relative（相对布局）left:150px;    top:150px//距离左边间隔150px，距离顶部150px绝对定位：当某一元素启用绝对定位元素时，他要空出自己的位置这是另一篇...
解决微信小程序视频组件层级过高的问题
weixin_34032827的博客
01-17 1092
本文首发于我的个人博客：http://www.fogcrane.org 前言 在微信小程序的开发中，总有一些“VIP”组件，他们的层级，高得让人抓狂，总是凌驾于很多其他低层级组件之上。诸如：video组件、map组件、canvas组件等。现在就让我来讲讲如何巧妙的解决掉这个问题。 问题描述 由于视频组件层级过高并且无法使用z-inde...
【微信小程序控制硬件②】 开始微信小程序之旅，导入小程序Mqtt客户端源码，实现简单的验证和通讯于服务器.（附带源码）
徐宏的博客 | 修身齐家治国平天下
03-13 2万+
本博文由热爱分享热爱技术的半颗心脏原创，非官方人员、非组织名义编写，博文如有不对或侵犯您的权益，请及时留言，第一时间纠正！ 【微信小程序控制硬件①】 全网首发，借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器，轻松控制智能硬件！ 文章目录一、前言；二、注册微信小程序；三、本博文连接和微信物联有何区别；四、微信小程序`MQTT`客户端源码导入注意事项； 一、前言； 继续我...
微信小程序Video组件实现视频倍速播放
程序人生
03-12 4万+
要在小程序中实现视频倍速播放功能，在微信小程序api开发文档中有描述： https://developers.weixin.qq.com/miniprogram/dev/api/VideoContext.playbackRate.html?search-key=rate， 支持05/0.8/1.0/1.25/1.5倍率 下面整个demo: https://developers.weixin.q...
微信小程序模拟显示图片但是真机调试图片不显示
最新发布
03-30
### 微信小程序真机调试图片不显示问题分析 微信小程序在开发过程中，经常会出现模拟器运行正常而真机调试出现问题的情况。针对图片在模拟器中可见而在真机调试时不显示的问题，可以从以下几个角度进行排查和解决。 #### 1. **图片路径问题** 确保图片的路径设置正确。如果图片存储在本地目录下，则需要确认其相对路径是否匹配实际文件位置；如果是网络图片，则需验证URL的有效性和域名配置是否允许跨域访问[^3]。 ```javascript // 正确的本地图片路径示例 <image src="/images/example.png"></image> // 正确的远程图片路径示例 <image src="https://example.com/images/example.png"></image> ``` #### 2. **Skyline 渲染引擎的影响** Skyline 是微信小程序的一种优化渲染模式，默认开启时可能导致部分样式或资源加载异常。尝试通过关闭 Skyline 来观察是否有改善效果。 在 `app.json` 或页面级配置中加入以下字段禁用 Skyline： ```json { "skyline": false } ``` #### 3. **缓存机制冲突** 模拟器与真机之间的缓存策略可能存在差异。当图片未及时更新或者被错误缓存时，也可能导致真机无法正确加载图像。可以通过清除真机上的应用数据来排除此类可能性[^4]。 #### 4. **权限控制与HTTPS协议支持** 微信小程序严格要求所有外部资源均需采用 HTTPS 协议传输。因此，请务必检查所使用的图片链接是否满足此条件。另外还需注意是否存在 CORS (跨源资源共享) 的限制因素影响到真实设备环境下的表现[^5]。 #### 5. **版本适配问题** 不同版本的小程序基础库对于API的支持程度有所不同，尤其是涉及到Canvas绘图、二维码生成等功能模块时更容易暴露出兼容性缺陷。建议升级至最新稳定版的基础库后再做进一步测试对比。 --- ### 总结 综上所述，造成微信小程序真机调试期间图片丢失的原因可能是多方面的综合结果，包括但不限于上述提到的各项要点。逐一排查这些潜在隐患有助于最终定位并修复该类故障。 ```python def check_image_display(): """ A function to simulate checking image display issues. This is a conceptual example and not actual implementation code. """ paths = ["local", "remote"] for path_type in paths: if validate_path(path_type): print(f"{path_type} images are correctly displayed.") else: print(f"There might be an issue with {path_type} images.") def validate_path(type_): """Placeholder validation logic.""" return True if type_ == 'local' else False ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值