Uni-App中动态设置头部颜色及字体

Uni-App是一个支持使用Vue.js开发跨平台应用的框架，它可以一次编写代码，同时在多个平台上运行。在Uni-App中，我们可以通过动态设置头部颜色及字体来定制应用的标题栏样式。下面将详细介绍如何实现这一功能。

1. 动态设置头部颜色

Uni-App提供了一个名为setNavigationBarColor的API来实现动态设置头部颜色。这个API接受一个配置对象作为参数，其中包含了要设置的颜色值。

例如，我们可以使用以下代码来将头部颜色设置为蓝色：

uni.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#007bff',
  success: function () {
    console.log('头部颜色设置成功');
  },
  fail: function (err) {
    console.log('头部颜色设置失败', err);
  }
});

在上述代码中，frontColor是前景色，即标题栏文字的颜色；backgroundColor是背景色，即标题栏的颜色。设置成功后，会执行success回调函数，失败则执行fail回调函数。

2. 动态设置头部字体

Uni-App允许我们通过设置全局样式来动态改变应用中的字体。我们可以在App.vue文件中使用标签定义全局样式，并使用@import引入外部字体。

例如，我们可以在App.vue的标签中添加以下代码来设置全局字体：

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

在上述代码中，我们使用了Google Fonts提供的Open Sans字体。

然后，在需要的页面中，我们可以使用font-family属性来应用全局字体。例如：

.page-title {
  font-family: 'Open Sans', sans-serif;
}

在上述代码中，我们将Open Sans字体应用于.page-title类。

3. 示例

下面是一个完整的Uni-App页面的例子，演示了如何动态设置头部颜色及字体：

<template>
  <view class="container">
    <view class="header" style="background-color:{{backgroundColor}};color:{{frontColor}}">
      <text class="page-title">设置标题栏样式</text>
    </view>
    <view class="content">
      <button @click="changeColor">改变颜色</button>
      <button @click="changeFont">改变字体</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      backgroundColor: '#007bff',
      frontColor: '#ffffff'
    };
  },
  methods: {
    changeColor() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#ff0000',
        success: function () {
          console.log('头部颜色设置成功');
        },
        fail: function (err) {
          console.log('头部颜色设置失败', err);
        }
      });
    },
    changeFont() {
      this.frontColor = '#007bff';
    }
  }
};
</script>

<style>
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
}

.content {
  margin-top: 20px;
}

button {
  margin-bottom: 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
}
</style>

在这个例子中，我们使用了一个容器视图（.container）来包裹页面内容。头部样式使用了一个固定高度的视图（.header），并设置了标题栏文字的颜色（frontColor）和背景色（backgroundColor）。页面内容位于容器视图的下方，包含两个按钮，分别用于改变颜色和字体。

通过点击这两个按钮，我们可以动态改变头部颜色和字体。点击"改变颜色"按钮后，将调用设置头部颜色的API，并将文字颜色设置为白色，背景色设置为红色。点击"改变字体"按钮后，将直接改变字体颜色为蓝色。

这是一个简单的示例，展示了如何在Uni-App中动态设置头部颜色及字体。根据实际需求，你可以进一步定制化这些功能，以满足你的应用需求。

希望这篇文章对你有所帮助！如有任何问题或建议，请随时留言。