vue 打包app 电池上方怎么跟着主题一样变色

闷声发大财..

已于 2022-04-29 20:12:49 修改

阅读量1.4k

点赞数

文章标签： vue.js html5 css3 javascript css

于 2022-04-27 18:13:00 首次发布

本文链接：https://blog.csdn.net/qq_32825399/article/details/124456959

版权

请添加图片描述

本人是用 vue+vant 的框架进行完成的

未设置前是这个样子，灰色或白色的状态栏，相信大家都遇到过

这里注意：

打包成apk的需要用到HBuilder X这个编辑器，如果vue打包好后是用安卓打包的需要找安卓的设置方法这个文章只适合于HBuilder X打包后的

开始正文:
HBuilder X创建文件后文件里面会有个 manifest.json这个文件是用来一些基本配置的打开源码视图

在这里插入图片描述

找到以下plus配置

添加以下代码添加好后重新打包就行了

"statusbar" : {
   "immersed" : true
 },

在这里插入图片描述

不过这里还会遇到问题

请添加图片描述

原本设置好的标题栏会发现往上移动了这个时候需要自己用css来调了

更改app状态栏

 plus.navigator.setStatusBarBackground('#ffffff');   //设置状态栏颜色
 plus.navigator.setStatusBarStyle('dark');//设置状态字体颜色

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

闷声发大财..

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue 项目利用 HBuilderX 打包 APP 流程

前端知识分享喵

05-12

6777

想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。

vue支付项目-APP微信支付功能

总结前端开发中遇到的问题，分享前端知识

10-21

5989

商户APP调用微信提供的SDK调用微信支付模块，商户APP会跳转到微信中完成支付，支付完后跳回到商户APP内，最后展示支付结果。CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。），验证通过打开选择支付方式弹窗页面，选择微信支付或者支付宝支付；4.可取消支付，放弃支付会返回会员页面，页面提示支付取消；2.判断支付方式，如果是1，则是微信支付方式。1.判断是否在微信内支付，需要在微信外支付。

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

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

12-12

使用 Hbuilder新建好移动app项目后，mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果总结以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！

vue 封装组件之顶部导航栏随着页面滚动变化颜色

qq_43477721的博客

08-27

3342

NavigationBar.vue <template> <div class="nav-bar z-index-max" :class="{'bottom-line': pageName}" :style="navBarStyle" > <div class="left"> <img v-if="isShowBack" src="@img/back.svg" alt=""> <slot n

ios如何更改顶部状态栏的颜色

zps007的专栏

05-13

1813

IOS7默认顶部状态栏为深色，但是如果app的整体风格为深色。

vue app状态栏颜色

donghuzi1

02-21

1397

if(window.plus){ plus.navigator.setStatusBarBackground('#0344fb'); }

vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换

qq_40936424的博客

03-26

6098

layout-------------模板包含菜单栏等主要框架 router--------------路由管理,根据路由可生成左侧菜单栏 /** When your routing table is too long, you can split it into small modules**/ import Layout from '@/layout' var search = [ {...

vue项目打包成app

zhangxiaodui的博客

07-12

7130

1.将vue项目打包生成dist文件夹 2.下载HbuilderX的APP开发版并且登录 3.在HbuilderX里点击文件>新建>项目，选择5+APP，填写项目名称和存储位置，模板选择空项目。点击创建即可。 4.将HbuilderX里新建项目里的js、css、image文件夹以及index.html删掉。打包的dist的文件夹里的static文件夹和index.html复制粘贴进去。 5.打开manifest.json文件配置几个核心项。选择基础配置，将应用名称填写上，应用标识（APPID）

vue项目打包成安卓app步骤（Hbuilder打包）

boy火巨的博客

07-18

2566

1.首先保证vue项目正常的，再用自带的打包程序运行npm run build 打包完成后代码在根目录dist 文件夹内， 2.然后在Hbuilder中打开这个dist文件夹，这时，这个项目是web应用的项目需要把它转成app应用的项目，鼠标右键转换成移动app，dist的图标会由 W 变成 A 3.打开dist目录下的index.html，格式化一下代码在每个有...

使用cordova将Vue项目打包成app完整详细流程

m0_46694056的博客

11-08

4011

环境搭建与配置一、下载jdk并配置下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 往下滑，找到你自己电脑合适的系统，我的是64位的，如下下好之后注意自己的安装目录就行，正常操作即可完成安装。 *配置jdk 1.打开环境变量，点击新建然后输入JAVA_HOME和你刚才安装的jdk的安装目录，随后点击确定。 2.双击path之后，新建两个环境变量：%JAVA_HOME%\jre\bin

HbuilderX打包的vue项目，状态栏问题

sywdebug的博客

08-11

1016

场景：老总让做的那个 APP，页面改来改去，最后做完了，状态栏需要沉浸背景，状态栏文字颜色也要改上集说到解决 HbuilderX 打包的 vue 项目，物理返回键问题，当时装了 mui 框架，这个也需要，安装方法可以看之前那个有写，

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

Unknowncheats的博客

10-28

790

使用 Hbuilder新建好移动app项目后，mainfest.json这个文件里的 plus里设置statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的...

uniapp自定义顶部状态栏