草庐IT

微信小程序、h5兼容性问题（1）

夜丶陌颜 2023-04-10 原文

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

微信小程序微信ltgtamp

有关微信小程序、h5兼容性问题（1）的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

随机推荐