全网小程序iOS兼容性问题实例

iOS中new Date() 时间格式不兼容

比如newDate(“2018-08-08”)，在ios会出现NaN的情况，ios只支持newDate(“2018/08/08”) 我这里写了一个封装方法，来处理这个问题

// 处理时间日期，在ios手机下日期显示问题
const strToDate = (str) => {
  // let d = new Date(str)
  let d = null;
  if (typeof str === 'object' || typeof str === 'number') return new Date(str);
  if (!str) return new Date();
  str = str.replace('T', ' ').replace(/\//g, '-');
  //if(d == null) {
    let date = str.split('.')[0].split(' ')
    let days = date[0].split('-')
    let times = date.length == 1 ? ['00', '00', '00'] : date[1].split(':')
    d = new Date()
    d.setFullYear(days[0])
    d.setMonth(parseInt(days[1]) - 1)
    d.setDate(days[2])
    d.setHours(times[0])
    d.setMinutes(times[1])
    d.setSeconds(times[2])
    if (d.getHours() != times[0]) {
      d.setHours(parseInt(times[0]) + 8) 
    }
    //}
  // console.log('over:', str, ',', d);
  return d
}

input ios自带键盘选择文字更多文字向下滑动，会出现键盘消失问题

关于这个问题，官方文档给出的方法是用，always-embed="{{true}}",但是实际情况有一些ios版本会出现第一次键盘消失，第二次的时候就不会出现

<input type="text" placeholder="搜索" confirm-type="search" bindconfirm="searchBind" placeholder-class="placeholder" value="{{inputName}}" always-embed="{{true}}" />

input的placeholder属性字体不居中

对placeholder设置line-height及font-size
对input设置高度

页面滚动卡顿

设置-webkit-overflow-scrolling:touch;

scroll-view隐藏滚动条方法

在wxss里加入以下代码：

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

长按图片安卓能显示，iOS系统不能显示问题

这个图片路径，我之前设置的是本地路径，以至于安卓手机能访问，苹果手机访问不了。

修改办法：解决办法：将图片路径改为网页路径，即可兼容iOS版本

  previewImage: function (e) {
    var that = this
    var current = e.target.dataset.src;   //这里获取到的是一张本地的图片
    wx.previewImage({
      current: current,//需要预览的图片链接列表
      urls: [current]  //当前显示图片的链接
    })
  },

video 视频格式m3u8,在ios里边儿不能播放，但是安卓能正常播放？

官方给的例子，是mp4格式的文件，ios可以播放，微信小程序开发者平台的论坛也有类似的问题，但是没有准确的答案，我开始考虑转换下格式，奈何，技术不够，尝试添加在image 标签添加 custom-cache={{cache}} ,data 中添加 cache:false问题解决了。

<video src="{{sbDress}}" controls   custom-cache="{{cache}}"></video>

最后的话

觉得不错的朋友可以关注我，后续会持续更新~