整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
最近在項目上有個移動端（uni-app）的需求，就是要在移動端APP上的vue頁面中通過web-view組件來調用html頁面，并且要實現在html頁面中可以點擊一個元素來調用vue頁面中uni的API（掃碼接口），同時也可以在vue頁面中也可以調用html頁面中的js函數并進行傳參。
1. HBuilderX版本：2.8.11.20200907
2. V3編譯器
引用依賴的文件
在 web-view 加載的 HTML 中調用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>注意：這些 JS 文件是在 web-view 加載的那個 HTML 文件中引用的，而不是 uni-app 項目中的文件。
監聽 web-view 的 message 事件
監聽 web-view 組件的 message 事件，然后在事件回調的 event.detail.data 中接收傳遞過來的消息。
<template>
<view>
<web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
methods: {
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
}
}
}
</script>調用的時機
在引入上面的依賴文件后，需要在HTML中監聽UniAppJSBridgeReady，事件觸發后，
才能安全調用uni的API。
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script>
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
if(action === 'navigateTo') {
uni.postMessage({
data: {
action: 'postMessage'
}
});
}
}
});
</script>上面代碼的意思就是在html頁面中點擊按鈕列表中的某個按鈕，
觸發了uni.postMessage接口，進而調用了vue頁面methods中的handleMessage方法，
并將參數data傳給了vue頁面。
在vue頁面中調用html頁面的js函數
示例代碼：
var currentWebview = this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");其中的htmljsfuc就是要在html頁面中定義的js函數。
完整代碼示例：
提：已創建vue項目，未創建請參考 https://www.toutiao.com/article/7398100974524449330/
步驟 1：在項目目錄下，安裝 Element UI（Element UI 是一個基于 Vue.js 的組件庫，它提供了一套為開發者設計和實現用戶界面的解決方案。Element UI 提供了大量預設計的組件，如按鈕、輸入框、選擇器等，這可以幫助開發者快速構建應用程序界面。
Element ui的手冊網站： https://element-plus.org/zh-CN/guide/installation.html ）
操作：在vscode中打開項目根目錄，按ctrl+~鍵打開終端，在終端中輸入npm install element-plus --save
步驟2：在 main.js 中引入 Element Plus 和相關的樣式（此方式是全局引入即將Element所有的組件引入）：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 導入路由
import ElementPlus from 'element-plus'; // 導入 Element Plus
import 'element-plus/dist/index.css'; // 導入 Element Plus 的 CSS 樣式
// 創建 Vue 應用實例
const app = createApp(App);
// 使用路由
app.use(router);
// 使用 Element Plus 插件
app.use(ElementPlus);
// 掛載應用
app.mount('#app');
步驟3： 使用 Element Plus 組件
打開網站的“組件”界面，在左側選擇要添加的組件，如：按鈕；在右側出現各種樣式的按鈕，點擊樣式右下角的“<>”顯示出源代碼，復制源代進行調用。
實操：我們可以在新建一個dome.vue頁面，使用一個按鈕組件：
（1）創建新頁面，選中views右擊點擊“新建文件”在文件中輸入“dome.vue”
（2）選擇按鈕樣式，這里我選擇success按鈕，復制相對應的代碼<el-button type="success">Success</el-button>
（3）將代碼添加到頁面中
<template>
<el-button type="success">Success</el-button>
</template>
<script setup>
</script>
<style>
/* 這里可以添加樣式 */
</style>
視頻采集和管理是多模態大數據應用場景必不可少的環節，在基于Vue2前端框架實現的Web界面如何進行視頻的展示和播放是開發人員會遇到的一個主要技術問題。本文提供基于Vue2+video.js實現視頻的預覽的方案。
采集的視頻數據在前端視頻管理模塊列表中展示，然后用彈窗查看視頻詳情并預覽播放。最開始使用 vue-mini-player 組件，可輕松實現視頻在編輯界面的彈窗中播放，但是遇到兩個問題：1）彈窗中播放著視頻，關閉窗口后，視頻流不會停止。2）關閉窗口，重新打開新的視頻編輯窗口后，依舊是繼續播放之前的視頻。其原因應該是關閉舊的窗口后，視頻播放的控件沒有銷毀，導致新打開的控件其實還是舊控件的實例。查了很多關于vue-mini-player的文檔和使用樣例，沒有找到如何銷毀vue-mini-player控件。
視頻列表
單條視頻數據編輯界面
video.js 是一個通用的可嵌入網頁的視頻播放器JS庫，在Vue2中引用video.js可以創建播放組件對象，關閉視頻時能進行操作。基于Vue2使用video.js方法如下。
npm install video.js@6.13.0import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs = videoJs //注冊創建<video>組件，可放在彈窗中任何需要的地方。重點是給出id值，設置屬性時需要用到。
<template>
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<video id="casvideoplayer" ref="videoPlayerRef" class="video-js">
<source :src="playUrl" type="video/mp4">
</video>
...
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>export default {
data() {
return {
// 使用video.js播放視頻配置
videoJsPlayer: null,
playUrl:"", //視頻文件鏈接
videoPlayerOption: {
controls: true, //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
// url: "", //要嵌入的視頻資源url（不起作用？）
poster: '', //封面
autoplay: false, //自動播放屬性, true/false/"muted"(靜音播放)
muted: false, //靜音播放
preload: 'none', //建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數據。
fluid: false, //是否自適應布局,播放器將會有流體體積。換句話說，它將縮放以適應容器。
width: "850px", //視頻播放器的顯示寬度（以像素為單位）（fluid=false時起作用）
height: "600px", //視頻播放器的顯示高度（以像素為單位）（fluid=false時起作用）
},
};methods: {
// 視頻列表的“修改”按鈕，點擊后顯示修改彈窗
handleUpdate(row) {
// 從后臺獲取視頻信息
getVedio(row.id).then(response => {
this.form = response.data; //修改彈窗其他字段信息賦值
this.title = "修改視頻管理";
this.open = true; // 顯示修改彈窗
// video.js組件播放視頻
this.videoPlayerOption.poster = response.data.avator;
this.playUrl = response.data.contentsOrg;
this.showVideoWindow(); //設置視頻播放控件
});
},
//（重點是這里）
// 使用video.js組件播放視頻
showVideoWindow(){
// 如果視頻播放控件已經存在，切換視頻url，重新播放；如果控件不存在，創建
if(this.videoJsPlayer){
this.videoJsPlayer.src([
{
src: this.playUrl,
type: "video/mp4"
}
]);
// 如何圖片不為空，設置視頻封面
if(this.videoPlayerOption.poster != null && this.videoPlayerOption.poster != ""){
this.videoJsPlayer.poster(this.videoPlayerOption.poster);
}
this.videoJsPlayer.load(this.playUrl);
// this.videoJsPlayer.play(); //自動播放（打開后，切換視頻后需自動播放）
}else{
// 最開始創建一次視頻播放組件
this.$nextTick(() => {
this.videoJsPlayer = this.videoJs(
"casvideoplayer", //播放器控件id
this.videoPlayerOption //播放器設置項（這里設置的poster屬性不生效，需要在后面單獨設置）
);
this.videoJsPlayer.poster(this.videoPlayerOption.poster); //貌似不生效？
})
}
},
// 編輯彈窗頁面的“取消”按鈕
cancel() {
// 重置視頻控件數據（video.js組件）
if(this.videoJsPlayer){
this.videoJsPlayer.reset();
}
this.reset();
},
｝以上代碼實現了在Vue2彈窗中播放視頻組件的功能，注意關閉彈窗時要使用“取消”按鈕。如果通過點擊彈窗右上角X關閉彈窗，視頻還可以在后臺繼續播放，但是打開一個新的視頻修改彈窗后，播放的視頻會終止，并切換到新視頻播放界面。即使這樣，目前的功能已經不影響用戶正常使用。
video.js還有一個強大功能，看到喜歡的畫面點擊右鍵可以保存視頻幀，另外支持畫中畫、設備投放等功能。
video.js右鍵功能
后續優化改進工作包括：1）把video.js視頻播放功能做成Vue組件，方便在不同的Vue代碼文件中調用。2）捕獲窗口關閉的事件（如點擊X關閉，或者鼠標失焦點后關閉），關閉視頻流。
video.js
Vue
【參考材料】
video.js官方網站：https://videojs.com/
其他編碼材料：
https://blog.csdn.net/qq_60533482/article/details/128015308
https://blog.csdn.net/Uookic/article/details/116131535
https://www.cnblogs.com/DL-CODER/p/16833222.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
