处理尺寸不适应问题

static/rtcEngine/WXtrialInterface.html

@@ -28,19 +28,19 @@
                 @touchend="touchendLevitatedSphere">
         </div>
 
-        <div class="layout" :style="{height: height + 'px'}">
+        <div class="layout" :style="{height: height + 'px'}" v-cloak>
             <!-- 云机位置 -->
-            <div class="layout-view">
-                    <video  ref="rtcMediaPlayer" :style="rtcMediaPlayerStyle" width="100%" height="100%" autoplay id="playerVideo"
-                        class="videoRotate" x5-playsinline playsinline webkit-playsinline
-                        :controls="false" @touchmove.prevent="(event) => {engine.touchClick(event, 2)}"
-                        @touchstart.prevent="(event) => {engine.touchClick(event, 0)}"
-                        @touchend.prevent="touchendRtcMediaPlayer">
-                        当前浏览器暂不支持、请使用谷歌浏览器或前往双子星客户端使用
-                    </video>
+            <div class="layout-view" v-cloak>
+                <video ref="rtcMediaPlayer" :style="rtcMediaPlayerStyle" width="100%" height="100%" autoplay
+                    id="playerVideo" class="videoRotate" x5-playsinline playsinline webkit-playsinline :controls="false"
+                    @touchmove.prevent="(event) => {engine.touchClick(event, 2)}"
+                    @touchstart.prevent="(event) => {engine.touchClick(event, 0)}"
+                    @touchend.prevent="touchendRtcMediaPlayer">
+                    当前浏览器暂不支持、请使用谷歌浏览器或前往双子星客户端使用
+                </video>
             </div>
             <!-- 底部按钮 -->
-            <div class="layout-footer">
+            <div class="layout-footer" v-cloak>
                 <template v-for="item in footerBtn">
                     <img :src="item.img" alt="" @click="footerBtnFun(item.key)">
                 </template>
@@ -198,7 +198,7 @@
             <van-dialog v-model="noOperationSetTimeoutTimeVisible" title="提示" show-cancel-button
                 message="由于您长时间未操作，将自动断开视频链接（不影响云手机内应用运行）" :confirm-button-text="confirmButtonText"
                 confirm-button-color="#3cc51f" cancel-button-text="继续操作" @cancel="noOperationSetTimeout('cancel')"
-                @confirm="noOperationSetTimeout('cancel'), exit(), noOperationSetTimeoutTimeVisible = false">
+                @confirm="noOperationSetTimeout('cancel'), exit(), noOperationSetTimeoutTimeVisible = false" v-cloak>
             </van-dialog>
         </div>
     </div>

static/rtcEngine/js/WXtrialInterface.js

@@ -108,10 +108,7 @@ const app = new Vue({
         this.initConfig()
     },
     mounted() {
-        // 云机画面宽高
-        let layoutView = document.querySelector('.layout-view')
-        this.layoutViewWidth = layoutView.offsetWidth
-        this.layoutViewHeight = layoutView.offsetHeight
+
         this.getUserCardInfo()
     },
     computed: {
@@ -157,9 +154,8 @@ const app = new Vue({
     methods: {
         // 初始化
         initConfig() {
-            // 高度、悬浮球相关配置
-            this.height = window.innerHeight
-            this.width = window.innerWidth
+            // 获取窗口尺寸
+            this.getInitSize()
             let levitatedSpherePositionData = localStorage.getItem('levitatedSpherePositionData')
             let definitionValue = localStorage.getItem('definitionValue')
             // 悬浮球位置
@@ -172,6 +168,9 @@ const app = new Vue({
             // 给api增加需要的参数
             request.defaults.headers.Authorization = token
             request.defaults.headers.versionname = '5.8.7'
+            window.onresize = () => {
+                this.getInitSize()
+            }
         },
 
         // 连接webRTC
@@ -726,6 +725,17 @@ const app = new Vue({
         footerBtnFun(key) {
             this.engine[key]()
             this.noOperationSetTimeout()
+        },
+
+        // 获取初始化尺寸
+        getInitSize() {
+            // 高度、悬浮球相关配置
+            this.height = window.innerHeight
+            this.width = window.innerWidth
+            // 云机画面宽高
+            let layoutView = document.querySelector('.layout-view')
+            this.layoutViewWidth = layoutView.offsetWidth
+            this.layoutViewHeight = layoutView.offsetHeight
         }
     }
 })