回复 刷新

暂无评论

小程序开发遇到的坑,知道下总是好的!

因为之前一直做的是pc端的开发,而且大部分是用的vue或者react技术栈。并且所做的web网页基本也都不需要兼容低版本浏览器,所以在开发过程中对于兼容的处理其实比较少的。然而当开始接触微信小程序原生开发之后,也开始遇到并解决了一些坑,有些是兼容性导致的,这里就简单记录下自己遇到并解决的坑,希望对你也有所帮助,不用在此浪费时间!

text标签不要换行,view中如果也只有文本也不要换行

这个问题真的是写div写的习惯了,特别喜欢把标签换行就像这样:

<div> 中国 <div> 复制代码

然而当在小程序中也这样写的时候,问题就出现了。在小程序中渲染完成后会发现在文字的前后会加一行空格,所以就导致了文字前后的上下间距加大,所以导致页面与设计不符合。因此小程序中不能换行!

bind绑定事件在低版本不能带有冒号

这个是在input输入框的时候,绑定了一个事件。但是当时是用的是bind:事件这样的写法,在高版本的微信使用是没有问题的,但是当在低版本微信的时候,事件并没有生效。然后查了下文档,文档说是在比较低的版本只支持不带:的绑定写法,所以为了兼容性可以看最低需要支持的微信版本,适度使用不带:的绑定事件。

setData异步问题

文档有写到setData方法是个异步的方法,所以在需要依赖这个更改值的地方,需要写到回调函数里,类似于react的setState方法。还有个需要注意的问题是,在需要更新ui的值才放到data中用setData进行更改,因为setData更改数据比较消耗性能,如果是js中需要使用的变量不涉及到更新ui界面,可以直接放到this下,更改值的时候直接这样修改:

this.flag = '123' 复制代码

这样的话一方面避免的性能问题,一方面也解决了更改数据的异步问题。

禁止滑动穿透要定义一个catch事件touchmove事件

在封装一个弹出层模态框的时候,当蒙层盖在页面上,滑动蒙层会穿透滑动页面,要禁止这个穿透滑动只需要用catch定义一个touchmove的空事件方法就可以了。
wxml中不能使用一些js方法

在web开发的时候,比如react,通常如果数据需要简单的处理下,可以直接在jsx中对数据进行处理。比如保留2位小数这样的需求。但是如果在小程序中直接使用js的api进行数据处理是行不通的,所以要想对数据再次处理有两个方法:

  • 直接在js文件中把数据先处理好
  • 在wxs中定义一个处理函数,然后在wxml中进行调用

wx.scanCode在安卓和iOS下表现不一致

这个坑是真的难受,当在进入页面判断调用wx.scanCode之后,在成功的回调进行赋值。结果发现安卓下赋值总是晚于onShow生命周期函数,但是在iOS上是成功的回调函数先于onShow生命周期函数。最后经过反复论证,得出的结论是

调用扫一扫api在安卓下,回调函数是晚于onShow。而在iOS下回调函数会早于onShow

开发版和正式版本有本地缓存记录,体验版没有

在测试小程序的时候,难免会接触到开发版、体验版和正式版。这个坑就是这三个版本之间会有差异,所以不到正式版测试一下,其它的版本只能做一个参考。举个例子:就是有个人数据永久存储到本地,但是体验版在每次进入的时候却并没有保存。所以开发小程序每个版本都要试试,有差异要以正式版为主。

小程序之间跳转的extraData下的参数安卓和iOS表现不同

在做小程序跳转的时候需要携带一些参数,文档指出在extraData下有携带的数据,但是实践得知,在安卓和iOS存在不同,安卓携带的数据是一直存在的,内部页面的跳转也携带有参数。而iOS只在跳转的那个页面存在数据,在之后的内部跳转数据是消失不存在的

  • app onShow中不可以获取页面栈
  • 跳转会触发page的onload方法