微信小程序h5兼容性问题

Posted 2023-04-01 夜丶陌颜

1. 微信小程序中border-image 设置渐变 导致border-radius 不生效。

  border-radius: 20rpx;
  border-image: linear-gradient(180deg, rgba(200, 200, 200, 0), rgba(228, 217, 192, 1)) 2 2;

不建议两者同时使用，实测ipone12 不兼容， ipone 12以上正常显示。可以使用背景图片代替。

2. h5 使用原生table tr、th、td封装表格，在ios 中样式失效

建议使用dev 整体布局。

3. 企业微信群二维码插件materialPlugin、cell 遇到 slot（插槽）第一次群码加载不出来。

不要再slot 中使用第三方插件。

4. 微信小程序 font-weight：500/600/700 加粗 在小米手机中不生效。

解决方案：使用font-weight:bold 代替 数字。

5. new Date(‘2022-01-11 12:00:00’） 获取时间

问题：ios 遇到 ‘2022-01-11 12:00:00’ 格式化失败
解决方案：把 - 变成 /, new Date(‘2022/01/11 12:00:00’)

6. 微信小程序修改radio 样式

问题：在子组件中修改radio 样式不生效

解决方案：样式写在父组件中（Page页面中）， 子组件设置addGlobalClass: true，作用到子组件

/** 父组件中编写 */
/* 外面的边框可以这样 */
radio
  display: flex
  align-items: center
  .wx-radio-input
    height: vw(10)
    width: vw(10)
    border-radius: 50%
    border: vw(1) solid #979797 //替换边框 隐藏原有边框

radio 
  .wx-radio-input.wx-radio-input-checked 
    border: vw(1) solid #979797 !important
    background-color: #FFF

/* 中间圆点   选中的背景需要是xml中设置 */
radio 
  .wx-radio-input.wx-radio-input-checked
    &::before 
      border-radius: 50%
      /* 圆角 */
      width: vw(6)
      /* 选中后对勾大小，不要超过背景的尺寸 */
      height: vw(6)
      /* 选中后对勾大小，不要超过背景的尺寸 */
      text-align: center
      font-size: 0
      /* 对勾大小 30rpx */
      color: #FFF
      /* 对勾颜色 白色 */
      background-color: #8B8B8B
      transform: translate(-50%, -50%) scale(1)
      -webkit-transform: translate(-50%, -50%) scale(1)

/** 子组件中设置 */
Component(
  options: 
    addGlobalClass: true
  ,
 )

微信小程序ios 底部安全距离（黑色长条）

问题：

使用constant、env：

 padding-bottom: constant(safe-area-inset-bottom) !important
 padding-bottom: env(safe-area-inset-bottom) !important
 
 // 遇到问题，iponeX 以上正常，但是低版本ipone 手机本身没有底部安全距离，设置之后导致paddiing 变大
 注意：`env、constant` 遇到软键盘弹出，多次操作之后会导致`padding-bottom` 失效

微信apigetSystemInfoSync：

 let screenHeight = wx.().screenHeight
 let bottom = wx.getSystemInfoSync().safeArea.bottom
 this.globalData.isIPhoneX = screenHeight !== bottom

// 定义全局变量控制isIPhoneX 是否需要安全距离

使用

<view class=“ isIPhoneX ? 'safe-distance' : ''”> 安全距离兼容</view>

style

// 安全距离
.safe-distance 
     padding-bottom: constant(safe-area-inset-bottom) !important
 	 padding-bottom: env(safe-area-inset-bottom) !important

两者配合使用

微信小程序 ios text-allign:end 不兼容

问题：input 居右对齐，text-allign:end 在ios 不兼容
解决方案：text-allign:right

微信小程序中的ios兼容性问题

1.ios中input的placeholder属性字体不居中

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

2.ios中滚动卡顿

设置-webkit-overflow-scrolling:touch;

3.微信小程序中解决ios中new Date() 时间格式不兼容

在实现日期时间对比时，时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法兼容，安卓中显示正常
原因：IOS支持的日期类型为2018/11/12，所以把"-"替换成"/"，则IOS和安卓都可兼容

let time = \'2018-12-10 11:11:11\'; 
let temporaryTime = new Date(time.replace(/-/g,\'/\'));

4. 微信小程序scroll-view隐藏滚动条方法

在wxss里加入以下代码：

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

参考原文： http://www.okeydown.com/html/2018/11-02/956.html