nvue爬坑总结

nvue爬坑总结

最近公司项目要做直播，使用了uniapp里面的live-pusher和live-player标签，但live-pusher标签在app是不支持的，除非在nvue页面里面使用，拉流直接使用video标签播放，以下是我的nvue爬坑总结：

文本内容自动宽度

给父级盒子增加align-items: center，这样既能一行显示，又可以自动文本宽度

文本内容一行超出省略号显示

  text-overflow: ellipsis;
  lines:1;

文本内容一行超出换行

  min-height: 32rpx;
  max-width:420rpx;
  white-space:normal;
  word-break:break-all;

文本默认是flex-direction:column

如需改变布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效

文本若需滑动，需要使用scroll-view标签

<scroll-view id="scrollview" class="chat-window detail_box" scroll-y="true"
			:style="{width: width+1 + 'px',height: height*2/5-30 + 'px'}"><scroll-view>

报错：同时最多发起 5 个 socket 请求

//连接scoket通信，需要在每次关闭页面的时候进行销毁
destroyed () {
     // 销毁监听
     this.socketTask.onClose(() => {
     	console.log("已经被关闭了111")
     })
  },

调取后台接口

nvue页面调取后台接口实时渲染数据，用不了vue页面使用的封装好的方法，调取接口需要使用uni.request,要传完整的头部，接口要使用完整拼接域名的接口，如果需要动态使用域名，可以在vue页面存储，在nvue页面uni.getStorageSync(‘域名’)

this.$Url = uni.getStorageSync('ip');
uni.request({
	url:this.$Url+'/v1/broadcast/broadcast_notice',
	method: "POST",
	header: {
		'content-type': 'application/x-www-form-urlencoded', 
		'token':this.token
	},
	success: (res) => {
		if(res.data.code == '200'){
			 this.detail=res.data.data
		}
	}
});

nvue页面选择节点

nvue页面不能使用uni.createSelectorQuery()和boundingClientRect()选中节点查询信息，可以使用dom.getComponentRect，以下是直播间发送聊天自动滚动到底部

<scroll-view id="scrollview" class="chat-window detail_box" scroll-y="true" :style="{height: contentViewHeight + 'px'}" :scroll-height-animation="true" :scroll-top="scrollTop" @scrolltolower="lower">
	<view class="talk_content" ref="talkcontent">
		<text class="tishi">{{notice}}</text>
		<view class="talk_con_main" v-for="item in zhibodata" :key="item.room_id">
			<view class="coming"  v-if="item.type=='login'&&item.is_broadcast!=1">
				<text class="comingtext">{{item.nickname}}  进入直播间</text>
			</view>
			<view class="talk" v-if="item.type=='say'">
				<view class="talktext1" style="color:#FFF3AF">
					<text class="talktexttype" v-if="item.is_broadcast==1">主播</text>
					<text class="talktextname">{{item.from_nickname}} {{item.content}}</text>
				</view>
			</view>
		</view>
	</view>
</scroll-view>

<script>
	const dom = weex.requireModule('dom')
	export default { 
		data() {
			return {
				scrollTop:0
			};
		},
		methods: {
			scrollToBottom() {
				let that = this;
				const result = dom.getComponentRect(this.$refs.talkcontent, option => {
					this.mitemHeight = option.size.height
					if (that.mitemHeight+50>= (that.contentViewHeight)) {   //判断子元素高度是否大于显示高度
						that.scrollTop = that.mitemHeight+40 - that.contentViewHeight   //用子元素的高度减去显示的高度就获益获得序言滚动的高度
					}
				 })
			},
		}
	}
</script>

nvue页面input输入框收起后，软键盘不收起

vue页面
	<input type="text" value="" :focus='setFocus' v-model="conentinfo" placeholder="输入点什么最多30个字~"/>

nvue页面
	<input class="talkinput" ref="input" :style="{width: width/10*7 + 'px'}" type="text" value=""  v-model="conentinfo" 		placeholder="输入点什么最多30个字~"/>
	//方法
	that.$refs.input.blur()

nvue页面海报

nvue页面对canvas不敏感，若要生成直播间海报之类的，最好由后台生成

nvue报错undefined is not an object (evaluating ‘n.attr.id’) 或者null is not an object

这个报错绊了我很久，怎么改都是找不到id，报null，然而页面里面根本没用到id，后来发现应该是用了this.context = uni.createLivePusherContext(this.$refs.livePusher.attr.id,this);的原因，按官方文件在onReady使用报错，换了在mounted里面的this.$nextTick使用也不行，后来把live-pusher标签放到页面代码的最开始位置就解决了

<template>
	<div>
		<live-pusher id="livePusher" ref="livePusher" :beauty="beauty" :style="{width: width+1 + 'px',height:height+1 + 'px'}"  :url="url" mode="FHD" :remote-mirror="remotemirror"></live-pusher>
		<view>其他标签<view>
	</div>
</template>