移动端项目遇到的问题

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>

小程序

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]
    }
  },