微信程序小前端坑整理

坑1、没有DOM

无法使用熟悉的$查找、document.getElementById等等这些操作小程序取而代之的是数据绑定技术SEO优化小程序取而代之的是数据绑定技术所谓的数据驱动网站优化所谓的数据驱动就是数据改变之后视图展示跟着自己会变。DOM没了所以只好频繁的使用this.setData({})来操作页面属性。

坑2、图片问题

除tapbar外背景图无法使用本地资源替代方式是使用base64资源或者外网加载。每个image标签底部有一条透明间隔非padding非margin。在图片前面做遮罩层时可能会被坑。

小程序页面跳转打开最多五层超出五层不会跳转了所以大家要注意可以在跳转的时候关闭前一个页面。

坑4、wxml标签

wxml的标签跟html里面的一些标签是一样的就说view标签就相当于div标签text标签相当于span标签吧SEO优化text标签相当于span标签吧然就是表单元素这里就要注意了在微信小程序中表单元素都是原生组件微信小程序中原生组件层级最高所以在用inputcanvasmap这些组件就要注意了。其中在样式上不支持overflow-x/overflow-y只可使用overflow。

在input标签中会出现placeholder文字位置不固定可使用使用placeholder-class属性修改placeholder样式。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。

在map组件中只能使用cover-view标签在cover-view标签下只能使用cover-view以及cover-image标签这两种标签在样式上的问题非常多不建议使用问题1、当使用display:none;做隐藏的时候其内容文字会出现在屏幕右上角建议使用 wx:if="false"或position:absolute;left:-1000rpx;这种方式做隐藏。2、border不支持单边。3、不支持padding的使用在安卓端会出现padding消失的问题。

坑5、动画问题

在小程序中当有两个元素同时发生变化时会出现冲突导致其中一个变化而另一个不做变化所以要使用setTimeout方法避免元素同时出现变化。

坑6、js问题