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

news2024/12/23 11:23:39

一、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: '',// 注册腾讯云账号写入自己的SDKAppID
	userID: '',// 用户ID
	userSig: '',// 身份签名
	template: 'grid',// 画面排版'1v1' 'grid' 'custom'，1v1一般用于双人通话，grid适用于多人，custom是自定义面板
	enableCamera: true,// 是否开启摄像头
	enableMic: true,// 是否开启麦克风
	videoHeight: "453", // 视频高
	videoAspect: '3:4',
}

//进入房间，监听网络状态和error
videoStart () {
	var that = this
	let 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.netQualityLevel
		if(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.netQualityLevel
		  if(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.coloradmin.cn/o/1547424.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

干货分享DS5L1伺服电机通过倍讯科技485转 Profinet 网关与西门子PLC进行通信的配置方法

干货分享DS5L1伺服电机通过倍讯科技485转 Profinet 网关与西门子PLC进行通信的配置方法

倍讯科技485转 ProfinetDS5L1 伺服电机与 Profinet 网关进行通信需要了解 Profinet 协议和伺服电机的具体通信要求。以下是您可以如何解决此问题的总体概述&#xff1a; 了解 Profinet&#xff1a;Profinet 是自动化工业以太网标准。您需要了解 Profinet 的工作原理、其寻址方案…
阅读更多...
2024 解决 Failed to launch process [ElasticSearch]

2024 解决 Failed to launch process [ElasticSearch]

操作系统&#xff1a;centos 7 (x86) sonarQube不能使⽤root账号进⾏启动&#xff0c;所以需要创建普通⽤户及其⽤户组 一、问题描述&#xff1a;使用root启动时&#xff0c;一直反馈 SonarQube is not running 问题原因&#xff1a;不能够使用root用户进行启动 解决方案…
阅读更多...
三点估算计算

三点估算计算

当历史数据不充分时&#xff0c;通过考虑估算中的不确定性和风险&#xff0c;可以提高活动持续时间估算的准确性。使用三点估算有助于界定活动持续时间的近似区间: 乐观时间&#xff08;Optimistic Time&#xff0c;To&#xff09;&#xff1a;在任何事情都顺利的情况下&#…
阅读更多...
DFS深度优先搜索刷题（二）

DFS深度优先搜索刷题（二）

一.P1683 入门 算法思想&#xff1a;设置瓷砖状态st&#xff0c;这里瓷砖状态是否走过决定计数与否&#xff0c;因为可以重复走过但只记一次&#xff0c;所以可以不用回溯。每一次dfs都记录此时的坐标与进入可能的新坐标。 const int N 25;int W, H; char map[N][N];//存地图…
阅读更多...
20240319-2-机器学习基础面试题

20240319-2-机器学习基础面试题

⽼板给了你⼀个关于癌症检测的数据集&#xff0c;你构建了⼆分类器然后计算了准确率为 98%&#xff0c; 你是否对这个模型很满意&#xff1f;为什么&#xff1f;如果还不算理想&#xff0c;接下来该怎么做&#xff1f; 首先模型主要是找出患有癌症的患者&#xff0c;模型关注的…
阅读更多...
苹果与百度合作，将在iPhone 16中使用生成式AI

苹果与百度合作，将在iPhone 16中使用生成式AI

3月25日&#xff0c;《科创板日报》消息&#xff0c;苹果将与百度进行技术合作&#xff0c;为今年即将发布的iPhone16、Mac系统和iOS 18提供生成式AI&#xff08;AIGC&#xff09;功能。 据悉&#xff0c;苹果曾与阿里巴巴以及另外一家国产大模型厂商进行了技术合作洽谈。最终…
阅读更多...
机器学习模型及其使用方法——《机器学习图解》

机器学习模型及其使用方法——《机器学习图解》

本书教你两件事——机器学习模型及其使用方法 机器学习模型有不同的类型&#xff0c;有些返回确定性的答案&#xff0c;例如是或否&#xff0c;而另一些返回概率性的答案。有些以问题的形式呈现&#xff1b;其他则使用假设性表达。这些类型的一个共同点是它们都返回一个答案或…
阅读更多...
单链表专题（上）（顺序表链表线性表）

单链表专题（上）（顺序表链表线性表）

在开始之前思考一个顺序表的问题 1. 中间/头部的插⼊删除&#xff0c;时间 复杂度为O(N) 2. 增容需要申请新空间&#xff0c;拷⻉数据&#xff0c;释放旧空间。会有不⼩的消耗。 3. 增容⼀般是呈2倍的增⻓&#xff0c;势必会有⼀定的空间浪费。例如当前容量为100&#xff0c;…
阅读更多...
HTML（二）---【常见的标签使用】

HTML（二）---【常见的标签使用】

零.前言 本文只介绍常见的标签使用&#xff0c;其中使用的一些HTML专业术语可以在作者的第一篇文章&#xff1a; HTML&#xff08;一&#xff09;---【基础】-CSDN博客中找到。 一.<b>粗体、<i>或<em>斜体 1.定义 粗体、斜体的实现可以在CSS中实现&…
阅读更多...
DaisyDisk for mac 苹果电脑磁盘清理工具

DaisyDisk for mac 苹果电脑磁盘清理工具

DaisyDisk for Mac是一款直观易用的磁盘空间分析工具&#xff0c;专为Mac用户设计&#xff0c;旨在帮助他们快速识别和管理磁盘上的文件与文件夹&#xff0c;从而释放存储空间。 软件下载&#xff1a;DaisyDisk for mac 激活版 DaisyDisk采用独特的可视化界面&#xff0c;将磁盘…
阅读更多...
基于uniapp微信小程序我的钱包页面

基于uniapp微信小程序我的钱包页面

基于uniapp color ui 页面效果图&#xff1a; 代码部分&#xff1a; https://download.csdn.net/download/kay523393/89035927
阅读更多...
微信商家转账到零钱:实用指南,涵盖开通、使用与常见问题

微信商家转账到零钱:实用指南,涵盖开通、使用与常见问题

商家转账到零钱是什么&#xff1f; 商家转账到零钱功能整合了企业付款到零钱和批量转账到零钱&#xff0c;支持批量对外转账&#xff0c;操作便捷。如果你的应用场景是单付款&#xff0c;体验感和企业付款到零钱基本没差别。 商家转账到零钱的使用场景有哪些&#xff1f; 这…
阅读更多...
CMake学习笔记（一）一个最简单的CMakeLists嵌套示例

CMake学习笔记（一）一个最简单的CMakeLists嵌套示例

目录 1 mkdir project_macro 2 在project_marco中建立CMakeLists.txt 3 建立专门的src文件夹 4 在src中添加main.cpp和CMakeLists.txt 5 回到project_macro目录&#xff0c;建立build文件夹 6 进入build 文件夹&#xff0c;开始cmake 7 在build文件夹里执行make指令 8 …
阅读更多...
Python7：接口自动化学习1 RPC

Python7：接口自动化学习1 RPC

API&#xff08;Application Programmming Interface&#xff09; 应用编程接口&#xff0c;简称“接口” 接口&#xff1a;程序之间约定的通信方法 特点&#xff1a;约定了调用方法&#xff0c;以及预期的行为&#xff0c;但是不透露具体细节 意义&#xff1a;程序能解耦&…
阅读更多...
自动化脚本-Excel批量生成二维码

自动化脚本-Excel批量生成二维码

演示&#xff1a; Excel二维码批量生成 exe资源文件&#xff1a; 下载exe 代码实现&#xff1a; pip install openpyxl openpyxl 是一个用于读写 Excel 文件的 Python 库 pip install qrcode qrcode 是一个 Python 库&#xff0c;可以用来生成二维码&#xff08;Quick Resp…
阅读更多...
【Mybatis 基础】增删改查(@Insert, @Delete, @Update, @Select)

【Mybatis 基础】增删改查(@Insert, @Delete, @Update, @Select)

Mybatis Insert Delete Update Select Mybatis用法基础操作 - 删除delete 传参SpringbootMybatisCrudApplicationTests 测试类删除预编译SQL 基础操作 - 插入Insert 插入SpringbootMybatisCrudApplicationTests 测试类插入对象主键返回 基础操作 - 更新UPDATE 更新SpringbootMy…
阅读更多...
汽车电子行业知识：智能汽车电子架构

汽车电子行业知识：智能汽车电子架构

文章目录 3.智能汽车电子架构3.1.汽车电子概念及发展3.2.汽车电子架构类型3.2.1.博世汽车电子架构3.2.2.联合电子未来汽车电子架构3.2.3.安波福汽车电子架构3.2.4.丰田汽车电子架构3.2.5.华为汽车电子架构 3.智能汽车电子架构 3.1.汽车电子概念及发展 汽车电子是车体汽车电子…
阅读更多...
8.windows ubuntu 子系统：karken2，bracken微生物物种注释

8.windows ubuntu 子系统：karken2，bracken微生物物种注释

上次&#xff0c;我们对测序数据去了人源序列。接下来我们就要对去人源的reads进行微生物物种注释。 我们选择karken2和bracken。 首先是建立karken2的数据库&#xff0c;有多种方法。 方法一&#xff1a;kraken2-build --standard --threads 4 --db ./standardDB #时间太…
阅读更多...
阿里云国际DDoS高防的定制场景策略

阿里云国际DDoS高防的定制场景策略

DDoS高防的定制场景策略允许您在特定的业务突增时段&#xff08;例如新业务上线、双11大促销等&#xff09;选择应用独立于通用防护策略的定制防护策略模板&#xff0c;保证适应业务需求的防护效果。您可以根据需要设置定制场景策略。 背景信息 定制场景策略提供基于业务场景…
阅读更多...
白话模电：4.耦合、差分、无源滤波、反馈(考研面试常问问题)

白话模电：4.耦合、差分、无源滤波、反馈(考研面试常问问题)

一、介绍一下三极管多级放大电路的三种耦合方式及其特点&#xff1f;耦合的目的是什么&#xff1f; 多级放大电路中各放大级之间的连接方式称为耦合方式。常见的耦合方式有三种&#xff1a;阻容耦合&#xff08;RC耦合&#xff09;、直接耦合和变压器耦合。 耦合的目的是将信号…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023