uniapp(uni-app小程序开发踩坑记录)
uniapp
uniapp？很多人不了解，今天生活常识网为大家带来相关内容，下面为大家带来介绍。
邀请基本流程发起被叫接收呼叫、主叫接收呼叫拒绝通知、主叫接收呼叫、主叫呼叫、执行RTC相关逻辑、被叫接收呼叫、被叫拒绝呼叫、执行RTC60s无操作邀请、呼叫基本流程自动失败、本地采集音视频、通过回调获取远程音视频、初始化RTC实例、加入房间、发布和渲染音视频、渲染远程音视频arcall工具实现demo源地址(https://pic.qubaike.com/pic/2023-04-02/fxucrgro5ks//rtm实时消息引入constratmmodule=uni . requirement plugin(' ar-RTM module ')；初始化uniapp_arcall的邀请是项目启动时登录RTM，所以写在onLaunch，调试时会出现以下错误
//初始化回调以等待RTM module . set callback(RES={ switch(RES . RTM event)} {//SDK与RTM系统的连接状态发生变化。case“onConnectionStateChanged”:中断；//接收到的点对点消息回调case“onpeermessagereceived”3360 break；//已订阅用户的联机状态更改案例“onpeersonlinestatuschanged”3360 break；//返回主叫：被叫方已接受呼叫邀请case ' onlocalizationaccepted ' 3360 break；//返回调用方：调用邀请已取消case ' onlocaltationcancelled ' 3360 break；//返回给调用者：呼叫邀请过程失败案例“on local invitation failure”3360 break；//返回主叫：被叫方已收到呼叫邀请案例‘onlocalizationreceivedtype’3360 break；//返回主叫：被叫方已拒绝呼叫邀请案例“onlocaltationretired”3360 break；//返回被叫方：成功接受呼叫邀请案例‘接受远程邀请’3360 break；//返回被叫方：主叫方取消了呼叫邀请案例“远程邀请取消”3360break//返回被叫方：来自主叫方的呼叫邀请流程失败案例“on remote invitation failure”3360 break；//返回给被叫方：收到呼叫邀请案例“on remote invitation received”3360 break；//返回被叫方：成功拒绝呼叫邀请案例“拒绝远程邀请”3360
break;default:break;}})// 初始化实例await rtmModule.createInstance({"appId": "你的 appid"}, res => {console.log(res);})// 登录 RTM 系统await rtmModule.login({"token": "","userId": "本地用户标识"}, (res) => {console.log("登录 RTM 系统", res);})// // 使用 RTM 呼叫邀请(设置邀请呼叫实例的监听器)await rtmModule.setCallEventListener();主叫查询呼叫用户是否在线rtmModule.queryPeersOnlineStatus({ "peerIds": }, (res) => { console.log(res); })呼叫用户在线时发起呼叫并订阅发起呼叫 把本地创建的频道房间发送过去rtmModule.sendLocalInvitation({ "calleeId": calleeId, // 被呼叫者的 user ID "content": JSON.stringify(info) // 邀请内容 }, (res) => { resolve(res.code); })订阅(获取对方在线状态) 当结束通话或结束邀请时记得取消订阅
拒绝呼叫rtmModule.refuseRemoteInvitation({"calleeId": userId,"response": JSON.stringify(info) /邀请内容}, (res) => {});接受呼叫rtmModule.acceptRemoteInvitation({"calleeId": calleeId, // 供被叫获取主叫的用户 ID"response": info ? JSON.stringify(info) : "" // 邀请响应}, (res) => {});// 订阅对方在线状态...相关提示相关的提示、逻辑都可通过回调来进行操作
<AR-CanvasView ref="location" style="flex: 1;" />不管是主叫还是被叫，收到接听的回调后就可以进入 RTC 的相关逻辑
Store.remote 与 Store.location 类似
需要更详细，更具体，更全面的代码请前往 demo 源码 地址（https://pic.qubaike.com/pic/2023-04-02/3sazoa2ojj4注意事项RTM 初始化、RTC 初始化都只需要执行一次，多次执行请杀掉程序RTM 可以在 vue页面, RTC 视频容器必须在 nvue 页面
uni-app小程序开发踩坑记录
最近要从零开发一个跟后台管理系统对接的小程序，因为功能比较复杂，时间短，选择了比较火的uni-app，因为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。
uni-app虽然功能还不完善，但是插件市场里东西还是不少的，在搭建框架中因为需求要求借鉴了之前开发的PC端，所以有一些跟之前开发VUE相关的插件 ，可以提高开发效率，
插件：
坑：
1.覆盖原生组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成cover-view，且icon无法显示，可以用cover-imaga代替。
2.小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行操作，此时可以判断app.vue中的options，如果按小程序文档中来说当options.scene === 1038时是小程序跳回来的场景，但是部分手机跳回来是options.scene为1001，只能将这2种都作为跳转判断的条件。
3.小程序跳转回来app中的onshow有时不执行，这个原因暂未找到
4.在uniapp的H5版本 ，接入 腾讯云滑动验证 ，示例的点击滑动验证元素是通过dom操作的，但是无效，可能跟uniAPP不支持dom操作有关系，采用定制接入方法一，手动调用。
uni-app获取dom节点信息
首先明白一点，uni-app提供的view、button、image、text通通都是组件，不是h5的标签，虽然用起来方便，但如果你想获取dom节点信息，尽管给组件绑定一个id选择器，用document.getElementById()等这种传统的JS获取dom方式是没有任何效果。
因为他们是组件，除非你不用这些现成的组件，用回h5的标签。
所以你如果想获取uni-app提供组件的DOM元素，需要如下的方法。
uni.createSelectorQuery().in(this);用于创建一个实例。
in(this)在这里是为了规范页面创建实例，避免获取不到实例报null，用上总没错
query.select('#text')用于选择DOM节点
boundingClientRect()返回dom节点的相关信息
拿到的是一些元素本身的宽高信息、距离页面四边的距离。
使用uni.createSelectorQuery()创建dom实例，需要在这个mounted()生命周期里面进行，这个生命周期它代表组件已经创建完成，可以挂载实例，进而获取dom元素
如果不写在mounted生命周期里，你也可以写在methods方法定义里面，不过你需要这样来调用。
为什么要用uni-app，优势在哪里？
优势
注意：
性能优化可以参考官网文档
小程序优化
个人认为：做一个对原生组件自定义需求不高的项目，比如商城，外卖，CRM，OA，社区，会员管理，营销工具等都是完全没问题，而且官方有插件市场，可以直接用，也可以找人定制。
大大降低了一个项目的启动成本，招一两个前端即可开干。
【uni-app】Vuex介绍和使用
无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装
uni-app也像小程序一样有 globalData ，这是一种简单的 全局变量 机制
globalData 是简单的全局变量，如果使用状态管理，请使用 vuex
项目文件结构
1.在 main.js 中导入store文件。
2.组装模块并导出 store
3.定义cart.js模块(这里以购物车为例)
4.定义根级别的getters
5.使用
查看下效果
点击添加按钮
本文来自网络，不代表生活常识网立场，转载请注明出处：http://sdsy56.com/qitalicai/31683.html
上一篇: 支付宝账户安全险保额变成了一万
声明： 我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本站部分文字与图片资源来自于网络，转载是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们(管理员邮箱：15053971836@139.com)，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!
相关阅读