微信小程序

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中初始化数据,可以直接设置;如


微信小程序_第1张图片
wxml代码
微信小程序_第2张图片
js代码
微信小程序_第3张图片
效果

事件对象target与currentTarget详解:

微信小程序_第4张图片
微信小程序API文档

例如绑定tap事件,即bindtap绑定函数时,点击触发函数,打印出e,会发现currentTarget指向的是触发该事件函数所绑定的对象,而target指向的是用户所真实触发对象;即

currentTarget:触发的函数它绑定的那个组件;即事件捕获的组件

target:实际触发的组件,跟触发函数无关

例子更容易让人理解,例子来啦~

微信小程序_第5张图片
wxml代码
微信小程序_第6张图片
js代码

点击inner view时,会打印出:

微信小程序_第7张图片
结果

以上的例子很明显,总之要记住,用户实际的操作,一定就是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)

模板: