px与rpx:
px:微信小程序里面px跟web端px是不一样的,微信小程序里面的px指逻辑分辨率,即pt,比如iphone6下面:逻辑分辨率375*667,逻辑分辨率750*1334;如果是web端,那么直接按照750px的设计稿来就是1:1的关系;但是如果是在微信小程序里面,那么按照750px的设计稿来,那么就是0.5倍的关系,因为微信小程序里面,px指的就是逻辑分辨率,也可以认为就是屏幕宽度。
rpx:微信小程序里面定义的单位,即按照iphone6,物理像素为750的标准来定义,那么按照基准为750px的设计稿来看的话,就是1:1的关系
总结:iphone6下,px-->屏幕宽度,逻辑分辨率;rpx-->物理像素;1rpx = 0.5px
数据双向绑定小贴士:
setData(xxx)方法,不需要在data中初始化数据,可以直接设置;如
事件对象target与currentTarget详解:
例如绑定tap事件,即bindtap绑定函数时,点击触发函数,打印出e,会发现currentTarget指向的是触发该事件函数所绑定的对象,而target指向的是用户所真实触发对象;即
currentTarget:触发的函数它绑定的那个组件;即事件捕获的组件
target:实际触发的组件,跟触发函数无关
例子更容易让人理解,例子来啦~
点击inner view时,会打印出:
以上的例子很明显,总之要记住,用户实际的操作,一定就是target;而currentTarget跟所触发的函数有关,它指的是绑定这个函数的组件。
(PS:可以顺道了解一下小程序的bind和catch哟,对于理解冒泡和捕获,以及实际开发中阻止冒泡和捕获有帮助~)
缓存同步和异步
同步:wx.setStorageSync(string key, any data)
异步:wx.setStorage(Object object)
结合实际需求,避免异步缓存出现回调地狱,也需要避免同步耗时,一般情况下,如果耗时不长一般使用同步
template内路径问题
template会被多个组件共用,所以一般路径使用绝对路径,因为template内的路径如图片路径,都是相对于引入template组件的路径决定的,就可能导致不同组件路径会不一样,读取不到的情况。
模板(https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html)
模板:<template name=“xxx”>
引入模板的组件:<template is=“xxx” data=“{{...item}}”>
记得在即将引入模板的组件的wxml和wxss组件中分别 import模板和模板的样式:
<import src='xxx.wxml'>
@import 'xxx.wxss'
关于Swiper组件
swiper-item的宽高是默认100%的,要设置swiper-item的宽高,就要设置swiper的宽高,swiper-item才会随着变化,如果直接在swiper-item设置宽高,即使是行内样式,也是无效的。
比如下面的例子:代码中设置了行内样式,审查元素的时候发现没有设置成功