一招快速实现自定义快应用 titlebar

背景

快应用中系统自带的 titleBar 是默认在左边的，且是无法进行自定义的，开发者在开发过程中遇到的需求是显示在顶部的正中间，而不是左边。本文旨在帮助开发者实现自定义 titleBar。

实现步骤

自定义 titleBar 实现分为两步。

1、manifest.json 文件里设为 titleBar 属性设置为 false，隐藏系统自带的 titeBar。

"display": {
    "titleBar": false,
    "pages": {
      "Hello": {
        "statusBarBackgroundColor": "#0faeff"
      }
    }
  }

2、实现自定义 titleBar，使用一个 text 组件，并使其居中显示即可。

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text class="txt">titlebar</text>
    <div class="label">
      <text style="font-size: 60px">this is test page</text>
    </div>
  </div>
</template>
<style>
  .container {
    flex-direction: column;
    align-items: center;
  }
  .txt {
    font-size: 60px;
    color: #00ced1;
    margin-top: 15px;
  }
  .label {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
</style>
<script>
  module.exports = {
    data: {
      status: 1
    },
    onInit() {
    },
    onShow(options) {
      '// Do something when show.'
    },
  }
</script>

效果图：

欲了解更多详情，请参见快应用manifest文件介绍：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-develop-deeplink