开发小程序的各种坑
1. 层级关系
坑爹的原生组件(canvas等)层级最高,虽然官方个了个cover-view,但是这个覆盖是依赖渲染的先后顺序的,就是说如果cover-view是在canvas前面的,canvas反而会覆盖掉cover-view。然鹅整个架构的设计理念都是数据驱动的,你没办法只能打乱所有的布局来避免这个问题,布局结构乱了,又引发了其他的问题。
2. 插槽slot
自定义组件时slot你不管放在什么位置,渲染时就是都是直接追加在你自定义内容的后面,而且放的位置不一样,虽然都是追加在后面,但是有些样式不生效,布局乱掉,位置乱掉。
3. 自定义tabbar
虽然从2.5之后,官方给出了官方方案,但是当你自定义的时候,page不会像原来那样高度只到tabbar之上,page区域会拉升到屏幕最底部,tabbar会覆盖一部分的内容。
4. 自定义顶部导航栏navbar
这个没有官方方案,所以必须自己使用cover-view来自定义,首先那个胶囊按钮不同手机的位置就是不一样和单位转换无关,还不能获取,导致你自定义navbar的时候不美观,上面就是要居中,苦了开发。
然后这个和tabbar一样会使page拉伸到顶部,难点不是给page加个上边距,而是你需要下拉刷新的时候是从page的顶部开始的,你的下拉完全被自定义navbar挡住了。别跟我说设置margin,下拉刷新就是用的margin,冲突的。
最后还是原生组件层级导致的,你的navbar必须是最后渲染才行,要不然会被其他覆盖,你上滑时就知道了。我想过其他的方案,比如干脆navbar加个slot,把页面内容都放到slot,然后你就知道第二个坑哪里来的了。没办法还是修改布局得了。
5. 关于界面的顶层布局
一直以为是page标签,其实不是,坑。当你自定义tabbar的时候你就会看到整个布局是下面这个样子的。
[代码]<tab-bar>...</tab-bar>
<page>...</page>
[代码]
我去,小于号竟然还被转义了。
page是个奇怪的东西,你设置高度100%,高度是一屏,但还是会被内容顶上去,滚动依然会被整体上滑。不知道微信是个什么逻辑。
canvas等原生组件的滑动又只能是依赖page的整体上滑,巨坑无比。比放在scroll-view等里面滚动又有bug,这个我想你们都遇到过。
先到这里,其实坑还有很多很多,但有些是业务上的,不是每个人都会遇到,但说回来,业务是在发展的,这些坑以后必然是要踩的。做个码农不容易啊。