uni-app 開發隨筆（踩坑記錄）

這里總結一些uni-app開發時我遇到的坑

uni-app獲取元素高度及屏幕高度（uni-app不可使用document）

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()

uni-app之touch事件方向判斷

//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("右滑=====")
				}
			  }
		}
	}

js查找替換字符串之replace

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解析標簽，此類名給個樣式

資訊類型項目swiper嵌套scroll-view

1.圖文混排用rich-text

<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/[e-mail]"/>
				 </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('暫停的上一個')
		}
	}