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,
				}
			});
		} 
	}
})
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐