h5

1. 当页面内容小于一屏的时候，按钮置底，当页面内容大于一屏的时候，按钮置于内容后面。

解决方法：用calc方法。移动端calc会存在兼容性问题，pc端可以用。

   <div style="height: 100%;">
    <div  style="height calc(100% - 50px)">
      <div style="min-height:'300px'"></div>
          <div>content</div>
       </div>
       <div>btn</div>  
    </div>

50px是btn的高度
min-height是content的高度

2. fixed置底在安卓端会有兼容问题。当点击input框弹出键盘时，fixed内容会被顶上去

解决方法1:
vue中可以参考这个链接https://blog.csdn.net/chern1992/article/details/76212205
但是这个方法在vivo等某些安卓手机上会偶现display:none之后不会回显，不过大部分是可以用
解决方法2:用媒体查询

@media only screen and (max-height: 500px) {
    .submitBtn {
      display: none;
    }
  }

3. flex布局，这个布局是真的好用，不过在ios8系统上是有兼容问题，要做兼容处理。mint ui也是采用flex布局，在ios8上会用兼容问题，要进行兼容处理。

4. Mint ui框架的filed组件用disable禁用input时，文字颜色会变。

解决方法：

input:disabled{
  color: #333;
  -webkit-text-fill-color:#333;//一定要写
  opacity:1;//一定要写，因为有自己定义的opacity:0.8
  -webkit-opacity:1;
}

如果filed里面写了placeholder 和disable。会先显示disable的颜色
解决方法：

input{border: none;background: none;color: #333;}
::-webkit-input-placeholder {color: #ADADAD; -webkit-text-fill-color:#ADADAD;}
::input-placeholder {color: #ADADAD;-webkit-text-fill-color:#ADADAD}

加了webkit-text-fill-color:#ADADAD

5. Mint ui 组件中定义click事件没有用

改成click.native.capture

<mt-field label="" placeholder="" v-model="idCardVal" @click.native.capture="hideFixed"></mt-field>

6.transform:rotate3d(0,1,0,360deg)在ios下无效

在做翻牌效果时，发现安卓下可以使用，ios下无效。
解决方法：在旋转元素的父元素加perspective:800px；-webkit-perspective:800px;

<style>
.father{
perspective:800px;
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
}
.child{
    transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);    /* IE 9 */
    -moz-transform:rotateY(0deg);   /* Firefox */
    -webkit-transform:rotateY(0deg); /* Safari 和 Chrome */
    -o-transform:rotateY(0deg); /* Opera */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
</style>
<div class="father">
   <img src="img/xxxx.png" alt="" class="child">
</div>

7. vue打包文件路径不对

1.文件路径不对
找到config文件夹下的index.js文件修改一下位置

image.png

看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/'改为‘./'
2.背景图片路径不对
在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置

image.png

8. 动画

前段时间在做活动页的动画的时候除了animate还有什么办法可以做轨迹动画，特别是复杂的轨迹动画。
Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画(https://www.cnblogs.com/zamhown/p/6688369.html)

9. axios中取消请求

如果需要断开Javascript的ajax请求，一种是通过设置时间，超时自动断开，另一种我们可以调用XMLHttpRequest对象上的abort方法。
参考链接https://blog.csdn.net/zhuxiandan/article/details/81304967

10.vue中使用swiper遇到的问题

① swiper手动滑动时自动轮播失效
设置autoplay:true之后，再设置
autoplay:{
disableOnInteraction: false
}

② swiper动态加载,不会自动轮播
有人说加
var swiper = new Swiper('.swiper', {
observer: true,
observeParents: false
})

但是还是会出现问题③。重新初始化swiper，可以同时解决的② 和 ③

③ swiper动态加载，显示最后一个swiper-slide
在ajax返回数据成功后，设置一个定时器重新初始化swiper，我设置的是100

④ swiper轮播图不全屏展示

image.png

小程序

1.转发小程序时默认截屏预览图第一次分享不生成

配置page的navigationStyle: custom后，在非首页进行转发，会出现第一次点分享生成不了预览图的问题，第一次分享取消后，再点击分享（第二次分享），此时预览图生成。

image.png

目前已知ios下不存在这个问题，安卓手机会出现这个问题

重现步骤：
首页通过按钮进入“分享页”
在分享页进行转发（胶囊转发或者分享按钮转发）

（P.S. 题外话，当使用自定义导航头后，ios的转发默认截图是不包含自定义导航头区域，安卓会把自定义导航头也截图进去，能和ios表现一致么？）

现在微信还未解决这个bug，坐等。。。
现解决方法：在方法里写死imgae的图片地址

onShareAppMessage: function () {
    return {
      title: '杭州通纪念卡商城',
      path: 'pages/shopDetail/shopDetail?goodsId=' + this.data.goodsId,
      imgae: this.data.rfdsUrl + this.data.imgUrls[0]
    }
  },

支付宝

1.支付宝，ios环境下document.title改变标题不起作用

解决方法：引入支付宝h5JSSDK，具体参考支付宝H5开放文档https://myjsapi.alipay.com/alipayjsapi/index.html

ap.setNavigationBar({
    title: '设置导航栏背景色',
    backgroundColor: '#ED4A4D'
});