【微信小程序嵌套H5页面(web-view)】

正在努力的二哈

已于 2023-03-22 15:52:35 修改

阅读量349

点赞数

文章标签： javascript vue.js 前端

于 2022-12-30 18:45:05 首次发布

本文链接：https://blog.csdn.net/weixin_47166228/article/details/128499289

版权

微信小程序嵌套H5页面(web-view)

//小程序页面
<view class="videopage">
		<web-view :src="monitorURL"></web-view>
</view>

<script>
	export default {
		data() {
			return {
				monitorURL:""
			};
		},
		onLoad({accessToken,monitorPath,companyName}) {
			// monitor.bzjzt.com
			this.monitorURL = `https://monitor.bzjzt.com/#/pages/monitor/monitor?accessToken=${accessToken}&monitorPath=${monitorPath}&companyName=${companyName}`;
		},
		methods: {
			
		}
	}
</script>

//H5页面
//main.js页面
import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3 服务器渲染
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

//引用页面
<template>
    <view class="hello-ezuikit-js">
        <view id="video-container" style="width:100vw;height:100vh"></view>
    </view>
</template>

<script>
import EZUIKit from "ezuikit-js";
var player = null;

export default {
    name: "monitor",
    onLoad({accessToken = null,monitorPath = null,title = "监控"}){
		this.init(accessToken,monitorPath)
		uni.setNavigationBarTitle({
			title:title
		})
	},
	beforeDestroy() {
		player.destroy()
	},
    methods: {
		init(accessToken,url){
			const tempToken = "at.8oajoftbcqur3f6i79u2c4ar3ika0pjn-6t6byr12e8-1kcllls-bdupfutew";
			const _url = 'ezopen://open.ys7.com/J55792580/1.hd.live'
			player = new EZUIKit.EZUIKitPlayer({
			    id: 'video-container', // 视频容器ID
			    accessToken : accessToken || tempToken,
			    url : url || _url
			});
			window.player = player;
		}
    }
};
</script>