kbone采取的是抹平底层渲染环境的方式实现同构,但是仍然有部分dom的api使用时有需要注意的地方。希望在后面的迭代中越来越好。
getBoundingClientRect的实现
scrollTop是做交互常用的属性,比如滑动、拖动等。在web中通过dom.getBoundingClientRect方法可以获取到。在同构方案中, 对于getBoundingClientRect的实现,可以看到/miniprogram-render/node/element.js 里是mock的,只做兼容使用。
这里提到需要使用 ?getBoundingClientRect, 看一下它的实现:
里面封装了小程序里的getBoundingClientRect的实现。
小程序端的 getBoundingClientRect 实现:
节点必须是viewport或者scroll-view:
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.scrollOffset.html
功能类似于 DOM 的 getBoundingClientRect:
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.boundingClientRect.html
这里会遇到非viewport的dom元素,如何获取其scrollTop的问题。可以采用的做法可以是:该滚动元素的第一个子元素的top,一定程度上可以代替滚动元素的scrollTop.
点击事件
有些api是web和小程序都可以拿到的:
比如:event.targetTouches在web和小程序里都可以拿到
可视区的属性
document.documentElement.clientWidth在小程序里需要用wx.getSystemInfoSync().safeArea.width;
屏幕高度的属性需要用 document.documentElement.scrollTop|| document.body.scrollTop||wx.getSystemInfoSync().safeArea.top;
style scope
用vue时注意不要用 scope, 在小程序里不生效并且导致样式丢失。
KSwiper change 事件参数
kbone-ui中有些事件参数,小程序里和web不同,需要根据环境判断(这里改起来应该是容易的,不知道为啥没有实现):