uni-app 开发随笔（踩坑记录）

uni.getSystemInfo({ 			　　success: function(res) { // res - 各种参数 			　　   console.log(res.windowHeight); // 屏幕的宽度  			　　    let info = uni.createSelectorQuery().select(".元素"); 			　　　  info.boundingClientRect(function(data) { //data - 各种参数 						that=data.height// 获取元素高度 			　　　  　	console.log()   			　　    }).exec() 			    } 			}); 只获取屏幕宽高也可： const { windowHeight } = uni.getSystemInfoSync()

//template <view  			style="width: 100%;height: 500rpx;border: 1px solid red;box-sizing: border-box;" 			@touchstart='touchstart'  			@touchend='touchend'> </view> 

//data中初始化 		touchDotX : 0, 		touchDotY : 0, 		time :0, 		touchMoveX:'', 		touchMoveY:'', 		tmX:'', 		tmY:'' 

//事件 touchstart(e){ 				// console.log(e) 				this.touchDotX = e.touches[0].pageX  				this.touchDotY = e.touches[0].pageY  }, 	touchend(e){ 		// console.log(e) 		this.touchMoveX = e.changedTouches[0].pageX; 		this.touchMoveY = e.changedTouches[0].pageY; 		this.tmX = this.touchMoveX - this.touchDotX; 		this.tmY = this.touchMoveY - this.touchDotY; 		if (this.time < 20) { 			  let absX = Math.abs(this.tmX); 			  let absY = Math.abs(this.tmY); 			  console.log(absX) 			  if (absX > 2 * absY) { 				if (this.tmX<0){ 				  console.log("左滑=====") 				}else{ 				  console.log("右滑=====") 				} 			  } 		} 	}

1.普通单个替换只执行一次 var str=“Visit Microsoft Microsoft Microsoft Microsoft” console.log(str.replace(/Microsoft/, “W3School”)) 将Microsoft替换为W3School 2.全部替换 console.log(str.replace(/Microsoft/g, “W3School”)) 3.查找变量，场景：将输入的字符串查找匹配文字高亮加粗 var content = input输入的字符串 console.log(str.replace(new RegExp(content,‘g’), “ ”+content+" ") 3.1解析标签，此类名给个样式

<rich-text :nodes="nodes"></rich-text> data() {         return { 				 nodes: '<div style="text-align:center;"> 				 			<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" alt="uni-app 开发随笔（踩坑记录）"/> 				 </div>'         }     } 

2.视频列表 2.1video层级过高，此时还是vue文件无法通过z-index修改，官网也有说明，此时要用nvue文件。 2.2 为什么nvue文件就可控，vue文件不可控？ 编译不同，nvue文件基于wexx编译模式更接近app原生，但是要注意的是，style样式只能用felx布局。 此时你会发现nvue的样式好难用！！！ 2.3如果你选择的是nvue文件，打包和真机调试安卓还算顺利，但是ios你会发现一个怀疑人生的问题，列表无法渲染但是能接收到后端的数据，各种调试最后发现是拦截器的事，我门项目拦截器是自己封装的Promise，直接用官网的api才可以uni.request（{}） 2.4测试发现可以同时播放多个视频，那么问题来了，如何点击当前来暂停上一个视频呢？ 官网给出api uni.createVideoContext(videoId, this) 但是并没有解决，点击几个视频之后有奔溃显现总是报 未定义的对象id，最终是以ref解决 

	<video  			:id="'videoa'+item.id"  			:ref="'videoa'+item.id"  			:src="item.content"  			:poster='item.imgUrl'  			@pause='video_pause'  			@play='target_play'> 		</video> 	data:{ 		videoId:null, 	} 	target_play(e) { 		// 播放时触发 		if(this.videoId != null){ 			var oldvideoid = this.videoId; 			this.$refs[oldvideoid][0].pause(); 		} 		var videoId = e.target.id; 		this.videoId = videoId; 	}, 	video_pause(e) { 		if(e.target.id == this.videoId){ 			this.videoId = null 		}else{ 			console.log('暂停的上一个') 		} 	}