微信小程序开发跳坑集锦

1688源码 | 2018-10-21 20:59:46 |

 最近在做小程序的前端开发,开始以为跟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 中使用 textarea、map、canvas、video 组件
  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喽,还有就是小程序页面跳转打开最多五层,超出五层不会跳转了,所以大家要注意,可以在跳转的时候关闭前一个页面。

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

精品源码
  • 织梦万能API 百度小程序插件

    惊爆价¥400原价¥800

    立即购买
  • 我爱登报网 百度小程序源码 织梦CMS后台

    惊爆价¥520原价¥1040

    立即购买
  • 索娜根布黑枸杞 百度小程序源码 织梦CMS后台

    惊爆价¥520原价¥1040

    立即购买
视觉焦点

推荐文章

微信小程序插件使用错误cannotread property 'version' of undefined

微信小程序使用ES6构建面向对象的JS代码及访问服务器API获取数据

最新文章

关注我们

微信扫一扫,关注更多精彩

  • 1688源码公众号
    全面掌握源码一手资讯

  • 1688源码公众号
    精彩活动,推送提醒