当前位置：首页 > news >正文

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

news 2025/8/17 2:25:20

一、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});}}})
}