useApp

获取当前程序的唯一实例以及全局数据

何时使用

当需要获取程序实例或操作全局数据时

API

const {
  app,
  globalData,
  setGlobalData
} = useApp<T, R>(allowDefault?: boolean)

参数

参数	说明	类型	默认值
allowDefault	在 App 未定义时返回默认实现。当 App 被调用时，默认实现中定义的属性会被覆盖合并到 App 中。一般用于独立分包	boolean	-

返回值说明

返回值	说明	类型
app	小程序全局唯一 APP 实例	Instance<T>
globalData	全局数据(须在 app.ts 中定义)	GlobalData<R>
setGlobalData	动态修改全局数据	(key: keyof R, value: R[keyof R]) => Promise<TaroGeneral.CallbackResult>

代码演示

React

basic/useApp/index

import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Cell } from '@taroify/core';
import { useApp, useModal } from 'taro-hooks';
import { useEffect } from '@taro-hooks/core';

import Mock from 'mockjs';

type GlobalData = Record<'framework' | 'package' | 'basic', string>;

export default () => {
  const { app, globalData, setGlobalData } = useApp<GlobalData>(true);
  const show = useModal({
    title: '设置全局变量',
    content: '您是否要随机修改当前全局变量',
  });

  useEffect(() => {
    const { window, pages } = app?.config ?? {};
    show({
      title: 'APP',
      content: '当前获取实例(${
        window?.navigationBarTitleText ?? ''
      }): 页面个数(${pages?.length ?? 0})',
    });
  }, []);

  const handleClick = (key: keyof GlobalData) => {
    show().then(({ confirm }) => {
      if (confirm) {
        setGlobalData(key, Mock.Random.name());
      }
    });
  };

  return (
    <DemoContent>
      <Cell.Group clickable>
        {Object.entries(globalData).map(([key, value]) => (
          <Cell
            key={key}
            title={key}
            brief={JSON.stringify(value)}
            onClick={() => handleClick(key as keyof GlobalData)}
          ></Cell>
        ))}
      </Cell.Group>
    </DemoContent>
  );
};

Vue

basic/useApp/index

<template>
  <demo-content>
    <nut-cell
      v-for="(value, key) in globalData"
      :key="key"
      :title="key"
      :sub-title="$filters.stringify(value)"
      @click="handleClick(key)"
    ></nut-cell>
  </demo-content>
</template>

<script setup lang="ts">
import { useApp, useModal } from 'taro-hooks';
import { useEffect } from '@taro-hooks/core';
import Mock from 'mockjs';

type GlobalData = Record<'framework' | 'package' | 'basic', string>;

const { app, globalData, setGlobalData } = useApp<GlobalData>(true);
const show = useModal({
  title: '设置全局变量',
  content: '您是否要随机修改当前全局变量',
  mask: true,
});

useEffect(() => {
  const { window, pages } = app?.config ?? {};
  show({
    title: 'APP',
    content: '当前获取实例(${window?.navigationBarTitleText ?? ''}): 页面个数(${
      pages?.length ?? 0
    })',
  });
}, []);

const handleClick = (key: keyof GlobalData) => {
  show().then(({ confirm }) => {
    if (confirm) {
      setGlobalData(key, Mock.Random.name());
    }
  });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️

FAQ

1. 部分字段不可以设置. 会导致无法获取到值. 请注意以下保护字段

   ['config', 'onHide', 'onLaunch', 'onShow'];