uniapp 踩过的坑

uniApp挖坑指南:

1.

一切涉及到要获取Dom进行操作的方法都不能快设备跨端编译,微信端与app都不能获取到document window 等等。

2.

先结论:不要尝试修改默认组件的css样式。例如:scroll-view,swiper等等,使用less或者是scss,必定尝试着“deep”或“>>>” 进行深度查找来修改样式,但是仅仅只会在h5端进行生效,编译到微信端,并未生效(原因:编译过后的dom节点与h5编译过后的节点不一致,节点上的class,子级节点数量都可能不一致)

下面以scroll-view 实例说明:
(1) H5编译的结果为:在这里插入图片描述

从父级到最里边层级依次为(标签名/className):

uni-scroll-view =》uni-scroll-view =》uni-scroll-view =》uni-scroll-view-content =》uni-view 所以一共是5层;一个scroll-view编译成h5后 ,生成了uni-scroll-view =》uni-scroll-view =》uni-scroll-view =》uni-scroll-view-content 这样四层dom

(2)我们再看看微信小程序端编译的结果为:
在这里插入图片描述
好家伙:scroll 就是只有一层;近乎是没有编译(uniapp与微信过于类似【不清楚他们的关系】),所以问题来了,当现在在uni-scroll-view上面设置的css样式会在微信端生效吗?答案是肯定的:不会。 所以这时候:想要所有端样式一致怎么办?请使用“条件编译”;
条件编译官网链接:https://uniapp.dcloud.io/platform

3.

Scroll-view 组件使用踩坑(横向滚动)
当你使用:scroll-x属性的时候,发现并不能实现横向滚动,仔细查看官网api
也并没有发现任何问题,在网上并没有发现好的方法,也可能我这其他样式影响吧。
但是即使我不写任何样式,也不能换行,握草:完全蒙蔽。
仔细一想(原因): view默认是block元素,而他的父级也没有任何操作(flex布局),
那就肯定会换行呀! 那还滚动个啥!
解决方法:
在这里插入图片描述

将其scroll-view 样式添加:white-space: nowrap; view添加display: inline-block;
不得不吐槽:这个封装封装了个半成品。多两句代码要死吗?不然设置个scroll-x为true;有什么用呢。
注意:最好不要手动修改scroll-view的默认样式(所有的uniapp组件):你要跨端的话,h5端当我没说(但是养成好的习惯总是好的)。

UniApp 中开发支持 WebRTC 的语音直播间,兼容 Android、iOS 和 H5 平台,是一个涉及多方技术整合的项目。以下是开发指南及常见问题的总结。 ### ### 1. 开发准备 首先,确保使用最新版本的 UniApp 框架,并引入必要的插件或原生模块来支持 WebRTC 功能。由于 UniApp 默认不直接支持 WebRTC,需通过以下方式实现: - 对于 App 平台(Android/iOS),可以集成第三方 SDK 或使用 uni.createWebRTCContext 接口(如果平台已支持)。 - 对于 H5 平台,则可以直接使用浏览器内置的 WebRTC API。 ### ### 2. 实现流程 #### 创建信令服务器 WebRTC 需要一个信令服务器用于交换媒体信息(如 SDP offer/answer)。可使用 WebSocket 构建简易的信令服务端,推荐 Node.js + Socket.IO 实现。 ```javascript const express = require('express'); const app = express(); const server = require('http').createServer(app); const io = require('socket.io')(server); io.on('connection', socket => { console.log('Client connected'); socket.on('offer', data => { socket.broadcast.emit('offer', data); }); socket.on('answer', data => { socket.broadcast.emit('answer', data); }); socket.on('candidate', data => { socket.broadcast.emit('candidate', data); }); }); server.listen(3000, () => { console.log('Signaling server running on port 3000'); }); ``` #### 客户端逻辑 在 UniApp 中处理 WebRTC 连接时,不同平台需要注意如下差异: - **H5**:直接使用 `RTCPeerConnection` 和 `RTCSessionDescription` 等标准 WebRTC API。 - **App(Android/iOS)**:由于 UniApp 原生层可能未完全暴露 WebRTC API,通常需要依赖插件或自定义打包,例如使用 [uniRTC](https://ext.dcloud.io/) 插件或自行封装 WebRTC SDK。 ```javascript // 示例:H5端创建本地流并连接远端 async function startLocalStream() { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const pc = new RTCPeerConnection(); stream.getTracks().forEach(track => pc.addTrack(track, stream)); // 处理 ICE 候选 pc.onicecandidate = event => { if (event.candidate) { socket.emit('candidate', event.candidate); } }; // 创建 Offer const offer = await pc.createOffer(); await pc.setLocalDescription(offer); socket.emit('offer', offer); // 设置远程描述 socket.on('answer', async answer => { await pc.setRemoteDescription(new RTCSessionDescription(answer)); }); // 接收远端 ICE 候选 socket.on('candidate', candidate => { await pc.addIceCandidate(new RTCIceCandidate(candidate)); }); } catch (err) { console.error('Error accessing media devices.', err); } } ``` ### ### 3. 兼容性与常见问题 #### iOS Safari 自动播放限制 Safari 浏览器默认禁止自动播放音频,除非用户主动与页面交互。因此,在 iOS 上进入房间后默认静音,需引导用户点击“取消静音”按钮以触发音频播放权限[^2]。 #### 权限申请 在 Android 和 iOS 上访问麦克风时,必须动态请求权限。UniApp 提供了 `uni.authorize` 和 `uni.getSystemInfoSync()` 等接口进行权限判断和申请。 ```javascript uni.authorize({ scope: 'scope.record', success() { console.log('麦克风权限已授权'); }, fail() { uni.showModal({ title: '提示', content: '需要麦克风权限,请前往设置开启', success(res) { if (res.confirm) { uni.openSetting(); } } }); } }); ``` #### 编码格式与网络稳定性 WebRTC 支持多种编码格式(如 OPUS、G.711 等),应根据场景选择合适的编码器。同时,为应对弱网环境,建议启用 FEC(前向纠错)、NACK(重传机制)等特性提升通话质量。 #### 页面生命周期管理 在 UniApp 中切换页面或进入后台时,应妥善处理 WebRTC 连接状态,避免资源泄漏。可在 `onUnload` 或 `onHide` 生命周期中关闭连接并释放资源。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值