One trick to quickly realize custom application titlebar

background

Fast application system comes with titleBar The default is on the left , And it cannot be customized , The requirements encountered by developers in the development process are displayed in the middle of the top , Not on the left . This article aims to help developers realize customization titleBar.

Implementation steps

Customize titleBar The implementation is divided into two steps .

1、manifest.json Set in file as titleBar Property is set to false, Hide the system's own titeBar.  

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

2、 Implement customization titleBar, Use one text Components , And make it display in the center .

<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>

design sketch ：

For more details , See quick apply manifest The file is introduced ：

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