微信小程序遇到的坑

小程序textarea组件字数限制问题

解决方法：

<textarea name="content" maxlength='-1'></textarea>

scroll-view 中不能使用 textarea 组件

swiper和swiper-item是继承scroll-view的,所以在他们里面使用textarea的时候会出现很奇怪的现象，比如placeholder错位。解决方法：

用view组件替换swiper组件，用微信小程序的wx.animation()实现点击切换效果除此之外，在 scroll-view 中也不能使用 map、canvas、video 组件。否则会出现很多奇怪的现象

input组件的问题

placeholder 文字与 input 的值重叠暂无解决方法
获取焦点和失去焦点时，光标和文字跳动暂无解决方法
当 input 设置为居中对齐时，光标会出现在奇怪的位置暂无解决方法
bindconfirm 事件在失去焦点时也会触发，类似于 blur 暂无解决方法
对 input 做动画时，如果是获取焦点状态，会失效暂无解决方案，因为 input 在获取焦点时是
native 组件，失去焦点后改回 web 组件
type 为 idcard, digit 时并不是调用数字键盘暂无解决方案，目前起作用的只有 number
在input聚焦期间，不能做css动画，否则input中的placeholder会错位，如果动画和聚焦都想要的话，那么可以在动画完成之后，再设置聚焦

关于数据绑定的问题

小程序更新data后只是把数据的值更新，不会刷新页面，比如滑动的列表不会回到顶部，导致使用swiper有个小bug：

就是swiper的数据是后台请求的，可通过切换tab标签动态获取，如果在切换之前swiper处在第三张或者更多（比将要点击的tab下的swiper多），那切换后swiper会是空白，解决办法是，每次切换要手动初始化swiper的current 　　属性，使其停留在第一张。

关于生命周期的问题

生命周期函数不要写成箭头函数，否则this会取不到

切换底部导航时页面不刷新问题，可以用onShow函数掉一次接口重新获取数据解决，或者写一个下拉刷新

图片预览问题

ios没有问题，安卓会黑屏，原因是预览的图片必须是http或https开头的url，相对路径会黑屏

背景图片不显示的问题

这应该是小程序的bug，解决方法：

1. 将背景图片转成base64 2.将图片放到服务器，使用url显示

关于picker组件

1. 触发弹窗时一定要点击在内容上才可触发，点击空白处无效，这个解决看具体需求，比如加个默认值之类的

2. 安卓和ios的样式不一样，如果对这个有要求建议使用第三方组件（如：有赞）

关于post请求

如果要传请求参数，header中要写这个 'content-type': 'application/x-www-form-urlencoded'，官方文档说的 'content-type': 'application/json'这个，貌似不管用

小程序没有过滤器

可以用wxs解决，但是要处理传入的value undefined的时候，否则会报错，因为这个方法执行的快一些，数据还没有传过来，当数据传来后又执行一次，第一次很可能undefined

关于小程序码识别的问题

如果二维码识别的是小程序通过 navigate 跳转后的子页面，进入小程序后将回不到首页，因为小程序会认为这是首页，如果有可以回到首页的需求，我的解决办法是，识别后进入首页根据scene参数进行子页跳转

new Date跨平台兼容性问题

在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题，但是在ios下面识别不出来。因为IOS下面不能识别这种格式，需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。

var iosDate= date.replace(/-/g, '/');

wx.getSystemInfoSync获取windowHeight不准确：

主要原因在于获取是时机，wx.getSystemInfoSync是在页面初始化的时候就计算了，基本上可以理解为是屏幕高度。所以，最好的方法是使用异步接口，并且在onReady函数中调用。

onReady() {
  wx.getSystemInfo({
    success({windowHeight}) {
      // todo
    }
  });
}

图片本地资源名称，尽量使用小写命名：

在解决iPhone X适配时，底部多余部分使用图片时

<image src="/imgs/iphoneX.png" mode="aspectFill">
路径是 src='imgs/iphoneX.png'></image>

发现在pc IDE上面可以显示出来，但是真机调试时，图片找不到，然后将图片名称改为iphonex.png真机调试就可以了

<image src="/imgs/iphonex.png" mode="aspectFill"></image>

无法获取UnionID的问题

login获取UID必须满足两个条件：

把小程序和公众号都绑定在开放平台
用户必须已经关注公众号

用wx.getUserInfo获取满足一个条件：

把小程序和公众号都绑定在开放平台

wx.getUserInfo()接口更改问题

微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。

链接: https://fly63.com/article/detial/1472