uniapp混合开发，微信小程序可用，但安卓不可用，跳转到这个页面后变白屏
vue页面
<template>
<view class="container">
<view class="camera_show">
<web-view :src="cameraUrl" width="94%" height="20vh" id="ysOpenDevice">
</web-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
htmlUrl: '',
DapengName: '',
plcid: '',
//视频监控
cameraShowHeight: '',
url: '',
cameraUrlList: [],
cameraUrl: "",
cameraTitle: "",
accessToken: ' ',
currentCamera: '',
}
},
onLoad(item) {
var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
uni.getSystemInfo({
//成功获取的回调函数，返回值为系统信息
success: (sysinfo) => {
console.log(sysinfo)
height = -50; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
},
complete: () => {}
});
// #ifdef APP-PLUS
var currentWebview = this.$parent.$scope.$getAppWebview()
// #endif
setTimeout(function() {
var wv = currentWebview.children()[0];
wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
top: 68, //此处是距离顶部的高度，应该是你页面的头部
height: height, //webview的高度
scalable: true //webview的页面是否可以缩放，双指放大缩小
})
}, 200); //如页面初始化调用需要写延迟
// 接受列表页传递过来的参数
this.cameraTitle = item.title;
this.url = item.url;
//获取token
this.token = uni.getStorageSync('token');
//视频监控
this.getAccessToken();
},
methods: {
//获取实时accesstoken
getAccessToken() {
uni.removeStorageSync('videotoken');
uni.request({
url: "https://open.ys7.com/api/lapp/token/get",
data: {
appKey: 'xx',
appSecret: 'xx',
},
header: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: 'POST',
success: (res) => {
// 拿到accessToken
if (res.data.code == 200) {
console.log('accessToken获取成功！');
uni.setStorageSync('accessToken', res.data.data.accessToken);
this.accessToken = res.data.data.accessToken;
this.getCameraUrl();
}
},
fail: (err) => {
uni.showToast({
title: err, //显示的文字
duration: 2000, //显示多少毫秒，默认1500毫秒，时间到自动隐藏
icon: "error" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
})
}
})
},
getCameraUrl() {
this.cameraUrl = "http://xx.xx.xx.x:xxx?url=" +this.url + "&accessToken=" + this.accessToken;
let url = this.cameraUrl.split('?')[1].split('&')[0].split('=')[1] //url
let accessToken = this.cameraUrl.split('?')[1].split('&')[1].split('=')[1] //token
},
}
} </script>
<style>
.container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
min-height: 100%;
background: linear-gradient(#262c4e 9%, #036ba0 30%, #00f2ae, #036ba0 30%, #262c4e);
}
.camera_show {
margin: 1vw auto;
width: 94%;
border-radius: 10px;
color: #fff;
}
.blue_button {
width: 40px;
height: 40px;
border-radius: 40px;
margin: auto 5px;
color: #fff;
background-color: #0a2b5b;
font-size: 14px;
position: absolute;
top: 50%;
} </style>
html页面，部署到服务器上得
<script type="text/javascript" src="./static/js/ezuikit.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title></title>
<body>
<div id="myPlayer">
</div>
<script>
window.onload = () => {
//标题设置为空，如果不设置为空，会与uni-app自带标题冲突
document.title = '\u200E';
// 截取url与accessToken
let test = 'accessToken'
let url = ''
let accessToken = ''
console.log(window.location.href)
if (window.location.href.search(test) !== -1) {
url = window.location.href.split('?')[1].split('&')[0].split('=')[1] //url
accessToken = window.location.href.split('?')[1].split('&')[1].split('=')[1] //token
} else {
url = 'ezopen://open.ys7.com/F25961719/25.hd.live'
accessToken = 'at.9ifot6g6c46yt7iubvae6vn372hiy64n-8kzoa7xd36-0pvm54c-qudu1ha51'
}
init(url, accessToken);
function init(url, accessToken) {
var player = new EZUIKit.EZUIKitPlayer({
id: 'myPlayer',
url: url,
template: 'standard',
accessToken: accessToken,
autoplay: true,
width: 960,
height: 650,
});
}
}
</script> </body>
0 个回复