ios与安卓兼容问题（持续更新-查看大图、底边距、短信验证码复制粘贴填充问题）

微信小程序image图片为空或者图片报错（例如404,500等）时，点击查看大图，在手机端打开，ios会如下图，一直卡死在该页面，除非手动强制关闭微信，安卓正常。解决方案：用padding-bottom代替margin-bottom或者用设置了高度的div撑开，已求达到相同效果。在编辑器上margin-bottom是可以正常显示的，但是iphone手机上就会失效。事件，监听图片报错，报错时，不给i

花笙_

450人浏览 · 2023-04-28 10:21:35

花笙_ · 2023-04-28 10:21:35 发布

1.微信小程序image图片为空时

出现的bug，微信小程序image图片为空或者图片报错（例如404,500等）时，点击查看大图，在手机端打开，ios会如下图，一直卡死在该页面，除非手动强制关闭微信，安卓正常
解决方案：给image标签加binderror事件，监听图片报错，报错时，不给image添加查看大图功能，或者设置默认图片即可
安卓：
在这里插入图片描述

ios：
在这里插入图片描述

2.ios不支持margin-bottom

在编辑器上margin-bottom是可以正常显示的，但是iphone手机上就会失效
解决方案：用padding-bottom代替margin-bottom或者用设置了高度的div撑开，已求达到相同效果

3.短信验证码复制粘贴填充问题

安卓正常，ios算是苹果系统的一个bug，ios自动填充验证码时，会多次调用UITextFieldTextDidChangeNotification，由于我是在验证码输入完成后调用检验验证码接口的，导致连续多次检验，第一次是正确，后续都是错误（验证码正确后后端那边会自动删除）
解决方案：
在input框中设置最大长度，亲测实用

<van-field
        value="{{ sms }}"
        center
        clearable
        placeholder="请输入短信验证码"
        maxlength="6"    //  重点，必须要
        use-button-slot
        bind:input="bindSms"
      >
        <button slot="button" class="yzm-btn" loading="{{loading}}" bind:tap="getyzm" disabled="{{isdisabled}}" custom-class="yzmSty" plain hairline> {{isTime?times+'s后重新发送':'获取验证码'}}</button>
      </van-field>