From a3667d1fc176eaff31f7e05b641fa15ffae6bd79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Wed, 17 Jul 2024 15:39:51 +0800
Subject: [PATCH] video

---
 .../component/commonComponents/video/ios.nvue |  56 +++---
 static/html/aliplayer.html                    | 175 +++++++++---------
 static/html/aliplayerOk.html                  |  97 ++++++++++
 3 files changed, 209 insertions(+), 119 deletions(-)
 create mode 100644 static/html/aliplayerOk.html
diff --git a/pages/component/commonComponents/video/ios.nvue b/pages/component/commonComponents/video/ios.nvue
index 5553075..01da3ac 100644
--- a/pages/component/commonComponents/video/ios.nvue
+++ b/pages/component/commonComponents/video/ios.nvue
@@ -1,11 +1,7 @@
 <template>
   <view class="container" style="background-color: #fff; position: relative">
     <!-- <web-view style="height: 200px" src="https://www.tmrjournals.com/aliplayer.html"></web-view> -->
-    <web-view
-	
-      
-    ></web-view>
-    <button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
+    <web-view v-if="isSetFirstTime"></web-view>
   </view>
 </template>
 <script>
@@ -154,10 +150,9 @@ export default {
       });
     },
     handlePostMessage(res) {
-		this.$nextTick(()=>{
-			 this.$refs.webview.handleMessage();
-		})
-     
+      this.$nextTick(() => {
+        this.$refs.webview.handleMessage();
+      });
     },
     getMessage(e) {
       uni.showModal({
@@ -165,27 +160,26 @@ export default {
         showCancel: false,
       });
     },
-
-    async init(data, isChange) {
+    initWebView() {
       let wv = plus.webview.create(
-          '/static/html/aliplayer.html?',//date保证不走缓存
-          'batch_view',
-          {
-              top: '0',
-              left: '0',
-              height: '100%',
-              width: '100%'
+        "/static/html/aliplayer.html?", //date保证不走缓存
+        "batch_view",
+        {
+          top: "0",
+          left: "0",
+          height: "100%",
+          width: "100%",
+        },
+        {
+          data: {
+            videoData:this.videoData,
           },
-          {
-              data: {
-                  token: '2222',
-                  userInfo: '44444',
-                  implantType: 'uniapp'
-              }
-          }) //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
-      let currentWebview = this.$mp.page.$getAppWebview()
-      currentWebview.append(wv);//重要，否则会失效
-
+        }
+      ); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
+      let currentWebview = this.$mp.page.$getAppWebview();
+      currentWebview.append(wv); //重要，否则会失效
+    },
+    async init(data, isChange) {
       this.platform = this.$platform;
       this.isfresh = true;
       console.log("at line 59:", "是否先走init这里", this.platform);
@@ -200,7 +194,7 @@ export default {
       // await this.getVideo(isChange);
       //   this.$emit("child-event", this.timer);
     },
-    
+
     async getData(data, isChange) {
       var that = this;
       if (!this.isSetFirstTime) {
@@ -244,8 +238,10 @@ export default {
         // }
         console.log(this.firstTime, "这是第一次播放时长");
       }
+
       this.isSetFirstTime = true;
-	  
+
+      await this.initWebView();
     },
     async playVideo(e) {
       this.videoContext = uni.createVideoContext("videoId", this);
diff --git a/static/html/aliplayer.html b/static/html/aliplayer.html
index e2ee955..b1e9801 100644
--- a/static/html/aliplayer.html
+++ b/static/html/aliplayer.html
@@ -1,95 +1,92 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>本地网页</title>
-        <style type="text/css">
-            .btn {
-                display: block;
-                margin: 20px auto;
-                padding: 5px;
-                background-color: #007aff;
-                border: 0;
-                color: #ffffff;
-                height: 40px;
-                width: 200px;
-            }
 
-            .btn-red {
-                background-color: #dd524d;
-            }
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="IE=edge">
+  <meta name="viewport"
+    content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+  <title>Aliplayer Online Settings</title>
+  <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
 
-            .btn-yellow {
-                background-color: #f0ad4e;
-            }
+  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
 
-            .desc {
-                padding: 10px;
-                color: #999999;
-            }
-        </style>
-    </head>
-    <body>
-        <p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
-        <div class="btn-list">
-            <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
-            <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
-            <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
-            <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
-            <button class="btn" type="button" data-action="switchTab">switchTab</button>
-        </div>
-        <p class="desc" id="lizhao">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
-        <div class="btn-list">
-            <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
-        </div>
-        <!-- uni 的 SDK -->
-        <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
-        <script type="text/javascript">
-            
-            window.handleMessage=function(data){
-                alert('传来的参数'+data)
-            }    
-            document.addEventListener('UniAppJSBridgeReady', function() {
-                const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
-console.log('这是app传参数进来的',data.token,'22222222')
-                document.querySelector('.btn-list').addEventListener('click', function(evt) {
-                    var target = evt.target;
-                    if (target.tagName === 'BUTTON') {
-                        var action = target.getAttribute('data-action');
-                        switch (action) {
-                            case 'switchTab':
-                                uni.switchTab({
-                                    url: '/pages/tabBar/API/API'
-                                });
-                                break;
-                            case 'reLaunch':
-                                uni.reLaunch({
-                                    url: '/pages/tabBar/API/API'
-                                });
-                                break;
-                            case 'navigateBack':
-                                uni.navigateBack({
-                                    delta: 1
-                                });
-                                break;
-                            default:
-                                uni[action]({
-                                    url: '/pages/component/button/button'
-                                });
-                                break;
-                        }
-                    }
-                });
-                document.querySelector("#postMessage").addEventListener('click', function() {
-                    uni.postMessage({
-                        data: {
-                            action: 'message888888'
-                        }
-                    });
-                })
-            });
-        </script>
-    </body>
-</html>
+  <script src="./vue.js"></script>
+  <!-- <script src="./textData.js"></script> -->
 
+
+
+
+  <script>
+    var viewWidth = window.screen.width;
+    if (viewWidth < 768) {
+      //document.write('<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">'); 
+    } else {
+      document.write('<style>@media screen and (min-width: 768px) and (max-width: 1199px) {html {zoom: 0.8;}}</style>');
+    } 
+  </script>
+  <link rel="stylesheet"
+    href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/skins/default/aliplayer-min.css" />
+  <script type="text/javascript" charset="utf-8"
+    src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/aliplayer-min.js"></script>
+</head>
+
+<body>
+  <div id="app">
+    <div class="prism-player" id="player-con" style="width: 100%;height: 200px;"></div>
+
+  </div>
+
+
+
+
+</body>
+<script type="text/javascript">
+  // 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。  
+  document.addEventListener('UniAppJSBridgeReady', function () {
+    uni.getEnv(function (res) {
+      console.log('获取当前环境：' + JSON.stringify(res));
+    });
+
+    const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
+    app.videoData = data.videoData
+    console.log('这是app传参数进来的', JSON.stringify(data.videoData), 'videoData')
+
+  });
+
+  // HTML 接受APP发送过来的消息 (H5端)
+  window.addEventListener('message', e => {
+    console.log(e, 'HTML 接受APP发送过来的消息 (H5端)');
+    app.dataList = JSON.parse(e.data.data).navigation
+    console.log(app.dataList, '+++++++++');
+  }, false)
+
+
+  // HTML 接受APP发送过来的消息 (APP端)
+  function requestData(data) {
+    console.log(JSON.stringify(data), 'HTML 接受APP发送过来的消息 (APP端)');
+    app.dataList = data.navigation // 赋值
+  }
+
+
+  var app = new Vue({
+    el: '#app',
+    data: {
+      textTip: "提示信息",
+      dataList: [],
+      videoData: {},
+    },
+    mounted() {
+
+    },
+    onLoad() {
+
+    },
+    onShow() {
+
+    },
+    methods: {
+    }
+  })
+
+</script>
\ No newline at end of file
diff --git a/static/html/aliplayerOk.html b/static/html/aliplayerOk.html
new file mode 100644
index 0000000..c97de55
--- /dev/null
+++ b/static/html/aliplayerOk.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>本地网页</title>
+  <style type="text/css">
+    .btn {
+      display: block;
+      margin: 20px auto;
+      padding: 5px;
+      background-color: #007aff;
+      border: 0;
+      color: #ffffff;
+      height: 40px;
+      width: 200px;
+    }
+
+    .btn-red {
+      background-color: #dd524d;
+    }
+
+    .btn-yellow {
+      background-color: #f0ad4e;
+    }
+
+    .desc {
+      padding: 10px;
+      color: #999999;
+    }
+  </style>
+</head>
+
+<body>
+  <p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
+  <div class="btn-list">
+    <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
+    <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
+    <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
+    <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
+    <button class="btn" type="button" data-action="switchTab">switchTab</button>
+  </div>
+  <p class="desc" id="lizhao">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
+  <div class="btn-list">
+    <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
+  </div>
+  <!-- uni 的 SDK -->
+  <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
+  <script type="text/javascript">
+
+    window.handleMessage = function (data) {
+      alert('传来的参数' + data)
+    }
+    document.addEventListener('UniAppJSBridgeReady', function () {
+      const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
+      console.log('这是app传参数进来的', data.token, '22222222')
+      document.querySelector('.btn-list').addEventListener('click', function (evt) {
+        var target = evt.target;
+        if (target.tagName === 'BUTTON') {
+          var action = target.getAttribute('data-action');
+          switch (action) {
+            case 'switchTab':
+              uni.switchTab({
+                url: '/pages/tabBar/API/API'
+              });
+              break;
+            case 'reLaunch':
+              uni.reLaunch({
+                url: '/pages/tabBar/API/API'
+              });
+              break;
+            case 'navigateBack':
+              uni.navigateBack({
+                delta: 1
+              });
+              break;
+            default:
+              uni[action]({
+                url: '/pages/component/button/button'
+              });
+              break;
+          }
+        }
+      });
+      document.querySelector("#postMessage").addEventListener('click', function () {
+        uni.postMessage({
+          data: {
+            action: 'message888888'
+          }
+        });
+      })
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
