说明

最近在项目上有个移动端（uni-app）的需求，就是要在移动端APP上的vue页面中通过web-view组件来调用html页面，并且要实现在html页面中可以点击一个元素来调用vue页面中uni的API（扫码接口），同时也可以在vue页面中也可以调用html页面中的js函数并进行传参。

使用环境

1. HBuilderX版本：2.8.11.20200907

2. V3编译器

html页面调用vue页面中uni的API

引用依赖的文件

在 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方法如下。

1. 安装video.js：

npm install video.js@6.13.0

2. main.js注册

import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs = videoJs //注册

3. vue代码文件中使用组件

创建<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还有一个强大功能，看到喜欢的画面点击右键可以保存视频帧，另外支持画中画、设备投放等功能。

后续优化改进工作包括：1）把video.js视频播放功能做成Vue组件，方便在不同的Vue代码文件中调用。2）捕获窗口关闭的事件（如点击X关闭，或者鼠标失焦点后关闭），关闭视频流。

【参考材料】

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