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

最新推荐文章于 2021-03-02 00:14:28 发布
最新推荐文章于 2021-03-02 00:14:28 发布
阅读量6.2k 收藏 4
点赞数
分类专栏： Vue 文章标签： vue2.0 hbuilder 打包app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haeasringnar/article/details/81291005
版权

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

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

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

 "google": {
            "immersedStatusbar": true,
            ......
haeasringnar
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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
沉浸式，状态栏高度，刘海屏怎么开启，怎么适配？看这！
Yxc_Programmer的博客
09-23 1106
何为沉浸式？ 沉浸式就是app的头部和状态栏和何为一体的，webview即为整个手机的高度 何为状态栏？ 状态栏就是手机顶部，显示时间电量那一行 除此还有刘海屏，水滴屏，挖孔屏，全面屏，非刘海屏，不同手机状态栏高度又不太一样，需要我们去适配，有一个段子说，如果看到那个手机适配有问题，赶紧把那个手机藏起来，不要让测试发现了。 我们用HBuilder创建的应用默认是不开启沉浸式的，需要我们手...
android 实现沉浸式状态栏的几种方法
qq_36355271的博客
06-13 487
效果图： 方法一，通过创建工具类 计算你自己的tabbar实现 activity 使用方法： @BindView(R.id.lin_top) LinearLayout linTop; ImmersedStatusbarUtils.initAfterSetContentView(this, linTop); 工具栏ImmersedStatusbarUtils： pac...
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
12-12
使用 Hbuilder新建好移动app项目后，mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
vue-cli或vue项目利用HBuilder打包成移动端app操作
10-15
Vue CLI或Vue项目利用HBuilder打包成移动端App的操作流程涵盖了多个关键步骤，这些步骤对于将Web应用程序转换为可在移动设备上运行的应用程序至关重要。以下是详细的知识点解释： 1. **测试项目**： 在开始打包...
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
10-14
主要介绍了浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
初试vue-cli使用HBuilderx打包app的坑
10-16
主要介绍了初试vue-cli使用HBuilderx打包app的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
android 最简单实现沉浸式状态栏
超神冉
03-26 1345
这个绝对是史上最简单最成功的沉浸式状态栏的实现方法。
wap2app（二）-- 设置APP系统状态栏
whyrookie的博客
10-28 1438
准备 工具：HBuilder 一、全屏设置，不显示系统状态栏 这里所说的系统状态栏就是包括了：信号、运营商、电量等信息手机屏幕最顶部信息。 全屏并非状态栏透明或变色，而是没有状态栏，也就是看不见电量、信号那条了，部分项目需要这样的场景。 全屏设置方法： 　　新建一个wap2app项目并完成各项配置后，打开manifest.json --> 基础配置 ，找到如下图选择框 勾选此选项，真机运行后在手机上显示如下图： 标题之上没有显示状态栏。 二、显示系统状态栏，并自定义系统状态栏的背景色和...
uniapp之导航栏设置和沉浸式的解决方法
qq_43537814的博客
03-02 5925
加粗样式使用uniapp无论是开发App还是微信小程序，都避免不了设置导航栏；自定义导航栏会产生一个沉浸式，下面就是设置导航栏和解决沉浸式的方法 设置系统原生导航栏： //在pages.json中 "app-plus": { "scrollIndicator": "none", //隐藏滚动条 "titleNView": { // 搜索框配置 "searchInput": { "align": "center", "backgrou
HBuilder 设置沉浸式状态栏显示效果
一码
12-04 4122
1.在manifest.json 要设置 "fullscreen": false； 2.在 manifest.json 设置 "plus": { "launchwebview": { "statusbar": { "background": "#00933c" } },
HBuilder 设置沉浸式状态栏显示效果
u012542541的博客
09-17 6145
1.在manifest.json 要设置 "fullscreen": false； 2.在 manifest.json 设置 "plus": { "launchwebview": { "statusbar": { "background": "#00933c" }
mui 沉浸式状态栏详解
曉儂
11-14 7994
改写manifest.xml，在plus对象内增加："statusbar": { "immersed": "supportedDevice", "style":"dark" }加上h.min.js h.min.js下载地址 http://www.hcoder.net/h加在mui.min js之后mui.plusReady(function(){ //判断是否支持沉浸式 v
HBuilder修改statusbar样式
championf的博客
12-01 6142
在HBuilder项目中如何修改状态栏样式如果你初次接触HBuilder会遇到修改状态栏颜色的问题，那么这篇文章就可能帮到你，那么不BB，上车吧~ 设置背景图片 body{ background-image: url(img/background.png); background-repeat: no-repeat;
三步搞定：Vue.js调用Android原生方法
热门推荐
BennyShi1998的博客
02-28 2万+
第一步： Android对Js的接口，新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support.annotation.RequiresAp...
hbuilder 沉浸式状态栏
Lycoris_Red的博客
07-16 1127
1.在mainfest.json的plus中以下位置添加statusbar内容 "plus": { "statusbar":{ "immersed": true/*沉浸式状态栏*/ } } 2、获取状态栏高度 方法一： var immersed = 0; var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent); if(ms&&ms.lengt
Vue - 实现消息通知组件及插件
CSU_Zipple的博客
01-14 1万+
效果图 功能分解 动画 计算高度 组件源码 <template> <div class="ys-message-wrapper animated fadeInDown"> <div class="ys-message-toast"> <img :src="currentType" alt="&quot
vue项目使用Hbuilder打包成app，详细步骤
最新发布
06-07
下面是使用 Hbuilder 将 Vue 项目打包成 app 的详细步骤： 1. 安装 Hbuilder 首先需要安装 Hbuilder，可以从官网下载并安装。 2. 创建 Vue 项目 使用 Vue CLI 创建一个新的 Vue 项目。在终端中运行以下命令： ``` vue create myapp ``` 其中，“myapp”是项目名称。 3. 构建 Vue 项目 在 Vue 项目的根目录中运行以下命令，构建项目： ``` npm run build ``` 这将生成一个“dist”目录，其中包含构建后的 Vue 应用程序的文件。 4. 导入项目 在 Hbuilder 中创建一个新项目。选择“新建项目”->“HTML5+移动应用”，然后选择“导入已有的 HTML5+工程”。 在“导入工程”对话框中，选择“选择本地目录”，然后选择 Vue 项目的“dist”目录。 5. 配置应用程序 在 Hbuilder 中，打开“manifest.json”文件，配置应用程序的名称、ID、版本号等信息。 6. 添加插件 要访问设备功能和硬件，需要通过 Hbuilder 插件来实现。可以使用插件管理器来查找和安装需要的插件。 例如，要在应用程序中使用相机，可以执行以下步骤： - 打开“插件管理器”。 - 选择“搜索”选项卡。 - 搜索“camera”。 - 选择“安装”按钮。 这将安装相机插件。 7. 构建应用程序 在 Hbuilder 中，选择“运行”->“运行到手机或模拟器”，然后选择要运行应用程序的设备。 Hbuilder 将使用已安装的插件和配置文件构建应用程序，并将其安装到设备上。 这是使用 Hbuilder 将 Vue 项目打包成 app 的基本步骤。可以使用类似的步骤将其打包为 iOS 应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

haeasringnar

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值