使用hbuilder打包vue成安卓安装包时设置状态栏沉浸

最新推荐文章于 2024-04-17 15:26:20 发布

原创最新推荐文章于 2024-04-17 15:26:20 发布 · 6.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue2.0 #hbuilder #打包app

Vue 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何通过调整manifest.json文件中的两个关键位置来优化应用配置，包括状态栏沉浸式设置及Google选项的调整。通过遵循提供的代码描述，开发者可以轻松实现应用的打包与发布。

主要配置manifest.json里面的两个位置即可
注意在配置的时候要选择代码视图进行配置，配置好了打包发布就可以了！
详情看图
1、
这里写图片描述
2、

下面是代码描述：
修改1：在plus下面添加如下代码

"plus": {
        "statusbar": {
            "immersed": true // 这个是将状态栏设置成 沉浸
        },
        ......

修改2：在plus下面的google选项里面添加如下代码

 "google": {
            "immersedStatusbar": true,
            ......

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

haeasringnar

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

使用Hbuilder打包vue项目成apk（android）

ziyanCarol的博客

03-18

1671

首先，运行npm run build将vue项目进行打包，完成之后会生成dist文件，我接手的项目不知道怎么配置的，打包之后生成的是www文件夹，不过都是一样的。打开Hbuilder，右键“打开目录”，选择www文件夹，点击确定，就将文件导入了Hbuilder，然后点击文件右键，选择“点击转换成移动APP”，文件开头的小图标会从W变成A，同时文件夹下会生成manifest.json文件，代表转换...

vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

10-17

主要介绍了vue项目使用Hbuilder打包app 设置沉浸式状态栏的方法，本文通过实例代码效果图展示给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

2 条评论您还未登录，请先登录后发表或查看评论

ImmersedStatusBar:Android沉浸式状态栏兼容方案

05-11

Android沉浸式状态栏兼容方案用途重点针对浅色状态栏的适配, 即白底黑字, 具体应用可参见微博兼容方案对于支持[状态栏透明 + 状态栏文字图标黑白切换]的机型(Android 6.0及以上, MIUI v6及以上, Flyme 4.0及以上), 全透明状态栏 + 黑色文字图标对于仅支持[状态栏透明]的机型(Android 4.4及其以上), 采用: 半透明状态栏 + 白色文字图标对于不支持的机型(Android 4.4以下), 采用默认状态: 黑色状态栏 + 白色文字图标效果展示 1. 对于情况1的显示效果 2. 对于情况2的显示效果 Android 5.x Android 4.4显示效果 3. 对于情况3的显示效果略 .. 使用见Demo

HBuilder打包动态沉浸式状态栏无效，没有效果

付楚

12-03

1682

wap2app（二）-- 设置APP系统状态栏

whyrookie的博客

10-28

1816

准备工具：HBuilder 一、全屏设置，不显示系统状态栏 这里所说的系统状态栏就是包括了：信号、运营商、电量等信息手机屏幕最顶部信息。全屏并非状态栏透明或变色，而是没有状态栏，也就是看不见电量、信号那条了，部分项目需要这样的场景。全屏设置方法：　　新建一个wap2app项目并完成各项配置后，打开manifest.json --> 基础配置，找到如下图选择框勾选此选项，真机运行后在手机上显示如下图：标题之上没有显示状态栏。二、显示系统状态栏，并自定义系统状态栏的背景色和...

hbuilderX 打包app设置沉浸式状态栏

wotam的博客

05-20

1022

在plus中加入 "statusbar" : { "immersed" : true /*沉浸式状态栏*/ },

沉浸式，状态栏高度，刘海屏怎么开启，怎么适配？看这！

Yxc_Programmer的博客

09-23

1232

何为沉浸式？沉浸式就是app的头部和状态栏和何为一体的，webview即为整个手机的高度何为状态栏？ 状态栏就是手机顶部，显示时间电量那一行除此还有刘海屏，水滴屏，挖孔屏，全面屏，非刘海屏，不同手机状态栏高度又不太一样，需要我们去适配，有一个段子说，如果看到那个手机适配有问题，赶紧把那个手机藏起来，不要让测试发现了。我们用HBuilder创建的应用默认是不开启沉浸式的，需要我们手...

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

10-14

在利用Hbuilder打包Vue项目为APP的过程中，会遇到一系列技术细节和问题，本文档将全面解析打包流程以及遇到的坑点，旨在为开发者提供参考和解决方案。首先，在Hbuilder中打包Vue项目成为APP，需要遵循特定的流程：...

vue-cli或vue项目利用HBuilder打包成移动端app操作

10-15

Vue CLI或Vue项目利用HBuilder打包成移动端App的操作流程涵盖了多个关键步骤，这些步骤对于将Web应用程序转换为可在移动设备上运行的应用程序至关重要。以下是详细的知识点解释： 1. **测试项目**：在开始打包...

android 实现沉浸式状态栏的几种方法

qq_36355271的博客

06-13

561

效果图：方法一，通过创建工具类计算你自己的tabbar实现 activity 使用方法： @BindView(R.id.lin_top) LinearLayout linTop; ImmersedStatusbarUtils.initAfterSetContentView(this, linTop); 工具栏ImmersedStatusbarUtils： pac...

android 最简单实现沉浸式状态栏

超神冉

03-26

1416

这个绝对是史上最简单最成功的沉浸式状态栏的实现方法。

uniapp开发App，手机顶部状态栏问题

最新发布

于忠会的博客

04-17

1607

打开应用的manifest.json文件，打开源码视图，app-plus 下添加 statusbar >immersed节点并设置值为false。方法1：可以使用uniapp官方文档提供的解决方案 https://uniapp.dcloud.io/collocation/pages?问题：在使用uniapp开发手机App时，因为HBuildX创建的应用默认是沉浸式样式，如果去除自带的导航栏之后，页面会直通手机顶部状态栏，解决办法有一下几个。

hbuilderx设置状态栏

菜菜鸟的博客

11-02

8173

一、前言 状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。图例：二、状态栏状态类型默认变色（设置颜色）透明（沉浸式）消失（全屏）三、状态栏变色 1.效果如图： 2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色） 3.设置标题栏...

app状态栏样式修改

baisheng77的博客

02-04

253

app端顶部状态栏修改样式

h5沉浸式状态栏

weixin_52563089的博客

12-02

974

在配置文件manifest.json的“plus”中加代码 "plus":{ "statusbar": { "immersed": true }, }

uniapp之导航栏设置和沉浸式的解决方法

qq_43537814的博客

03-02

6595

加粗样式使用uniapp无论是开发App还是微信小程序，都避免不了设置导航栏；自定义导航栏会产生一个沉浸式，下面就是设置导航栏和解决沉浸式的方法设置系统原生导航栏： //在pages.json中 "app-plus": { "scrollIndicator": "none", //隐藏滚动条 "titleNView": { // 搜索框配置 "searchInput": { "align": "center", "backgrou

uniapp navigationStyle: custom 取消默认原生导航栏导致页面顶部进入状态栏区域问题

tengyuxin的博客

09-15

4147

关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。

uniapp 解决去除导航栏后，状态栏沉浸式的问题

u010613970的博客

01-28

4426

项目中如果要去掉导航栏的话，状态栏就会自动开启沉浸式，这时候就需要解决这个状态栏的问题，目前找到以下两个方法解决： 1、最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。 "app-plus" : { "statusbar": { "immersed": false }, } 2、其次可通过顶部