https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/industry/liveplayer/live-player-plugin.html
https://docs.qq.com/doc/DZHhzV0FiYXRQV01i
不能用<live-player>，因为live-player的src要赋值rtmp格式流视频文件，而<navigator>对应的小程序插件只需要从接口获取房间号和图片即可，但首页无法实现一开始的小窗口播放，只能在点开全屏播放后后退会出现小窗浮层
manifest.json:
"mp-weixin" : {
"appid" : "wx25......",
"setting" : {
"urlCheck" : false,
"es6" : false,
"postcss" : false,
"minified" : true
},
"plugins": {
"live-player-plugin": {
"version": "1.3.5",
"provider": "wx2b03c6e691cd7370"
}
},
"usingComponents" : true,
"permission" : {},
"lazyCodeLoading" : "requiredComponents"
},
pages.json:
{
"pages": [
{
"path": "pages/index/index",
"name":"index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "首页",
"app-plus": {
"bounce": "vertical",
"titleNView": {
"autoBackButton":"true"
}
},
"usingComponents": {
"subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "网",
"navigationBarBackgroundColor": "#F7F5F6",
"backgroundColor": "#F7F5F6",
"app-plus": {
"titleNView": {
"backgroundImage":"#00b4ed"
}
}
},
"lazyCodeLoading":"requiredComponents"
}
index.vue:
<template>
<view class="container">
<view v-show="liveFlag">
<view class="zhibo">
<view class="zhibo_right">
<view class="live" >
<navigator :url="live.url" style=" height: 100%;">
<view class="liveBtn" >直播中</view>
<image class="liveImg" :src="live.curUrl" mode="aspectFill"></image>
</navigator>
</view>
</view>
</view>
</view>
<view class="bottomV"></view>
<Tabbar></Tabbar>
</view>
</template>
<script>// let livePlayer = requirePlugin('live-player-plugin')
export default {
name:'index',
components: {},
data() {
return {
title:'首页',
liveFlag:false,
live:{
url:'',
autoplay:'true',
mode:'live',
picture:["push", "pop"],
roomId:0,
customParams:'',
curUrl:''
}
}
},
onl oad() {
//console.log('1')
//监听页面加载，参数为上一个页面传递的数据，类型为Object
},
onShow(){
//console.log('2')
//监听页面的显示，页面每次出现在屏幕上都会触发this.getDate();
},
methods: {
//无用
activeLive(){
this.live.customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
var curUrl = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + this.live.roomId + '&custom_params=' + this.live.customParams
wx.navigateTo({
url: curUrl
})
},
getDate(){
uni.request({
url: this.$httpUrl.HomeDataGetList,
method: 'POST',
header:{
'Content-Type': 'application/x-www-form-urlencoded',
},
success: (res) => {
// console.log(res)
if (res.data.s.co === 1) {
let info = res.data.d.rd;
//console.log(info)
//5直播
info.forEach((item,index)=>{
if(item.Classify == 5){
this.liveFlag = true
this.live.roomId = Number(item.Url) //获取到房间号
this.live.curUrl = item.ImgUrl //获取到主播上传照片
// this.live.curUrl = 'http://img.myqpw.com/a/5/2/9/4/8/5121359236477258585.jpg'//'https://img.myqpw.com/mini/static/image/head.jpg'
this.live.url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + this.live.roomId + '&type=10'
// livePlayer.getSubscribeStatus({ room_id: this.live.roomId }).then(res => {
// console.log('房间号：', res.room_id)
// console.log('订阅用户openid', res.openid)
// console.log('是否订阅', res.is_subscribe)
// }).catch(err => {
// console.log('get subscribe status', err)
// })
}
})
} else {
// uni.showToast({
// title: res.data.s.mg,
// icon: "none",
// duration: 2000
// });
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
.zhibo{
display: flex;
.zhibo_right{
width:50%;
margin-top:20rpx;
.live{
position:relative;
height:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
margin-right:20rpx;
.liveBtn{
position: absolute;
top:10rpx;
left:10rpx;
z-index: 1;
width: 100rpx;
height: 40rpx;
line-height: 40rpx;
border: none;
border-radius: 20rpx;
font-size: 24rpx;
color:#FFFFFF;
text-align: center;
background: linear-gradient(90deg, rgba(180, 101, 218, 1) 0%, rgba(207, 108, 201, 1) 33%, rgba(238, 96, 156, 1) 66%, rgba(238, 96, 156, 1) 100%) !important;
}
.liveImg{
width:100%;
height:100%;
border-radius:15rpx;
}
}
}
}
}
</style>
标签：uniapp,console,log,index,res,plugin,live,直播,微信 From： https://www.cnblogs.com/liufeiran/p/17354802.html