useTopBarText

动态设置置顶栏文字内容。只有当前小程序被置顶时能生效，如果当前小程序没有被置顶，也能调用成功，但是不会立即生效，只有在用户将这个小程序置顶后才换上设置的文字内容(注意: 基础库 1.9.9 之后已不维护).

调用成功后，需间隔 5s 才能再次调用此接口，如果在 5s 内再次调用此接口，会回调 fail

何时使用

需要动态设置置顶信息时

API

const set = useTopBarText(text?: string)

参数说明

参数	说明	类型	默认值
text	置顶栏文字	string	-

返回值说明

返回值	说明	类型
set	设置置顶栏文字内容	(topBarText: string) => Promise<General.CallbackResult>

代码演示

React

wechat/useTopBarText/index

import React from 'react';
import { useTopBarText, useModal } from 'taro-hooks';
import Mock from 'mockjs';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const set = useTopBarText('taro-hooks');
  const show = useModal({ mask: true, title: '设置结果', showCancel: false });

  const handleClick = async () => {
    let content = '';
    try {
      const { errMsg } = await set(Mock.Random.name());
      content = errMsg;
    } catch (e) {
      content = e.errMsg || e.message;
    }
    show({ content });
  };

  return (
    <DemoContent>
      <Button block color="primary" onClick={handleClick} shape="square">
        设置置顶栏文字内容
      </Button>
    </DemoContent>
  );
};

Vue

wechat/useTopBarText/index

<template>
  <demo-content>
    <nut-button shape="square" type="primary" block @click="handleClick()"
      >设置置顶栏文字内容</nut-button
    >
  </demo-content>
</template>

<script setup lang="ts">
import { useTopBarText, useModal } from 'taro-hooks';
import Mock from 'mockjs';

const set = useTopBarText('taro-hooks');
const show = useModal({ mask: true, title: '设置结果', showCancel: false });

const handleClick = async () => {
  let content = '';
  try {
    const { errMsg } = await set(Mock.Random.name());
    content = errMsg;
  } catch (e) {
    content = e.errMsg || e.message;
  }
  show({ content });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️