简介
因为之前一直做的是pc端的开发，而且大部分是用的vue或者react技术栈。并且所做的web网页基本也都不需要兼容低版本浏览器，所以在开发过程中对于兼容的处理其实比较少的。然而当开始接触微信小程序原生开发之后，也开始遇到并解决了一些坑，有些是兼容性导致的，这里就简单记录下自己遇到并解决的坑，希望对你也有所帮助，不用在此浪费时间！
text标签不要换行，view中如果也只有文本也不要换行
这个问题真的是写div写的习惯了，特别喜欢把标签换行就像这样：
<div>
中国
<div>
然而当在小程序中也这样写的时候，问题就出现了。在小程序中渲染完成后会发现在文字的前后会加一行空格，所以就导致了文字前后的上下间距加大，所以导致页面与设计不符合。因此小程序中不能换行！
bind绑定事件在低版本不能带有冒号
这个是在input输入框的时候，绑定了一个事件。但是当时是用的是bind:事件这样的写法，在高版本的微信使用是没有问题的，但是当在低版本微信的时候，事件并没有生效。然后查了下文档，文档说是在比较低的版本只支持不带：的绑定写法，所以为了兼容性可以看最低需要支持的微信版本，适度使用不带：的绑定事件。
setData异步问题
文档有写到setData方法是个异步的方法，这个异步是指在更新页面的情况下，所以在需要依赖这个更改值的地方，需要写到回调函数里，类似于react的setState方法。但是如果没有只是在js中对值的更改是可以立即拿到值的。还有个需要注意的问题是，在需要更新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方法
input中获取的值是字符串类型
如果需要取到的值做计算，需要对数据的类型进行强转换，然后在进行计算
去除image默认的下边空白边距
- image使用display属性设置
image {
display:block;
}
image {
display:flex;
}
- 改变图片的对齐方式
image {
vertical-align:top;
}
- 设置父元素的文字大小为0，父元素有文字不建议用
.father {
font-size:0;
}
mobx的状态不是同步更新的，不能立刻拿到更改后的值
小结
以上就是开发小程序中遇到的问题，简单总结下，觉得有帮助谢谢给个赞。如果发现有问题欢迎指正！
