uniapp 集成腾讯云超级播放器问题
·
H5
1.h5页面使用腾讯云播放器需要引用腾讯云的播放器的js,引用之后会发现报错,所以采用webview的方式加载html的方式进行开发
重点: H5开发场景不通使用的方式会不一样,如果使用官方的webview会发现vue页面无法进行数据的传递,只能初始化的时候传值拼在链接上面,所以H5,如果需要vue除了链接传值还有其他的传值,这边建议的是,采用iframe
vue 页面的数据
<iframe :src="txVideourl" ref="iframe"></iframe>
数据的初始化
mounted() {
let _this = this;
window.onmessage= (event) => {
// 根据上面制定的结构来解析iframe内部发回来的数据
const data = event.data
switch (data.cmd) {
case 'returnFormJson':
// 业务逻辑
break
}
}
this.iframeWin = this.$refs.iframe.contentWindow;
},
// 传值的时候
this.iframeWin.postMessage({
cmd: 'stopVideo',
params: {
isPause: false
}
}, '*')
html 接受的时候
1.引用uni_relevant_sdk.js
2.页面js 初始化的时候,需要等待上面js完成
document.addEventListener('UniAppJSBridgeReady', function() {})
//监听消息.
window.addEventListener("message", function(event){
let _this = this;
var data = event.data;
switch (data.cmd) {
case 'getFormJson':
break
}
});
app
1.如果app使用腾讯云插件,使用原生集成可忽略此方法,如果需要h5 引用的方式,其实和之前一样差不多的方式只需要webview 换掉iframe,因为iframe在app不会加载,但是使用vue页面是无法进行vue除了链接的方式进行传值,只能采用nuve页面
重点
<web-view :src="src" ref="webview" @message="messageToMeth"></web-view>
html 接受的时候
1.引用uni_relevant_sdk.js
2.页面js 初始化的时候,需要等待上面js完成
document.addEventListener('UniAppJSBridgeReady', function() {
function postMessage (params,code) {
if(code == "1") { // 下载
uni.postMessage({
"data": {
"code": "1",
"data": params,
}
});
}
}
})
更多推荐
所有评论(0)