uniapp开发小程序遇到的问题,持续更新中

一、uniapp引入全局scss

在App.vue中引入uni.scss

<style lang="scss">/* #ifndef APP-NVUE */@import "uni.scss";/* #endif */
</style>

注意:nvue页面的样式在编译时,有很多样式写法被限制了,容易报错。所以使用了 #ifndef App-NVUE 判断一下

在uni.scss中引入自定义scss

@import "@/static/style/common.scss";

通过uni.scss引入的样式表。可以继承其中的样式

例如 common.scss中的样式

common.scss
.common{background:#f00}

在index.vue中可以继承其中的央视

index.vue
<style lang="scss">.test-common{@extend .common}
</style>

二、引入iconfont阿里巴巴图标库

1.下载项目图标

在这里插入图片描述

2.将所需文件放入到项目中

在这里插入图片描述

一般放在static文件夹下

3.全局引用

在这里插入图片描述
在app.vue中全局引用

注意:小程序不支持tabBar引用iconfont

//pages.json"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","height": "50px","fontSize": "10px","iconWidth": "24px","spacing": "3px","iconfontSrc":"static/icon/iconfont.ttf", // list设置 iconfont 属性时,需要指定字体文件路径,支持App 3.4.4+、H5 3.5.3+"list": [{"pagePath": "pages/index/index","text": "首页",//"iconPath":'',图片路径,各平台无差异"iconfont": {//不支持微信小程序,App(3.4.4+)、H5 (3.5.3+)"text": "\ue66c","color": "#515151","selectedText": "\ue66c","selectedColor": "#1296db"}}]},

三、实时音视频

1.文档及demo

官方文档:
https://www.tencentcloud.com/zh/document/product/647/35150
https://cloud.tencent.com/document/product/647/32399
demo:https://github.com/LiteAVSDK/Live_WXMini

2.引入trtc-room微信组件

在这里插入图片描述

注意:微信组件一定要放在wxcomponents目录中,否则打包的时候会报错。在根目录下创建wxcomponents目录,将trtc-room放进去。

3.代码

<trtc-room id="trtcroom" :config="trtcConfig"></trtc-room>data
trtcConfig: {sdkAppID: '',// 注册腾讯云账号写入自己的SDKAppIDuserID: '',// 用户IDuserSig: '',// 身份签名template: 'grid',// 画面排版'1v1' 'grid' 'custom',1v1一般用于双人通话,grid适用于多人,custom是自定义面板enableCamera: true,// 是否开启摄像头enableMic: true,// 是否开启麦克风videoHeight: "453", // 视频高videoAspect: '3:4',
}
//进入房间,监听网络状态和error
videoStart () {var that = thislet trtcRoomContext = this.$scope.selectComponent('#trtcroom')trtcRoomContext.enterRoom({roomID: 12345})//roomId的数据类型为数字let EVENT = trtcRoomContext.EVENT// 监听远端用户的视频流的变更事件trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, (event)=>{// 订阅(即播放)远端用户的视频流})// 本地网络相关状态变更trtcRoomContext.on(EVENT.LOCAL_NET_STATE_UPDATE, (event)=>{//netQualityLevel网络质量:0:未定义 1:最好 2:好 3:一般 4:差 5:很差 6:不可用const netQualityLevel = event.data.detail.info.netQualityLevelif(netQualityLevel > 3){uni.showToast({title: '您的网络状态较差',icon:'none',duration: 1500});}console.log('本地网络相关状态变更', netQualityLevel)})// 远端网络相关状态变更trtcRoomContext.on(EVENT.REMOTE_NET_STATE_UPDATE, (event)=>{// netQualityLevel 对应网络状态的好坏,1 代表最好,数字越大代表网络越差let netQualityLevel = event.data.detail.info.netQualityLevelif(netQualityLevel > 3){uni.showToast({title: '对方的网络状态较差',icon:'none',duration: 1500});}console.log('远端用户网络相关状态变更', netQualityLevel)})trtcRoomContext.on(EVENT.ERROR,(event)=>{console.log('error',event)const code = event.code;const msg = event.msg;let that = this;switch (code){case -3301://进入房间失败uni.showModal({title: '进入房间失败',content: '请点击刷新按钮',showCancel:false,confirmText:'刷新',success: function (res) {if (res.confirm) {that.updateVideo()} }});break;case -1307://网络断连,且经多次重连抢救无效uni.showModal({title: '网络连接异常',confirmText:'继续复诊',success: function (res) {if (res.confirm) {//先停止再重新播放渲染that.updateVideo()//判断是否断网that.getNetworkType()} else if (res.cancel) {//判断是否断网that.getNetworkType()}}});break;}})// 进房成功后发布本地音频流和视频流 trtcRoomContext.publishLocalVideo()trtcRoomContext.publishLocalAudio()},
//退出房间重新推流
updateVideo(){const that=this;let trtcRoomContext = that.selectComponent('#trtcroom')trtcRoomContext.exitRoom()that.videoStart();	   	
},
//获取网络情况
getNetworkType(){wx.getNetworkType({success (res) {const networkType = res.networkType;if (networkType != "none") {  //对方网络异常或异常退出uni.showToast({title: '对方网络不佳,正在努力恢复',icon:'none',duration: 2000});} else { //客户自个儿的网络异常uni.showToast({title: '请检查你的网络连接是否正常',icon:'none',duration: 2000});}}})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++ leetcode】双指针(专题完结)

15. 三数之和 题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的…

驱动器的工艺结构原理及选型参数总结

🏡《总目录》 目录 1,概述2,工作原理2.1,信号转换2.2,电流放大2.3,电压级转换2.4,控制输出3,结构特点3.1,高集成度3.2,多功能性3.3,高性能3.4,省电节能3.5,稳定可靠4,工艺流程<

面试经典150题【101-110】

文章目录 面试经典150题【101-110】9.回文数61.加一172.阶乘后的069.x的平方根50.Pow(x,n)149.直线上最多的点数52.N皇后II120.三角形最小路径和64.最小路径和63.不同路径II 面试经典150题【101-110】 6道偏数学的题和4道二维dp 9.回文数 一开始想转为字符串再判断。后来发现…

信号处理--基于混合CNN和transfomer自注意力的多通道脑电信号的情绪分类的简单应用

目录 关于 工具 数据集 数据集简述 方法实现 数据读取 ​编辑数据预处理 传统机器学习模型(逻辑回归&#xff0c;支持向量机&#xff0c;随机森林) 多层感知机模型 CNNtransfomer模型 代码获取 关于 本实验利用结合了卷积神经网络 (CNN) 和 Transformer 组件的混合…

五-容量管理之容量预案

容量预案(Capacity Plan)是容量管理的一个重要组成部分。 容量预警条件和措施&#xff1a; 类型预警条件措施应用服务器Load95分位值大于CPU核数的2倍 前一天CPU 95分位值大于90% 内存使用率95分位值大于90%增加应用服务器数据库数据库连接超过200扩容DB服务规格/ 优化SQL查询…

windows下powershell与linux下bash美化教程(使用starship)

starship美化教程 Win11 Powershell 安装 在命令行使用下面命令安装 # 安装starship winget install starship将以下内容添加到 Microsoft.PowerShell_profile.ps1&#xff0c;可以在 PowerShell 通过 $PROFILE 变量来查询文件的位置 Invoke-Expression (&starship i…

【HBZ分享】Kafka为什么性能非常高

Kafka性能高的原因 磁盘顺序读写&#xff1a;磁盘顺序读写的性能可以和内存相媲美&#xff0c;顺序读写不需要寻道时间&#xff0c;也不需要大幅旋转磁头找扇区&#xff0c;所以性能极高 零拷贝&#xff1a; 大幅降低了用户态与内核态之间的切换&#xff0c;从而减少了数据来回…

Chrome安装Vue插件vue-devtools

安装Vue.js开发者工具&#xff08;Vue DevTools&#xff09;到Google Chrome浏览器的步骤可能会随着Vue DevTools更新和Chrome政策变化而有所调整。 1.从GitHub获取源代码&#xff1a; 访问Vue DevTools的GitHub仓库&#xff1a;https://github.com/vuejs/vue-devtools 根据仓…

web学习笔记(四十五)Node.js

目录 1. Node.js 1.1 什么是Node.js 1.2 为什么要学node.js 1.3 node.js的使用场景 1.4 Node.js 环境的安装 1.5 如何查看自己安装的node.js的版本 1.6 常用终端命令 2. fs 文件系统模块 2.1引入fs核心模块 2.2 读取指定文件的内容 2.3 向文件写入指定内容 2.4 创…

sql oracle 获取当前日期的最后一天

语法 LAST_DAY 传入一个日期类型的变量&#xff0c;但会给你一个当月的最后一天的变量 LAST_DAY(TO_DATE(year || - || SUBSTR(month, -2) || -01, YYYY-MM-DD)) < ?应用实例 AssetValueSingleQT.spl 一个表中只存储的年和月&#xff0c;需要更具年月筛选小于指定日期&…

yarn按包的时候报错 ../../../package.json: No license field

运行 yarn config list 然后运行 yarn config set strict-ssl false 之后yarn就成功了

基于SpringBoot“网上选课系统”设计和实现(源码定制以及咨询!!)

博主介绍&#xff1a;✌全网粉丝10W,B站项目阿龙、csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、华为云获奖者&#xff0c;“程序员阿龙”✌ 主要内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python&#xff0c;MYSQL、Hodpoo…

网络工程师软考中级考试大纲

考试要求&#xff1a; &#xff08;1&#xff09;熟悉计算机系统的基础知识&#xff1b;&#xff08;2&#xff09;熟悉网络操作系统的基础知识&#xff1b;&#xff08;3&#xff09;理解计算机应用系统的设计和开发方法&#xff1b;&#xff08;4&#xff09;熟悉数据通信的基…

SpringBoot2.6.3 + knife4j-openapi3

1.引入项目依赖&#xff1a; <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-spring-boot-starter</artifactId><version>4.5.0</version> </dependency> 2.新增配置文件 import io.swag…

Docker搭建LNMP环境实战(05):CentOS环境安装Docker-CE

前面几篇文章讲了那么多似乎和Docker无关的实战操作&#xff0c;本篇总算开始说到Docker了。 1、关于Docker 1.1、什么是Docker Docker概念就是大概了解一下就可以&#xff0c;还是引用一下百度百科吧&#xff1a; Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以…

【机器学习之---数学】随机游走

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 随机游走 1. 概念 1.1 例1 在你的饮食俱乐部度过了一个富有成效的晚上后&#xff0c;你在不太清醒的状态下离开了。因此&#xff0c;你会醉醺醺地在展…

【OpenStack】在本地OpenStack中创建一个应用及其网络

【OpenStack】在本地OpenStack中创建一个应用及其网络 目录 【OpenStack】在本地OpenStack中创建一个应用及其网络应用程序设计创建项目创建一个新项目使用新项目创建网络创建我们的应用程序VNET创建路由器更新安全组创建浮动IP结论推荐超级课程: Docker快速入门到精通Kuberne…

计算机视觉中的NMS非极大值抑制

NMS 是“非极大抑制”&#xff08;Non-Maximum Suppression&#xff09;的缩写&#xff0c;是一种在目标检测算法中广泛使用的技术。它的主要目的是减少目标检测过程中的多余的边界框&#xff0c;以便只保留最佳的一个边界框。 在目标检测任务中&#xff0c;算法会对图像中可能…

数据结构(五)单链表专题

在开始之前&#xff0c;我先来给大家讲一下顺序表与链表的区别&#xff1a; 它们在堆上存储的差异&#xff1a; 我们可以很容易的知道&#xff0c;循序表是连续的有序的&#xff0c;但链表是杂乱的&#xff0c;它们通过地址彼此联系起来。 1. 链表的概念及结构 概念&#xff1…

智慧交通(代码实现案例)

1.项目简介 目标: 了解智慧交通项目的架构知道智慧交通项目中的模块能够完成智慧交通项目的环境搭建 该项目是智慧交通项目&#xff0c;通过该项目掌握计算机视觉的方法在交通领域的相关应用&#xff0c;包括车道线检测的方法&#xff0c;多目标车辆追踪及流量统计方法&#…