h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新

iOS时间NaN的问题

iOS上的WebView的问题，iOS的Date不识别 “-”，解决思路就是 在 new Date(sz)之前，将字符串所有的“-”替换为”/"
但也有不少情况是不识别 “/”，所以最好的解决办法还是

• 后端直接返回可展示得信息前端不处理
• 需要时间判断的地方后端直接返回结果

修改微信字体大小后 布局异常

body {
   
  -webkit-text-size-adjust: 100% !important;/* IOS禁止微信调整字体大小 */
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

     <script>
      (function() {
   // 安卓强制禁止用户修改微信客户端的字体大小  可以写在index.html文件下
        if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
   
          handleFontSize();
        } else {
   
          if (document.addEventListener) {
   
            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
          } else if (document.attachEvent) {
   
                    document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
                }
        }
        function handleFontSize() {
   
          // 设置网页字体为默认大小
          WeixinJSBridge.invoke('setFontSizeCallback', {
    'fontSize' : 0 });
          // 重写设置网页字体大小的事件
          WeixinJSBridge.on('menu:setfont', function() {
   
            WeixinJSBridge.invoke('setFontSizeCallback', {
    'fontSize' : 0 });
          });
        }
      })();
    </script>

安卓、IOS拉起本地APP并跳转特定页

• 基础原理

• 微信外唤起：
  用常规方式：通用的Scheme和IOS自己的Universal Links。都支持自定义参数。

  • IOS：Universal Links
    一对一，不需要用户手动确认。
    https://www.xxxx.com/xxx公司的Universal Links服务器地址 供IOS系统访问 重定向页面做转发
    https://www.xxxx.com/apple-app-site-association可以下载JSON配置文件，系统会通过规则匹配后，跳转APP
  • 安卓：
    一对多，需要用户手动确认。
    直接自定义URL Scheme唤起APP，例如alipays://唤起支付宝APP

• 微信内唤起：

  • 1. 由于微信禁止了通用的Scheme和IOS自己的Universal Links方式唤起APP，所以需要其他方式。
  • 2. 可以提示用户在外部浏览器打开页面后 利用schema唤起应用
  • 3. 直接接入微信OpenSDK。
       注册认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。
  • 4. 第三方代理微信
       友盟【ULink】【https://developer.umeng.com/docs/191212/detail/193297】
       应用宝【https://a.app.qq.com/o/simple.jsp】

IOS在APP内部网页跳转回到上一页时 为什么上一页没有被销毁而是被暂停 安卓却需要重新加载

在 iOS 和 Android 中，应用内嵌入的网页（通常通过 WKWebView 在 iOS 上和 WebView 在 Android 上实现）的行为有所不同，这主要是由于两个平台对 Web 视图的生命周期管理和内存管理策略不同。

iOS (WKWebView)
在 iOS 中，WKWebView 采用了一种更高效的内存管理机制。当用户从一个页面跳转到另一个页面时，WKWebView 并不会立即销毁前一个页面，而是将其暂停并保留在内存中。这种做法有几个优点：

性能优化：如果用户返回到前一个页面，该页面可以快速恢复，而不需要重新加载，从而提高了用户体验。
资源重用：保留前一个页面的状态和资源可以减少内存的频繁分配和释放，提高系统的整体性能。
状态保持：用户在前一个页面上的所有状态（如表单填写、滚动位置等）都可以被保留，提供了更好的连续性体验。
Android (WebView)
在 Android 中，WebView 的行为略有不同。默认情况下，当用户从一个页面跳转到另一个页面时，前一个页面会被销毁，并且当用户返回时需要重新加载。这是因为：

内存限制：Android 设备可能有不同的内存限制，尤其是在低端设备上。为了防止内存溢出，系统可能会选择销毁不再显示的页面。
进程管理：Android 系统对进程的管理更为严格，可能会根据内存压力和其他因素决定何时销毁或暂停进程。
默认配置：WebView 默认配置下，每个页面都是独立的，没有像 WKWebView 那样的内置缓存机制来保存页面状态。

当 iOS 设备呼出软键盘后,页面会自动滚动以确保输入框可见,导致浏览器可以上下拉动 导致页面效果不一致

window.addEventListener('keyboardWillShow',function(e){
   e.preventDefault();}); 
window.addEventListener('keyboardWillHide',function(e){
   e.preventDefault();}); 

IOS设备隐藏滚动条

    
::-webkit-scrollbar {
   
    width: 0px; /*滚动条宽度*/
    height: 0px; /*滚动条高度*/
    display: none;
}

-webkit-overflow-scrolling: touch;//这是 iOS 设备上模拟原生滚动效果的一个属性。添加这个属性可以让滚动条完全隐藏:


document.body.style.overflow = 'hidden'; // 隐藏滚动条  或指定元素

软键盘弹出时，在Android系统下，H5所在容器（即WebView）高度会被压缩

onMounted(async () => {
       
    window.addEventListener('resize', resizeReview);   
}

function resizeReview() {