吐槽:微信小程序开发中的那些坑儿!

 春哥团队前端开发肖肖最近在做小程序的前端开发,开始以为跟html差不多,做了之后发现还是有区别的,在整个开发过程中也遇到了许多坑,今天给大家分享一下,避免大家在开发过程中掉入这些坑。

先说wxml吧,其实wxml的标签跟html里面的一些标签是一样的,就说view标签就相当于div标签,text标签相当于span标签吧,然就是表单元素,这里就要注意了,在微信小程序中,表单元素都是原生组件,微信小程序中原生组件层级最高,所以在用input,canvas,map这些组件就要注意了,就比如说,下面填写备注是一个input标签,然后点击优惠券弹出一个选择使用优惠券的浮层就会出现下面这种情况:

input里的value会在浮层上面的,要解决这一问题还是很简单的,在小程序中input有个placeholder-class属性,我们只要写一个类,规定它的z-index:1只要比浮层权重低就行了,然后使用placeholder-class属性绑定这个类就行了,不过在使用过程中可能还会遇到别的问题,大家可与加我与我讨论,还有input标签无法设置 font-family;这些大家都要主意,对input直接float:left也是不行的,要在input外面套view,然后对其进行浮动。

scroll-view组件

注意事项:

  1. 不要在scroll-view 中使用 textareamapcanvasvideo 组件
  2.  scroll-into-view 的优先级高于 scroll-top
  3.  在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh

  还有在开发过程中背景图片如果是在本地,真机调制预览是不显示的,display:flex,在ios会中存在一些问题。

js里面也有许多坑,就说他们的执行顺序吧,在开发者工具中执行先执行aap.js然后执行其他js文件,但在手机上app.js和其他js是同时执行的,就比如说你在app.js里面向本地存储一个变量,然后再去index.js里面取这个变量,在开发者工具中是可以取到的,但在手机上它会取不到的,当然这也是我的逻辑问题,在开发过程中使用api也要注意,因为微信版本不同,所以在使用api时一定要仔细看文档,做好兼容处理,比如友好提示不兼容,不然报错就game over喽,还有就是小程序页面跳转打开最多五层,超出五层不会跳转了,所以大家要注意,可以在跳转的时候关闭前一个页面。

好了今天就和大家分享这么多,继续搞我的开发了,如果大家在开发过程中遇到其他一些坑也可以分享一下哦!

应公司要求,顺便打个广告:
助力中小企业、网络公司、工作室、IT爱好者无编程轻松开发小程序,由春哥团队独家打造的春哥小程序开发平台V1.3源码系统已经正式升级发布了,功能强大,用此款源码系统可以分分钟搭建出强大的小程序开发平台,可视化操作,小白也可以开发小程序,轻轻松松接单赚钱

来源:春哥技术博客,欢迎分享,(春哥微信号:taike668)
上一篇:【小程序开发教程系列16】开发篇之调      下一篇:如何在不同架构上写出一手好的小程序?