uniapp

记录一下写uniapp踩过的坑

uniapp可以将代码编译到5个小程序,h5和app.开始学习uniapp,目标是练习一个小项目,可以正常编译到app,微信小程序和h5

upx的坑

首先是uxp单位,在代码中使用upx时,会把屏幕等分为750份,所以在375px的屏幕(iphone7)上4upx=2px,但是在320px屏幕(iphone5)上,4upx=1px,并不是4upx=1.7px,这是因为upx最终换算为px的结果为整数.

这样的换算应该是整数的px好渲染?不太清楚.

造成的结果 : 这样的换算对于padding和margin的影响无疑是巨大的,因为假设一个元素设置了padding:4upx;margin:4upx;那么最后这个元素在320px屏幕的误差会达到2.8px,如果这个元素有n个,那么误差为2.8*n

所以尽量不要给元素定死高度,多使用flex布局

createSelectorQuery

那么问题来了:不给元素定死高度,最后在计算列表的高度就不方便了吧,因为小程序不支持原生document.getElementbyID.style这样的形式获取元素高度,所以这里来谈谈createSelectorQuery
uniapp借鉴了小程序的createSelectorQuery这个api,也是非常方便的就能获取到元素的宽高,和offset等属性.

createSelectorQuery在小程序中不能选取到自定义组件,官方文档是说uni.createSelectorQuery().in(this)能选取到组件,但是不加in(this),h5也是能选取到组件,小程序加了in(this)也选取不到组件.所以我获取组件高度选择在组件中获取,得到后把高度传回父组件

值得注意的是,这个api在小程序中是异步代码,在h5里面不是,所以最好使用promise函数将结果return出去,
下面贴上uniapp的createSelectorQuery这个api的代码

methods:{
	
	getMyHeight(){
		return new Promise((resolve,reject)=> {
			let selector = uni.createSelectorQuery().in(this);
			selector.select('.newslist').boundingClientRect((res)=> { //res - 各种参数
				resolve(res.height)
	　　    })
			.exec((res)=>{//res - 各种参数
				
			})
			
		})
		
	},
},

组件

既然上面谈到了组件,这里就来说说组件的问题,基本用法和vue组件一致
但是created 在小程序中无法使用,h5正常,推荐使用 mounted

选择器

先贴一个报错吧
Some selectors are not allowed in component wxss, including tag name selectors, ID selectors
大概意思是无法使用id选择器,属性选择器(例如 : input[type=“text”]),标签选择器(例如 : input),不过标签选择器是可以正常使用的,在小程序 h5 app正常,但是这里报错说不能用,好慌啊

uniapp中修改input提示placeholder的样式

<input placeholder-style="color:#eeeeee;font-size:36upx;" />

暂时在学习中只遇到了这些问题,还有的话以后再补上来