Vue框架 ，设置浏览器标题栏图标和文字

Posted 2023-03-27

参考技术A 1.找到项目根目录的index.html，如图：

2.进去就能够修改title，也就是在浏览器上方的标题

3.如果需要在标题旁边加入自定义的图标，你需要把自己的的图片放在static目录下（不要放在src目录下，浏览器会找不到）
将图标文件放到static文件夹内，在index.html的head中添加：

保存之后刷新浏览器就生效了。

Android设置状态栏颜色和状态栏文字、图标颜色

参考技术A Android开发中，经常需要实现下图状态栏的效果，类似于沉浸式状态栏，但这里仅仅是讨论设置状态栏的颜色和状态栏上面文字、图标的颜色的方法。

Android 4.4（API 19）之后，就提供了修改状态栏颜色的方法，但是在 Android 6.0（API 23）之后，才支持修改状态栏上面的文字和图标颜色，默认是白色的。所以会导致一个问题，在 4.4 到 6.0 之间的系统，状态栏设置为浅色的话，状态栏上面白色的文字和图标会看不清，像下面这样：

有一些第三方的系统提供了设置状态栏和状态栏文字、图标颜色的方法，比如小米的MIUI和魅族的Flyme，所以考虑了下比较好的实现方式是：

当然，这里面也会有坑，比如 MIUI 提供的修改状态栏字体颜色方法会跟 Android 系统自带的方法冲突，官方说明如下： 关于MIUI状态栏字符颜色逻辑调整说明
经过网上的资料和自己的尝试，MIUI 系统还是同时使用 MIUI 提供的方法和 Android 系统自带的方法来修改状态栏字体颜色比较保险。

基于上面的思考，封装了设置 Android 4.4 以上系统状态栏颜色和状态栏字体、图标颜色的方法：

要在 Application Theme 加上 <item name="android:fitsSystemWindows">true</item> ，不然页面会顶到状态栏上面，或者在 Activity 的布局里面加上 android:fitsSystemWindows="true" 和 android:clipToPadding="false" 也可以。

最终实现的效果如下：

大家有更好的方案可以告诉我~