小程序bug

记录下本人在写小程序时遇到的一系列难题与bug

1. 菜单隐藏消失的动画效果（主要用了animation、transformX控制left的值）,在设置wx-charts图表在菜单显示时隐藏，最后发现在安卓上正常运行，在苹果6手机上卡顿严重，怀疑是wx-charts框架兼容问题
2. 实例上挂载的数据长度有限制。最大长度为1048576。可手动删除一些无用数据再setData

3. wx-canvas线状图中多条线展示时，点击显示tooltip后苹果手机会出现无法滚动的现象。得添加属性值disable-scroll="{{false}}"

4. cover-view其实很多都是不支持的，比如动画，如果你想要在cover-view上边加动画你会发现没有效果，虽然在模拟器里边可以显示动画，但是在真机测试的时候是没有效果的。

还有就是cover-view虽然可以设置overflow: scroll，但是不支持动态的去变换overflow的属性值。

还有就是cover-view它会有默认设置的样式：white-space: nowrap; line-height: 1.2; display: block;所以你会看到在cover-view里边写的文字不会换行，而是超出的内容直接裁剪掉。

最后就是我在cover-view上边绑定touch事件的时候在真机上也没有效果，大概是cover-view目前应该还是没有支持touch事件吧也有可能是cover-view不支持动画导致，总之，cover-view目前并没有我们想的那么强大，只能实现一些简单的功能

5. 一般这样创建一个日期变量

var d = new Date("2017-08-11 12:00:00");

发现在iOS中不兼容，返回valid Date。IOS中不支持 - 连接日期需要写成

var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));

这样来兼容ios，而且年月日都得传，比如不能传

new Date("2016/09")

ios会返回空对象。而且小程序picker组件也必须传start属性，否则在苹果上会从1年开始选择

6. 开发工具不用勾选ES6转ES5，mpvue框架已经自动转换了。只用勾选上传代码时样式自动补全以及上传代码时自动压缩

7. 小程序的cover-view组件有bug，比如本项目中要实现导航栏菜单遮住所在页面中的多张图表时需放在最后一张图表的组件标签内部，如

<div class="nav-place"></div>

<chart :class="{'hide-canvas': isHideCharts}" v-if="userGrowCanvas.line" :canvas-data="userGrowCanvas">

<chart :class="{'hide-canvas': isHideCharts}" v-if="channelCanvas.line" :canvas-data="channelCanvas">
    <NavigationBar :navTitle="navTitle" @show-menu="showMenu" @hide-menu="hideMenu"></NavigationBar> 
</chart>

因为设置了fixed固定在视窗顶部，因此用一个容器占用位置防止普通元素置顶被挡住

8. wx.request 请求返回报错 convert to UTF8 fail

跳坑《八十一》request:fail response data convert to UTF-8 fail(bom问题-小程序综合区-微信小程序开发社区-微信小程序联盟

9. 微信小程序中的button的border属性或者圆角，都是写在after里面的

10. cover-view组件的padding再苹果手机上无效，在安卓机上有效。通过设定固定宽度解决

11. mpvue-echarts饼状图pie在小程序中点击圆环后中间空白部分会随机涂满颜色

12.

小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）

13. wx.navigateTo不能滥用，因为他会保存页面，小程序又有只能打开10个页面的限制，因此滥用可能导致导航跳转失效

14. 小程序没有监听页面滚动停止的事件，可用计时器监听

  onPageScroll: function(e) {
    clearTimeout(this.timeoutId);
    this.isNotScroll = false;

    // 设计时器以监听页面停止滚动
    this.timeoutId = setTimeout(
      function() {
        this.isNotScroll = true;

        delete this.timeoutId;
      }.bind(this),
      100
    );
  },