小程序前端开发：wxml和scroll-view组件两个坑

一 wxml

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8103.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8103.html

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

二 scroll-view组件

注意事项：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8103.html

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

还有在开发过程中背景图片如果是在本地，真机调制预览是不显示的，display：flex，在ios会中存在一些问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8103.html

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