微信小程序、h5兼容性问题（1）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序、h5兼容性问题（1）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 底部安全距离（黑色长条）

问题：
微信小程序、h5兼容性问题（1）
使用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
}

两者配合使用