一、背景
APP 和 H5 端一个很大的不同是，APP端打开后是全屏的，沉浸式的体验，去除了浏览器的一些状态栏、搜索栏之类的
二、方案对比
方式一： webview 的加载将顶部手机的状态时间栏空出来， 根据设置不同页面的背景色去设置
优点： 不需要更改h5的内容，只需要动态调整顶部状态栏颜色
缺点： 需要h5内部切换页面即通知native端更改颜色， 而且h5的很多顶部不是纯色，而是带有背景图的，在端内顶部设置背景图实现起来还是比较繁琐的
方式二： webview 将手机顶部时间状态栏全部占满， 在h5页面内部通过paddingtop的方式将内容往下挤，让顶部状态栏的顶部背景空出一个状态栏的高度
优点： 不需要每次都改端内容
缺点： 根据环境调整h5内的空余距离
实现效果如图：
三、代码实现
3-1、ios 端
Native端
设置webview的x y 全部设置为0， 盛满全部屏幕
self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:config];
H5端
3-2、android 端
Native 端
通过代码设置状态栏，抽离到 utils
StatusBarUtils.kt
import android.app.Activity
import android.graphics.Color
import android.os.Build
import android.view.View
import android.view.WindowManager
class StatusBarUtils {
companion object {
fun setTransparentStatusBar(activity: Activity) {
val window = activity.window
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
window.decorView.systemUiVisibility =
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.statusBarColor = Color.TRANSPARENT
window.decorView.systemUiVisibility =
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR // 设置状态栏文字颜色为黑色
}
}
}
}
页面onCreate时调用
import StatusBarUtils
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
StatusBarUtils.setTransparentStatusBar(this)
}
