useEnv

获取当前环境值

何时使用

当需要获取当前环境值做一些判断时

API

const env: ENV_TYPE = useEnv();

返回值说明

返回值	说明	类型
env	当前环境值	ENV_TYPE

代码演示

React

environment/useEnv/index

import React from 'react';
import { ENV_TYPE, showToast } from '@tarojs/taro';
import { useEffect } from '@taro-hooks/core';

import DemoContent from '@src/components/DemoContent';
import { Radio, Cell } from '@taroify/core';

export default () => {
  const env = useEnv();

  useEffect(() => {
    showToast({
      title: '当前环境: ${env}',
      icon: 'none',
      mask: true,
    });
  }, []);

  return (
    <DemoContent>
      <Radio.Group value={env}>
        <Cell.Group clickable>
          {Object.entries(ENV_TYPE).map(([key, value]) => (
            <Cell key={key} title={'环境值: ' + value}>
              <Radio disabled={value !== env} name={value} />
            </Cell>
          ))}
        </Cell.Group>
      </Radio.Group>
    </DemoContent>
  );
};

Vue

environment/useEnv/index

<template>
  <demo-content>
    <nut-radiogroup v-model="env">
      <nut-radio
        v-for="(value, key) in ENV_TYPE"
        :key="key"
        :disabled="value !== env"
        :label="value"
        shape="button"
        >环境值: {{ value }}</nut-radio
      >
    </nut-radiogroup>
  </demo-content>
</template>

<script setup lang="ts">
import { ENV_TYPE, showToast } from '@tarojs/taro';
import { useEffect } from '@taro-hooks/core';
import { useEnv } from 'taro-hooks';

const env = useEnv();

useEffect(() => {
  showToast({
    title: '当前环境: ${env}',
    icon: 'none',
    mask: true,
  });
}, []);
</script>

Hook 支持度

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