71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<web-view :webview-styles="webviewStyles" :src="webviewSrc" ref="webview" @onPostMessage="handlePostMessage"></web-view>
|
||
|
|
<button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var wv;//计划创建的webview
|
||
|
|
import projectConfig from '@/env.config.js';
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
id: '',
|
||
|
|
info: {},
|
||
|
|
dp: {},
|
||
|
|
webviewSrc: '/pages_player/static/app-plus/video.html',
|
||
|
|
decoderUrl: '',
|
||
|
|
editInterval: null,
|
||
|
|
webviewStyles: {
|
||
|
|
progress: {
|
||
|
|
color: '#FF3333'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
if(option.id){ this.id = option.id }
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
|
||
|
|
this.decoderUrl = projectConfig.decoderUrl;
|
||
|
|
setTimeout(function() {
|
||
|
|
wv = currentWebview.children()[0]
|
||
|
|
wv.setStyle({top:150,height:300})
|
||
|
|
}, 1000); //如果是页面初始化调用时，需要延时一下
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
var url = "https://live.nodemedia.cn:8443/live/b480_264.flv";
|
||
|
|
this.weburl+='?data='+ encodeURIComponent(JSON.stringify({ "apiUrl": url }));
|
||
|
|
//如果是页面初始化调用时，需要延时一下
|
||
|
|
this.webviewSrc = 'about:blank'; // 清空当前页面
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.webviewSrc = '/pages_player/static/app-plus/video.html?data=' +
|
||
|
|
encodeURIComponent(JSON.stringify({ "apiUrl": res.playurl ,"decoderUrl":this.decoderUrl})) ;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// webview向外部发送消息
|
||
|
|
handlePostMessage: function(data) {
|
||
|
|
console.log("接收到消息：" + JSON.stringify(data.detail));
|
||
|
|
},
|
||
|
|
// 调用 webview 内部逻辑
|
||
|
|
evalJs: function() {
|
||
|
|
this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.webview {
|
||
|
|
width: 100vw;
|
||
|
|
height: 200vh;
|
||
|
|
}
|
||
|
|
</style>
|