微信小程序前端坑整理

时间:2021-01-06 19:56:54

1、没有DOM

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

tip:在方法最初最好添加 var than = this; 使用than代替this,否则方法内部函数的this会被替代。

 

2、图片问题

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

 

3、跳转

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

 

4、wxml标签

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

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

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问题

js执行顺序,在开发者工具中执行先执行aap.js然后执行其他js文件,但在手机上app.js和其他js是同时执行的,就比如说你在app.js里面向本地存储一个变量,然后再去index.js里面取这个变量,在开发者工具中是可以取到的,但在手机上它会取不到的