小程序开发遇到的坑，知道下总是好的！

简介

因为之前一直做的是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进行数据处理是行不通的，所以要想对数据再次处理有两个方法：

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

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

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

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

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

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

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

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

app onShow中不可以获取页面栈

跳转会触发page的onload方法

小结

以上就是开发小程序中遇到的问题，简单总结下，绝对有帮助谢谢给个赞。如果发现有问题欢迎指正！