评论

开发小程序的各种坑

层级关系、插槽slot、自定义tabbar、自定义顶部导航栏navbar、关于界面的顶层布局 的坑

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,这个我想你们都遇到过。

先到这里,其实坑还有很多很多,但有些是业务上的,不是每个人都会遇到,但说回来,业务是在发展的,这些坑以后必然是要踩的。做个码农不容易啊。

点赞 7
收藏
评论

8 个评论

  • 无名
    无名
    2019-04-19

    1、Android系统的碎片化很严重,拿着谷歌的开源项目 几乎每个厂家都喜欢搞一套自己的,显得自己很厉害的样子

    2、IOS的一家所以很多东西是标准化的,但是很多权限不让你拿

    3、小程序本来几乎可以说就是套一个浏览器壳在上面

    4、模拟器是谷歌内核

    5、小程序搞一套自己的标准,比如rpx,当然px rem这些单位都可以选择,但是自己有搞一套rpx,我们尝试使用rpx做单位的时候,你在模拟器上面看到的更不标准。这非常影响开发效率,尤其是细节化调整

    6、它并不像 微软的 WFP UWP开发编译器会自动帮你校正这些单位,或者说规定一套标准的,比如用 px  rpx 这些就只能用其中一个单位。有时候非常的难选择

    7、没办法,你要用 就迁就吧,毕竟太年轻

    2019-04-19
    赞同 1
    回复
  • Bin
    Bin
    2019-04-18

    Object wx.getMenuButtonBoundingClientRect()

    了解一下

    2019-04-18
    赞同 1
    回复 1
    • ZoaR
      ZoaR
      2019-04-18

      3q

      2019-04-18
      回复
  • 周
    02-21

    第二个问题天坑,最近遇到了,要重新修改样式才行了吗?

    02-21
    赞同
    回复
  • Jimmy
    Jimmy
    2019-05-23

    canvas导出为图片

    2019-05-23
    赞同
    回复
  • 丁鹏
    丁鹏
    2019-04-29

    请问一下 srcoll-view被tabBar遮挡了一部分怎么解决?

    我想让 scroll-view和tabBar顶端 连在一起,不知道怎么实现

    2019-04-29
    赞同
    回复 1
    • ZoaR
      ZoaR
      2019-04-29

      这个没办法的,你要给页面设置padding-bottom或者margin-bottom和tabbar一样高来抵消这个

      2019-04-29
      回复
  • 墨染的天空
    墨染的天空
    2019-04-22

    坑很多,开发工具是最让人吐槽的,BUG多,很难用

    2019-04-22
    赞同
    回复 1
    • ZoaR
      ZoaR
      2019-04-22

      嗯,虽然吐槽了这么多,但小程序的定位、路线、设计都还是很ok的,只是一些基础设施不弄好有点难受。很多都是比较基础的bug,感觉微信的人好像不怎么care

      2019-04-22
      回复
  • Zzx
    Zzx
    2019-04-19

    还有textarea。。

    2019-04-19
    赞同
    回复
  • 无名
    无名
    2019-04-18

    我在开发 的时候 遇到 scroll-view,里面使用了 弹性布局,然而就出BUG了, 事件触发不了,

    但我并不了解小程序底层的设计, 一种混合的语言,说是 JS HTML,但是有些组件的,说不,但是起码都是JS语法这些, 当然我随便吐槽一下官方的 开发工具 对于这种有强迫症的人来说,自动单引号补全 真是脑壳疼

    2019-04-18
    赞同
    回复 3
    • ZoaR
      ZoaR
      2019-04-18

      是的,开发工具有很多问题的,但是用多个编辑器嘛又有点麻烦,所以也没换

      2019-04-18
      回复
    • 无名
      无名
      2019-04-18

      我现在正在使用 vs code,我把 微信开发工具就当调试器来用, 就好比常规的 编译器跟 浏览器的区别, 因为实在是太醉人了

      2019-04-18
      回复
    • ZoaR
      ZoaR
      2019-04-19回复无名

      主要是模拟器和真机有时不一样,开发预览调试比较麻烦。比较奇葩的坑是,之前做全球化的时候,获取获取语言标志,模拟器上和真机不一样,体验版和正式发布版(都是真机)又不一样,完全不明白微信是怎么想的

      2019-04-19
      回复
登录 后发表内容