记录H5和小程序遇到的兼容问题

原创已于 2024-06-06 13:18:07 修改 · 630 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript

于 2023-04-23 10:22:01 首次发布

文章介绍了如何处理H5在微信公众号和钉钉微应用中的关闭浏览器问题，以及适配iPhone底部安全区的解决方案。对于关闭浏览器，提供了针对不同平台的代码实现。对于适配安全区，H5中通过设置viewport和使用CSS的@supports规则，而小程序则在app.js和页面中计算并应用底部偏移量。

关于H5和小程序遇到的兼容问题

关闭浏览器（记录2024-06-06）

问题

H5页面关闭浏览器（同时支持微信公众号H5和钉钉H5微应用）
（业务环境：在工厂注册成功之后需要等待审核，因此直接关闭当前页面）

解决

完整的方法，兼容微信内置浏览器和钉钉微应用H5

if (this.dd.env.platform !== 'notInDingTalk') {
    // 判断是否处于钉钉环境
    if (this.dd.env.platform == 'pc') {
        // PC端
        this.dd.quitPage({
	        success: () => { },
	        fail: () => { },
	        complete: () => { },
        });
    } else if (this.dd.env.platform == 'android' || this.dd.env.platform == 'ios') {
        // android 和 ios 环境
        this.dd.closePage({
	        success: () => { },
	        fail: () => { },
	        complete: () => { },
        });
    }
    } else {
    // 非钉钉环境 默认微信环境
    this.wx.closeWindow();
}

适配 iphone 底部安全区（记录2022-07-01）

问题

原设计图实现底部tabbar（以iphone 6/7/8实现效果为例）

然而面对iphone X底部多出来的安全区出现以下情况
在这里插入图片描述
实际我们要实现的效果应该是

解决

如果是H5

对index.html文件设置<meta name=“viewport” … />

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />

在对应页面设置样式进行覆盖

// safe-area-inset-bottom: iphone安全区域距离底部边界距离
// @supports 判断浏览器是否支持 bottom: env(safe-area-inset-bottom）或者 bottom: constant(safe-area-inset-bottom) 支持的话执行下面的样式 
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

如果原样式存在padding-bottom属性的设置，需加上。举个例子：

.footer{
    padding-bottom: 10px;
}
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: calc(10px + constant(safe-area-inset-bottom));
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

如果是微信小程序

在app.js的onLaunch中计算

onLaunch: function () {
    wx.getSystemInfo({
        success: res => {
            this.globalData.bottomOffset = res.screenHeight - res.safeArea.bottom;
        }
    })
},

在需要进行底部兼容的页面进行使用

// index.js
let app = getApp()
Page({
    data: {
        bottomOffset : app.globalData.bottomOffset ,
    },
})
// index.wxml
<view class="bottomButton" catchtap="submit" style="padding-bottom: {{bottomOffset }}px;">确定</view>