滚动条样式&切刀后台重进小程序需重连

pages/meeting/index.scss

@@ -74,6 +74,7 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   &-content {
     flex-grow: 1;

pages/meeting/index.ts

@@ -1,10 +1,13 @@
-import { GetRoomInfo, GetRoomUser, GetShowUser, GetApplySpeak, PostMuteAll, PostOpenMicr, PostOpenCamera, DeleteRoomManager } from '../../api/meeting/index'
+import { GetRoomInfo, GetRoomUser, GetShowUser, GetApplySpeak, PostMuteAll, PostOpenMicr, PostOpenCamera, DeleteRoomManager, PostRoomManager } from '../../api/meeting/index'
+import { GetRoomRtcToken } from '../../api/form/index'
 import { agora } from '../../utils/agora'
-import { onInvoke, onSignalr } from '../../utils/singlr'
+import { onInvoke, onSignalr, getSignIr, offSignalr } from '../../utils/singlr'
 import { role, getStorage } from '../../utils/utils'
 import { Message } from 'tdesign-miniprogram';
+import * as signalR from "signalr-for-wx";
 import dayjs from 'dayjs';
 const computedBehavior = require('miniprogram-computed').behavior;
+let reconnectTime = "" as any;
 Page({
   behaviors: [computedBehavior],
   data: {
@@ -92,7 +95,9 @@ Page({
       '听得到',
       '听不到',
       '我要发言',
-    ]
+    ],
+    isFirstShow: true,
+    isCurrePage: false,
   },
   watch: {
     'roomUserList.**': function (roomUserList) {
@@ -198,11 +203,91 @@ Page({
   onReady() {
     wx.onNetworkStatusChange(this.listener)
   },
+  onShow() {
+    this.setData({
+      isCurrePage: true
+    })
+    if (this.data.isFirstShow) {
+      this.setData({
+        isFirstShow: false,
+      })
+    } else {
+      const item = this.data.roomUserList.find(row => row.uid === this.data.user.uid)
+      if (item && !item.isRoomManager) {
+        wx.showLoading({
+          title: '重连中',
+        })
+        agora.destroy(() => {
+          reconnectTime = setInterval(() => {
+            if (getSignIr() === signalR.HubConnectionState.Connected) {
+              this.reconnecFun()
+              clearInterval(reconnectTime)
+              reconnectTime = ''
+            }
+          }, 2000)
+        })
+      }
+    }
+  },
+  onHide() {
+    this.setData({
+      isCurrePage: false
+    })
+    if (reconnectTime) {
+      clearInterval(reconnectTime)
+      reconnectTime = ''
+    }
+    wx.hideLoading()
+  },
   onUnload() {
     wx.offNetworkStatusChange(this.listener)
+    if (reconnectTime) {
+      clearInterval(reconnectTime)
+      reconnectTime = ''
+    }
+  },
+  async reconnecFun() {
+    offSignalr()
+    await GetRoomRtcToken(this.data.channelId).then(res => {
+      if (res.code === 200) {
+        agora.reconnecSetOption(res.data, async () => {
+          await this.joinChannel()
+          this.startClientEvent()
+          this.startSignalr()
+          await this.getRoomUser()
+          await this.getShowUser()
+          wx.hideLoading()
+          Message.success({
+            context: this,
+            offset: [90, 32],
+            duration: 3000,
+            content: '重连成功',
+          });
+        })
+      } else {
+        wx.hideLoading()
+        Message.error({
+          context: this,
+          offset: [90, 32],
+          duration: 3000,
+          content: '重连失败，请退出房间重试！',
+        });
+      }
+    }).catch(() => {
+      wx.hideLoading()
+      Message.error({
+        context: this,
+        offset: [90, 32],
+        duration: 3000,
+        content: '重连失败，请退出房间重试！',
+      });
+    })
   },
   startSignalr() {
     onSignalr(async (item) => {
+      if (!this.data.isCurrePage) {
+        return
+      }
       const userInfo: any = await getStorage('user')
       switch (item.key) {
         // 聊天
@@ -398,6 +483,13 @@ Page({
             })
           }
         });
+      },
+      tokenRef: () => {
+        GetRoomRtcToken(this.data.channelId).then(res => {
+          if (res.code === 200) {
+            agora.renewToken(res.data)
+          }
+        })
       }
     })
   },

pages/meeting/index.wxml

@@ -19,7 +19,7 @@
         <live-player id="player" src="{{currentUser.shareSrc}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" />
       </view>
       <view class="meeting-content-video-canvas" wx:elif="{{currentUser.src && currentUser.enableCamera}}">
-        <live-player id="player" src="{{currentUser.src}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" muted="{{currentUser.uid === user.uid}}" />
+        <live-player id="player" src="{{currentUser.src}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" muted="{{currentUser.uid === user.uid}}" />
       </view>
       <view class="meeting-content-video-user">
         <view class="meeting-content-video-user-view" style=" background:{{currentUser.roleId === '1' || currentUser.roleId === '3'? '#FDC229' : '#3F51B5' }}">
@@ -38,8 +38,8 @@
             </view>
           </view>
           <view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.src}}">
-            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic="{{footerList[1].active}}" enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" beauty='{{9}}' whiteness='{{9}}' />
-            <live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" wx:else />
+            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" object-fit="contain"  bindstatechange="recorderStateChange" background-mute enable-mic="{{footerList[1].active}}" enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" beauty='{{9}}' whiteness='{{9}}' />
+            <live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" wx:else />
           </view>
           <view class="meeting-content-smallvideo-box-view-user">
             <view class="meeting-content-smallvideo-box-view-user-view" style=" background:{{ item.roleId === '1' || item.roleId === '3' ? '#FDC229' : '#3F51B5' }}">
@@ -96,7 +96,7 @@
     <view class="user-popup-title">
       成员
     </view>
-    <view class="user-popup-view">
+    <scroll-view scroll-y class="user-popup-view" enhanced>
       <view class="user-popup-view-view" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" wx:if="{{item.isRoom}}">
         <view class="user-popup-view-view-avatar">
           <t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
@@ -107,7 +107,7 @@
           <image src="/assets/{{item.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-view-image-icon" />
         </view>
       </view>
-    </view>
+    </scroll-view>
   </view>
 </t-popup>
 <t-popup visible="{{chatPopupVisible}}" bind:visible-change="onVisibleChange" placement="right">
@@ -115,7 +115,7 @@
     <view class="chat-popup-title">
       聊天
     </view>
-    <scroll-view scroll-y="true" class="chat-popup-list" id="chatView" enhanced>
+    <scroll-view scroll-y class="chat-popup-list" id="chatView" enhanced>
       <view class="chat-popup-list-view" wx:for="{{chatList}}" data-item="{{item}}" wx:key="index" style="text-align: {{item.me ? 'right' : 'left'}}">
         <text style="color: #666;font-size: 10rpx;margin-right: 4rpx;" wx:if="{{item.me}}">({{item.timestamp}})</text>
         <text>{{item.me ? item.message : item.userName}}</text>

utils/agora.ts

@@ -10,16 +10,20 @@ const option = {
 let client: any = '';
 export const agora = {
   // 初始化
-  init: async () => {
+  init: async (callback?) => {
     client = new AgoraMiniappSDK.Client();
-    await client.init(option.appId);
+    await client.init(option.appId, () => {
+      callback?.()
+    });
   },
   // 销毁
-  destroy: async () => {
+  destroy: async (callback?) => {
     if (client) {
       await client.leave()
-      await client.destroy()
-      client = '';
+      await client.destroy(() => {
+        callback?.()
+        client = '';
+      })
     }
   },
   // 设置角色
@@ -41,14 +45,22 @@ export const agora = {
     option.screenShareId = data.screenShareId;
     await agora.init()
   },
+  reconnecSetOption: async (token, callback) => {
+    option.token = token;
+    await agora.init(callback)
+  },
   // 加入频道
   joinChannel: () => {
     client.join(option.token, option.channelId, option.uid, () => {
       agora.setRole(false)
     })
   },
+  // 刷新token
+  renewToken: (token) => {
+    client.renewToken(token)
+  },
   // 监听
-  clientEvent: ({ streamAdded, streamRemoved }) => {
+  clientEvent: ({ streamAdded, streamRemoved, tokenRef }) => {
     client.on("stream-added", async e => {
       await agora.subscribe(e.uid, (url: string, uid: number | string) => {
         streamAdded(url, uid)
@@ -57,6 +69,9 @@ export const agora = {
     client.on("stream-removed", async e => {
       streamRemoved(e.uid)
     });
+    client.on("token-privilege-will-expire", async e => {
+      tokenRef()
+    });
   },
   // 订阅远端音视频流
   subscribe: async (uid: number | string, callBack: Function) => {

utils/request.js

@@ -1,5 +1,5 @@
 const apiBase = "https://meeting-api.23544.com/pc"
-
+import { Message } from 'tdesign-miniprogram';
 export const Request = (params) => {
   return new Promise((resolve, reject) => {
     wx.getStorage({
@@ -36,6 +36,7 @@ function requestMethods(obj, callback) {
   wx.request({
     ...obj.params,
     url: apiBase + obj.params.url,
+    timeout: 500,
     header: {
       'content-type': 'application/json',
       'Authorization': `Bearer ${obj.token}`
@@ -44,6 +45,22 @@ function requestMethods(obj, callback) {
       callback('success', res)
     },
     fail: res => {
+      if (res.errMsg === 'request:fail timeout') {
+        Message.error({
+          context: this,
+          offset: [20, 32],
+          duration: 2000,
+          content: '网络连接超时，请检查网络状态',
+        });
+      }
+      if (res.errMsg === 'request:fail ') {
+        Message.error({
+          context: this,
+          offset: [20, 32],
+          duration: 2000,
+          content: '网络已断开，请检查网络状态',
+        });
+      }
       callback('fail', res)
     },
   })

utils/singlr.ts

@@ -199,7 +199,9 @@ export const onStop = async () => {
     connection = '';
   }
 }
-
+export const getSignIr = () => {
+  return connection ? connection.state : ''
+}