一招快速實現自定義快應用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​