Wot Starter

https://starter.wot-ui.cn/guide/
Admin
Wot Starter is a starter template for building cross-platform applications with Uni framework,...
Tokens:20,404
Snippets:115
Trust Score:4.4
Update:11 months ago
Show doc for...
Tokens:
Raw
### Create Project with pnpm

Source: https://starter.wot-ui.cn/guide/installation

Initializes a new uni-app project using the Wot Starter template with pnpm. Requires Node.js and pnpm to be installed.

```bash
pnpm create uni <project-name> -t wot-starter
```

--------------------------------

### Create Project with npx giget

Source: https://starter.wot-ui.cn/guide/installation

Initializes a new uni-app project using the Wot Starter template with npx and giget. Requires Node.js and npx to be installed. This command fetches the project from GitHub.

```bash
pnpx giget gh:wot-ui/wot-starter <project-name>
```

--------------------------------

### Start Development Server with npm

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server in h5 mode using npm. This command compiles the project and provides a local server for development.

```bash
npm dev
```

--------------------------------

### Start Development Server with bun

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server in h5 mode using bun. This command compiles the project and provides a local server for development.

```bash
bun dev
```

--------------------------------

### Create Project with npx degit

Source: https://starter.wot-ui.cn/guide/installation

Initializes a new uni-app project using the Wot Starter template with npx and degit. Requires Node.js and npx to be installed. This command clones the specified repository.

```bash
pnpx degit wot-ui/wot-starter <project-name>
```

--------------------------------

### Install Dependencies with bun

Source: https://starter.wot-ui.cn/guide/installation

Installs project dependencies using bun. This command reads the package.json file and downloads necessary packages. It also removes the pnpm-lock.yaml file.

```bash
bun install
npx rimraf pnpm-lock.yaml
```

--------------------------------

### Install Dependencies with npm

Source: https://starter.wot-ui.cn/guide/installation

Installs project dependencies using npm. This command reads the package.json file and downloads necessary packages. It also removes the pnpm-lock.yaml file.

```bash
npm install
npx rimraf pnpm-lock.yaml
```

--------------------------------

### Start Development Server with yarn

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server in h5 mode using yarn. This command compiles the project and provides a local server for development.

```bash
yarn dev
```

--------------------------------

### Install Dependencies with pnpm

Source: https://starter.wot-ui.cn/guide/installation

Installs project dependencies using pnpm. This command reads the package.json file and downloads necessary packages. It also removes the pnpm-lock.yaml file.

```bash
pnpm install
npx rimraf pnpm-lock.yaml
```

--------------------------------

### Cross-Platform Development with bun

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server for a specific platform using bun. Replace `<platform>` with the desired platform identifier (e.g., `app-plus`, `h5`).

```bash
bun dev:<platform>
```

--------------------------------

### Start Development Server with pnpm

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server in h5 mode using pnpm. This command compiles the project and provides a local server for development.

```bash
pnpm dev
```

--------------------------------

### Install Dependencies with yarn

Source: https://starter.wot-ui.cn/guide/installation

Installs project dependencies using yarn. This command reads the package.json file and downloads necessary packages. It also removes the pnpm-lock.yaml file.

```bash
yarn install
npx rimraf pnpm-lock.yaml
```

--------------------------------

### Open Project in VS Code

Source: https://starter.wot-ui.cn/guide/installation

Opens the specified project folder in Visual Studio Code. Requires VS Code to be installed and configured in the system's PATH.

```bash
code <project-name>
```

--------------------------------

### Cross-Platform Development with npm

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server for a specific platform using npm. Replace `<platform>` with the desired platform identifier (e.g., `app-plus`, `h5`).

```bash
npm dev:<platform>
```

--------------------------------

### Cross-Platform Development with pnpm

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server for a specific platform using pnpm. Replace `<platform>` with the desired platform identifier (e.g., `app-plus`, `h5`).

```bash
pnpm dev:<platform>
```

--------------------------------

### Cross-Platform Development with yarn

Source: https://starter.wot-ui.cn/guide/installation

Starts the development server for a specific platform using yarn. Replace `<platform>` with the desired platform identifier (e.g., `app-plus`, `h5`).

```bash
yarn dev:<platform>
```

--------------------------------

### Pinia Basic Setup - Vue (TypeScript)

Source: https://starter.wot-ui.cn/guide/state-management

配置 Pinia 实例并将其挂载到 Vue 应用。此代码定义了 Pinia 实例，应用了持久化插件，并导出了 createApp 函数。

```typescript
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
pinia.use(persistPlugin)

export function createApp() {
  const app = createSSRApp(App).use(pinia)
  return {
    app,
  }
}
```

--------------------------------

### Install Pinia - Shell

Source: https://starter.wot-ui.cn/guide/state-management

安装 Pinia 状态管理库的命令。在项目根目录下执行此命令以添加 Pinia 依赖。

```shell
pnpm install pinia
```

--------------------------------

### Install Echarts and Uni-Echarts Dependencies

Source: https://starter.wot-ui.cn/guide/uni-echarts

Installs the necessary ECharts and uni-echarts packages for uni-app development. This is a prerequisite for using ECharts in your project. Supports both pnpm and npm package managers.

```bash
pnpm add echarts uni-echarts
# 或者
npm install echarts uni-echarts
```

--------------------------------

### Tabbar Methods

Source: https://starter.wot-ui.cn/guide/tabbar

Detailed explanations for the methods available through the `useTabbar` hook.

```APIDOC
## Tabbar Methods

### getTabbarItemValue(name: string): number | null

#### Description
Retrieves the badge value for a given tabbar item.

#### Parameters
- **name** (string) - Required - The name of the tabbar item.

#### Returns
- (number | null) - The badge value or null if not set.

### setTabbarItem(name: string, value: number): void

#### Description
Sets the badge value for a specified tabbar item.

#### Parameters
- **name** (string) - Required - The name of the tabbar item.
- **value** (number) - Required - The new badge value.

### setTabbarItemActive(name: string): void

#### Description
Sets a specific tabbar item as the active one.

#### Parameters
- **name** (string) - Required - The name of the tabbar item to activate.
```

--------------------------------

### Install @uni-ku/bundle-optimizer for Mini-Program Optimization

Source: https://starter.wot-ui.cn/guide/uni-echarts

Installs the `@uni-ku/bundle-optimizer` as a development dependency to help optimize the final bundle size of WeChat mini-programs. This is crucial for managing large libraries like ECharts and avoiding package size limits.

```bash
pnpm add -D @uni-ku/bundle-optimizer
# 或者
npm install -D @uni-ku/bundle-optimizer
```

--------------------------------

### Provide ECharts Instance (JavaScript)

Source: https://starter.wot-ui.cn/guide/uni-echarts

This snippet shows the essential step of providing the ECharts core instance using `provideEcharts`. This must be called in every component that uses ECharts when installed via npm.

```javascript
import * as echarts from 'echarts/core'
import { provideEcharts } from 'uni-echarts/shared'

// 🚨 This line is mandatory
provideEcharts(echarts)
```

--------------------------------

### Build uni-app for Web

Source: https://starter.wot-ui.cn/guide/deployment

Command to build a uni-app project for web deployment. The output is typically placed in a 'dist/build/h5' directory, suitable for traditional Single Page Application hosting.

```bash
pnpm build:h5
```

--------------------------------

### Pinia Persistence Plugin Configuration - TypeScript

Source: https://starter.wot-ui.cn/guide/state-management

配置 Pinia 持久化插件，可以指定需要排除持久化的 store。此示例展示了如何调用 persist 函数并传入排除名单。

```typescript
// src/store/persist.ts
...
export function persistPlugin(context: PiniaPluginContext) {
  // 传入排除列表(store 名单)
  persist(context, ['temp'])
}
...
```

--------------------------------

### Build uni-app for Other Mini-Programs

Source: https://starter.wot-ui.cn/guide/deployment

General command pattern for building a uni-app project for various mini-program platforms. Replace '<platform>' with the target platform identifier (e.g., 'alipay', 'baidu'). Refer to 'package.json' for specific script configurations.

```bash
pnpm build:mp-<platform>
```

--------------------------------

### Install @uni-ku/root Plugin

Source: https://starter.wot-ui.cn/guide/uni-ku-root

Installs the @uni-ku/root plugin using package managers like pnpm, yarn, or npm. This is the first step to integrating the plugin into your UniApp project.

```bash
pnpm add -D @uni-ku/root

yarn add -D @uni-ku/root

npm install -D @uni-ku/root
```

--------------------------------

### useTabbar() Hook

Source: https://starter.wot-ui.cn/guide/tabbar

The `useTabbar` hook provides access to reactive tabbar data and methods for managing tabbar functionality.

```APIDOC
## useTabbar()

### Description
Provides reactive tabbar data and methods to control the custom tabbar.

### Usage
```typescript
const { tabbarList, activeTabbar, getTabbarItemValue, setTabbarItem, setTabbarItemActive } = useTabbar()
```

### Returns
- **tabbarList** (ComputedRef<Array<TabbarItem>>) - A computed property returning the list of tabbar items.
- **activeTabbar** (ComputedRef<string | null>) - A computed property returning the name of the currently active tabbar item.
- **getTabbarItemValue** (Function) - A function to retrieve the badge value of a specific tabbar item.
- **setTabbarItem** (Function) - A function to set the badge value for a specific tabbar item.
- **setTabbarItemActive** (Function) - A function to set a specific tabbar item as active.
```

--------------------------------

### Build uni-app for WeChat Mini-Program

Source: https://starter.wot-ui.cn/guide/deployment

Command to build a uni-app project specifically for the WeChat Mini-Program platform. The compiled files will be located in 'dist/build/mp-weixin' and can be uploaded using the WeChat Developer Tools.

```bash
pnpm build:mp-weixin
```

--------------------------------

### VueUse createGlobalState with useStorage - TypeScript

Source: https://starter.wot-ui.cn/guide/state-management

使用 VueUse 的 createGlobalState 和 useStorage 实现全局状态管理和数据持久化。token 会被存储在 uni.storage 中。

```typescript
export const useAuth = createGlobalState(() => {
  const token = useStorage('token', '', uniStorage)
  const isLogin = computed(() => !!token.value)
  const login = (_token: string) => {
    token.value = _token
  }
  const logout = () => {
    token.value = ''
  }
  return {
    token,
    isLogin,
    login,
    logout,
  }
})
```

--------------------------------

### Simple Global State Management with ref - Vue (TypeScript)

Source: https://starter.wot-ui.cn/guide/state-management

使用 Vue 的 ref 实现简单的全局和本地状态管理。globalCount 是全局状态，localCount 是组件内的本地状态。

```typescript
// 全局状态
const globalCount = ref(1)
export function useCount() {
  // 本地状态
  const localCount = ref(1)
  function increment() {
    globalCount.value++
    localCount.value++
  }
  return {
    globalCount,
    localCount,
    increment
  }
}
```

--------------------------------

### uni-app Get and Listen to Theme Changes

Source: https://starter.wot-ui.cn/guide/dark-mode

Use uni.getSystemInfoSync() to get the current system theme ('light' or 'dark') and uni.onThemeChange() to listen for theme switching events in uni-app.

```javascript
// 获取系统主题信息
const systemInfo = uni.getSystemInfoSync()
console.log('当前主题:', systemInfo.theme) // 'light' 或 'dark'

// 监听主题变化
uni.onThemeChange((res) => {
  console.log('主题已切换到:', res.theme)
})
```

--------------------------------

### useTabbar() Hook API Reference (TypeScript)

Source: https://starter.wot-ui.cn/guide/tabbar

This snippet shows the return values and properties of the `useTabbar` hook. It includes computed properties for the tabbar list and active item, as well as methods to get, set, and activate tabbar items.

```typescript
const {
  tabbarList, // 计算属性：Tabbar项列表
  activeTabbar, // 计算属性：当前激活的Tabbar项
  getTabbarItemValue, // 方法：获取指定项的徽标值
  setTabbarItem, // 方法：设置指定项的徽标值
  setTabbarItemActive, // 方法：设置指定项为激活状态
} = useTabbar()
```

--------------------------------

### VueUse uniStorage Adapter - TypeScript

Source: https://starter.wot-ui.cn/guide/state-management

为 VueUse 的 useStorage 提供一个 uni-app 的 storage adapter。该 adapter 实现了 getItem, setItem, 和 removeItem 方法来适配 uni.storage API。

```typescript
// storage adapter
export const uniStorage = {
  getItem(key: string) {
    return uni.getStorageSync(key) || null
  },
  setItem(key: string, value: any) {
    return uni.setStorageSync(key, value)
  },
  removeItem(key: string) {
    return uni.removeStorageSync(key)
  },
}
```

--------------------------------

### Custom Theme Configuration (JavaScript)

Source: https://starter.wot-ui.cn/guide/uni-echarts

Explains how to apply a custom theme to Uni-Echarts using the `provideEchartsTheme` function. This allows for consistent branding and visual styling across charts.

```javascript
import { provideEcharts, provideEchartsTheme } from 'uni-echarts/shared'
import * as echarts from 'echarts/core'

provideEcharts(echarts)

// Set custom theme
provideEchartsTheme({
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
  backgroundColor: 'transparent',
  // More theme configurations...
})
```

--------------------------------

### Simple Reactive State Management - Vue (TypeScript)

Source: https://starter.wot-ui.cn/guide/state-management

使用 Vue 的 reactive 方法创建一个简单的响应式状态对象。countStore 包含 count 状态和 increment 方法。

```typescript
export const countStore = reactive({
  count: 0,
  increment() {
    this.count++
  }
})
```

--------------------------------

### Use Pinia Counter Store in Component - Vue

Source: https://starter.wot-ui.cn/guide/state-management

在 Vue 组件中导入并使用定义的 Pinia counter store。通过 useCounterStore 获取 store 实例，然后可以访问其状态和方法。

```vue
<script setup lang="ts">
import { useCounterStore } from '../../stores/counter'

const counterStore = useCounterStore()
counterStore.count // 0
counterStore.increment()
counterStore.count // 1
</script>
```

--------------------------------

### Define Pinia Counter Store - Vue (TypeScript)

Source: https://starter.wot-ui.cn/guide/state-management

定义一个简单的 Pinia counter store，包含一个 count 状态和一个 increment 方法。使用组合式 API 风格定义 store。

```typescript
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
})
```

--------------------------------

### Configure Custom Tabbar in pages.config.ts

Source: https://starter.wot-ui.cn/guide/tabbar

Enables the custom Tabbar functionality and defines the list of pages that will appear in the Tabbar. This configuration is the first step in implementing a custom Tabbar.

```typescript
tabBar: {
  custom: true,
  // ... other configurations
  list: [{
    pagePath: 'pages/index/index',
  }, {
    pagePath: 'pages/about/index',
  }, {
    // Add new tabbar item
    pagePath: 'pages/new-page/index',
  }],
}
```

--------------------------------

### Global Message Component API (TypeScript)

Source: https://starter.wot-ui.cn/guide/feedback

Details the API for the global message component, covering the general 'show' method and specific methods like 'alert', 'confirm', and 'prompt'. Examples illustrate basic usage and advanced configuration with callbacks.

```typescript
// 通用弹窗
message.show({
  title: '提示',
  message: '这是一条消息'
})

// 字符串参数
message.show('简单提示')
```

```typescript
message.show({
  title: '标题',
  message: '内容',
  success: res => console.log('成功', res),
  fail: res => console.log('失败', res)
})
```

```typescript
// 简单提醒
message.alert('操作完成')

// 详细配置
message.alert({
  title: '提醒',
  message: '请注意查看结果',
  success: (res) => {
    console.log('用户确认了')
  }
})
```

```typescript
// 简单确认
message.confirm('确定要删除吗？')

// 详细配置
message.confirm({
  title: '确认删除',
  message: '删除后不可恢复，确定要删除吗？',
  success: (res) => {
    if (res.action === 'confirm') {
      console.log('用户确认删除')
      // 执行删除操作
    }
  },
  fail: (res) => {
    console.log('用户取消删除')
  }
})
```

```typescript
// 简单输入
message.prompt('请输入您的姓名')

// 详细配置
message.prompt({
  title: '输入信息',
  message: '请输入新的名称',
  inputValue: '默认值',
  inputPlaceholder: '请输入内容',
  success: (res) => {
    if (res.action === 'confirm') {
      console.log('用户输入:', res.value)
    }
  },
  fail: (res) => {
    console.log('用户取消输入')
  }
})
```

```typescript
message.close()
```

--------------------------------

### On-Demand Import ECharts Components (JavaScript)

Source: https://starter.wot-ui.cn/guide/uni-echarts

Illustrates how to perform on-demand imports for ECharts charts, components, and renderers to minimize the final bundle size. This is a best practice for performance optimization.

```javascript
// Import only the required chart types
import { BarChart, LineChart, PieChart } from 'echarts/charts'
// Import only the required components
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
// Import the renderer
import { CanvasRenderer } from 'echarts/renderers'
```

--------------------------------

### Async Import Components from Sub-Package (Vue)

Source: https://starter.wot-ui.cn/guide/uni-echarts

Demonstrates how to asynchronously import Vue components from a different sub-package. This pattern is useful for optimizing load times by deferring the loading of less critical components.

```vue
<script setup lang="ts">
// Cross-package asynchronous component import
import BarChart from '@/subEcharts/echarts/components/BarChart.vue?async'
import DonutChart from '@/subEcharts/echarts/components/DonutChart.vue?async'
import FunnelChart from '@/subEcharts/echarts/components/FunnelChart.vue?async'
import GaugeChart from '@/subEcharts/echarts/components/GaugeChart.vue?async'
import LineChart from '@/subEcharts/echarts/components/LineChart.vue?async'
import LiquidFillChart from '@/subEcharts/echarts/components/LiquidFillChart.vue?async'
import MiniLineChart from '@/subEcharts/echarts/components/MiniLineChart.vue?async'
import PieChart from '@/subEcharts/echarts/components/PieChart.vue?async'
import RadarChart from '@/subEcharts/echarts/components/RadarChart.vue?async'
import ScatterChart from '@/subEcharts/echarts/components/ScatterChart.vue?async'
import StackedBarChart from '@/subEcharts/echarts/components/StackedBarChart.vue?async'
</script>
```

--------------------------------

### Global Toast Component API (TypeScript)

Source: https://starter.wot-ui.cn/guide/feedback

Details the API for the global toast component, including the general 'show' method and specific shortcut methods like 'success', 'error', 'info', and 'warning'. Examples cover basic usage and customization.

```typescript
// 普通提示
test.show('这是一条提示信息')

// 自定义配置
test.show({
  msg: '自定义提示',
  duration: 3000,
  position: 'top'
})
```

```typescript
toast.success('操作成功')
test.success({
  msg: '保存成功',
  duration: 2000
})
```

```typescript
toast.error('操作失败')
test.error({
  msg: '网络错误，请重试',
  duration: 3000
})
```

```typescript
toast.info('这是一条信息')
test.info({
  msg: '请注意查看',
  position: 'top'
})
```

```typescript
toast.warning('警告信息')
test.warning({
  msg: '请谨慎操作',
  iconName: 'warning'
})
```

```typescript
toast.close()
```

--------------------------------

### Responsive Data Update (JavaScript)

Source: https://starter.wot-ui.cn/guide/uni-echarts

Demonstrates how to dynamically update chart data by directly modifying the `option` object. This approach allows for reactive updates to the chart's series data.

```javascript
const option = ref({
  // Initial configuration
})

function updateData() {
  option.value.series[0].data = [/* new data */]
}
```

--------------------------------

### Uninstall ECharts Dependencies (Bash)

Source: https://starter.wot-ui.cn/guide/uni-echarts

Provides the command to remove ECharts and uni-echarts packages from the project using pnpm. This is the first step in completely uninstalling ECharts.

```bash
pnpm remove echarts uni-echarts
```

--------------------------------

### Enable Mini-Program Subpackage Optimization in manifest.config.ts

Source: https://starter.wot-ui.cn/guide/uni-echarts

Enables subpackage optimization for WeChat mini-programs when using the `@uni-helper/vite-plugin-uni-manifest` plugin. This configuration should be placed in `manifest.config.ts` to integrate with the Vite build process.

```typescript
export default defineManifestConfig({
  'mp-weixin': {
    optimization: {
      subPackages: true,
    },
  },
})
```

--------------------------------

### Clean Vite Configuration (TypeScript)

Source: https://starter.wot-ui.cn/guide/uni-echarts

Shows how to remove ECharts-related configurations from the `vite.config.ts` file. This includes removing resolvers and other relevant settings to fully uninstall ECharts.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniHelperManifest from '@uni-helper/vite-plugin-uni-manifest'
import UniHelperPages from '@uni-helper/vite-plugin-uni-pages'
import UniHelperLayouts from '@uni-helper/vite-plugin-uni-layouts'
import UniHelperComponents from '@uni-helper/vite-plugin-uni-components'
import AutoImport from 'unplugin-auto-import/vite'
import { WotResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'
import { UniEchartsResolver } from 'uni-echarts/resolver'
import UniKuRoot from '@uni-ku/root'

export default async () => {
  const UnoCSS = (await import('unocss/vite')).default

  return defineConfig({
    optimizeDeps: {
      exclude: process.env.NODE_ENV === 'development' ? ['wot-design-uni', 'uni-echarts'] : [], 
      exclude: process.env.NODE_ENV === 'development' ? ['wot-design-uni',] : [], 
    },
    plugins: [
      UniHelperManifest(),
      UniHelperPages({
        dts: 'src/uni-pages.d.ts',
        subPackages: [
          'src/subPages',
        ],
        exclude: ['**/components/**/*.*'],
      }),
      UniHelperLayouts(),
      UniHelperComponents({
        resolvers: [WotResolver(), UniEchartsResolver()], 
        resolvers: [WotResolver()], 
        dts: 'src/components.d.ts',
        dirs: ['src/components', 'src/business'],
        directoryAsNamespace: true,
      }),
      UniKuRoot(),
      Uni(),
      // https://github.com/uni-ku/bundle-optimizer
      Optimization({
        logger: true,
      }),
      AutoImport({
        imports: ['vue', '@vueuse/core', 'pinia', 'uni-app', {
          from: 'uni-mini-router',
          imports: ['createRouter', 'useRouter', 'useRoute'],
        }, {
          from: 'wot-design-uni',
          imports: ['useToast', 'useMessage', 'useNotify', 'CommonUtil'],
        }, {
          from: 'alova/client',
          imports: ['usePagination', 'useRequest'],
        }],
        dts: 'src/auto-imports.d.ts',
        dirs: ['src/composables', 'src/store', 'src/utils', 'src/api'],
        vueTemplate: true,
      }),
      UnoCSS(),
    ],
  })
}
```

--------------------------------

### Enable Mini-Program Subpackage Optimization in manifest.json

Source: https://starter.wot-ui.cn/guide/uni-echarts

Enables the subpackage optimization feature for WeChat mini-programs within the `manifest.json` file. This configuration works in conjunction with `@uni-ku/bundle-optimizer` to help reduce the main package size by intelligently distributing code into subpackages.

```json
{
  "mp-weixin": {
    "optimization": {
      "subPackages": true
    }
  }
}
```

--------------------------------

### Configure Vite with @uni-ku/bundle-optimizer Plugin

Source: https://starter.wot-ui.cn/guide/uni-echarts

Integrates the `@uni-ku/bundle-optimizer` plugin into the Vite build process. This plugin aids in optimizing the uni-app project's output, particularly for WeChat mini-programs, by enabling features like subpackage optimization.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Optimization from '@uni-ku/bundle-optimizer'

export default defineConfig({
  plugins: [
    Uni(),
    // 分包优化插件
    Optimization({
      logger: true,  // 开启日志输出
    }),
  ],
})
```

--------------------------------

### Revert to Native Tabbar Configuration

Source: https://starter.wot-ui.cn/guide/tabbar

Explains how to disable the custom Tabbar and revert to the default uni-app Tabbar by modifying `pages.config.ts`. This involves setting `custom` to `false` and providing necessary configurations like paths and icons.

```typescript
tabBar: {
  custom: false,  // Set to false or remove this line
  color: '#7A7E83',
  selectedColor: '#3cc51f',
  backgroundColor: '#ffffff',
  borderStyle: 'black',
  list: [{
    pagePath: 'pages/index/index',
    text: '首页',
    iconPath: '/static/icon/home.png',           // Path to unselected icon
    selectedIconPath: '/static/icon/home-active.png'
  }, {
    pagePath: 'pages/about/index',
    text: '关于',
    iconPath: '/static/icon/about.png',
    selectedIconPath: '/static/icon/about-active.png'
  }],
}
```

--------------------------------

### Simplify Theme Management Logic (TypeScript)

Source: https://starter.wot-ui.cn/guide/dark-mode

This TypeScript code simplifies the `useTheme` composable by retaining only the system theme following logic and removing dark mode switching. It also lists files to delete for complete theme removal.

```typescript
// src/composables/useTheme.ts - 简化版本（仅保留系统主题跟随）
export function useTheme() {
  const currentThemeColor = ref(themeColorOptions[0])

  // 只保留主题色功能，移除明暗模式切换逻辑
  function selectThemeColor(option: ThemeColorOption) {
    currentThemeColor.value = option
  }

  return {
    currentThemeColor: computed(() => currentThemeColor.value),
    themeColorOptions,
    selectThemeColor,
  }
}

// 如果需要完全移除主题功能，删除以下文件：
// - src/composables/useTheme.ts
// - src/composables/useManualTheme.ts
// - src/store/themeStore.ts
// - src/store/manualThemeStore.ts
```

--------------------------------

### Update Tabbar State Management (useTabbar.ts)

Source: https://starter.wot-ui.cn/guide/tabbar

Defines the structure and initial state for Tabbar items, including their name, badge value, active status, display title, and icon. This is crucial for managing the Tabbar's dynamic content and appearance.

```typescript
interface TabbarItem {
  name: string // Page name, corresponding to route name
  value: number | null // Badge value, null means no badge displayed
  active: boolean // Whether it is the currently active item
  title: string // Display title
  icon: string // Icon name
}

const tabbarItems = ref<TabbarItem[]>([
  { name: 'home', value: null, active: true, title: '首页', icon: 'home' },
  { name: 'about', value: null, active: false, title: '关于', icon: 'user' },
  // Add new tabbar item
  { name: 'new-page', value: null, active: false, title: '新页面', icon: 'star' },
])
```

--------------------------------

### Wot UI Global Dark Mode Configuration

Source: https://starter.wot-ui.cn/guide/dark-mode

Enable global Dark Mode support for Wot Design Uni components by wrapping your application in `wd-config-provider`. This component accepts 'theme' and 'theme-vars' props to manage the application's theme.

```vue
<!-- App.vue -->
<script setup>
// 根据需求选择合适的主题管理方案
import { useTheme } from '@/composables/useTheme' // 简化版
// 或者
// import { useManualTheme } from '@/composables/useManualTheme' // 完整版

const { theme, themeVars } = useTheme()
</script>

<template>
  <wd-config-provider :theme="theme" :theme-vars="themeVars">
    <!-- 你的应用内容 -->
  </wd-config-provider>
</template>
```

--------------------------------

### Tabbar Item Management Methods (TypeScript)

Source: https://starter.wot-ui.cn/guide/tabbar

Detailed explanations of the methods available for managing tabbar items: `getTabbarItemValue` to retrieve badge counts, `setTabbarItem` to update badge counts, and `setTabbarItemActive` to set an item as the currently active tab.

```typescript
// 获取徽标值
getTabbarItemValue(name: string): number | null

// 设置徽标值
setTabbarItem(name: string, value: number): void

// 设置激活状态
setTabbarItemActive(name: string): void
```

--------------------------------

### Custom Tabbar Item Interface Definition

Source: https://starter.wot-ui.cn/guide/tabbar

Defines the TypeScript interface for a Tabbar item, specifying properties like name, badge value, active state, title, icon, and optional paths for active and inactive custom icons. This interface ensures type safety and consistency.

```typescript
interface TabbarItem {
  name: string // Page name, corresponding to route name
  value: number | null // Badge value, null means no badge displayed
  active: boolean // Whether it is the currently active item
  title: string // Display title
  icon: string // Icon name (when using built-in icons)
  activeIcon?: string // Active state custom icon path
  inactiveIcon?: string // Inactive state custom icon path
}
```

--------------------------------

### Integrate Badge Updates in a Component

Source: https://starter.wot-ui.cn/guide/tabbar

Shows a practical example within a Vue component of how to use `setTabbarItem` to update badge counts dynamically, such as when new messages are received or read.

```vue
<script setup>
const { setTabbarItem } = useTabbar()

// Simulate receiving new messages
function onNewMessage() {
  setTabbarItem('message', 3) // Display 3 unread messages
}

// Messages have been read
function onMessageRead() {
  setTabbarItem('message', null) // Clear badge
}
</script>
```

--------------------------------

### Delete Theme Configuration File (Bash)

Source: https://starter.wot-ui.cn/guide/dark-mode

This command removes the theme configuration file, `src/theme.json`, from the project.

```bash
# 删除主题配置文件
rm src/theme.json
```

--------------------------------

### WotUI 内置图标用法 - HTML

Source: https://starter.wot-ui.cn/guide/icons

展示了如何在 WotUI 项目中使用内置图标组件。可以直接通过 `<wd-icon>` 组件指定名称、大小和颜色。也支持在 `<wd-button>` 组件中直接使用图标。建议使用 CSS 变量 `--wot-color-theme` 来适配主题色。

```html
<!-- 基础用法 -->
<wd-icon name="star" size="20px" color="#f59e0b" />

<!-- 在按钮中使用 -->
<wd-button icon="add" type="primary">添加</wd-button>

<!-- 主题色适配 -->
<wd-icon name="home" size="24px" color="var(--wot-color-theme)" />
```

--------------------------------

### Use ref-based State in Component - Vue

Source: https://starter.wot-ui.cn/guide/state-management

在 Vue 组件中使用通过 ref 实现的全局和本地状态。组件可以直接导入 useCount 函数并使用返回的状态和方法。

```vue
<script setup lang="ts">
// 自动导入
const { globalCount, localCount, increment } = useCount()
</script>

<template>
  <button @click="increment()">
    {{ globalCount }}
    {{ localCount }}
  </button>
</template>
```

--------------------------------

### Basic Bar Chart Component using Uni-Echarts

Source: https://starter.wot-ui.cn/guide/uni-echarts

A Vue 3 component demonstrating how to create a basic bar chart using uni-echarts. It includes necessary ECharts imports, component registration, and chart option configuration. Key steps involve providing the ECharts instance and using the `<uni-echarts>` component.

```vue
<script setup lang="ts">
import { BarChart } from 'echarts/charts'
import { DatasetComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { provideEcharts } from 'uni-echarts/shared'

// 🚨 重要：由于 npm 插件编译机制问题，需要手动提供 echarts 实例
provideEcharts(echarts)

// 注册需要的组件
echarts.use([
  GridComponent,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  BarChart,
  CanvasRenderer,
])

// 图表配置
const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    data: ['销售额', '利润'],
    top: 30,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110],
      itemStyle: {
        color: '#5470c6',
      },
    },
    {
      name: '利润',
      type: 'bar',
      data: [20, 40, 30, 15, 12, 22],
      itemStyle: {
        color: '#91cc75',
      },
    },
  ],
})
</script>

<template>
  <uni-echarts custom-class="h-300px" :option="option" />
</template>
```

--------------------------------

### Global Toast Component API

Source: https://starter.wot-ui.cn/guide/feedback

Documentation for the GlobalToast component, providing various types of user feedback like success, error, info, and warning messages. It's a wrapper around wot-design-uni's wd-toast.

```APIDOC
## Global Toast Component API

### Description
GlobalToast is a globally callable feedback component for displaying various types of messages (success, error, info, warning). It is based on `wot-design-uni`'s `wd-toast` component.

### Method
```typescript
import { useGlobalToast } from '@/composables/useGlobalToast'

const toast = useGlobalToast()
```

### API Methods

#### `show(option)`
Displays a general toast message.

**Parameters:**
- `option` (object | string): Either a configuration object or a string for the message content.

**Configuration Object Properties (`ToastOptions`):**
- `msg` (string): The prompt content.
- `duration` (number, optional): Duration in ms. Defaults to `2000`.
- `position` (string, optional): Display position ('top', 'middle', 'bottom'). Defaults to 'middle'.
- `iconName` (string, optional): The icon name.
- `direction` (string, optional): Layout direction ('horizontal', 'vertical').
- `cover` (boolean, optional): Whether to display a mask. Defaults to `false`.
- `show` (boolean, internal use only).

**Example Usage:**
```typescript
// Simple message
trust.show('This is a message')

// With configuration object
trust.show({
  msg: 'Custom message',
  duration: 3000,
  position: 'top'
})
```

#### `success(option)`
Displays a success message with a green success icon.

**Parameters:** Same as `show(option)`.
**Default Configuration:** Icon is 'success', duration is `1500ms`.

**Example Usage:**
```typescript
trust.success('Operation successful')
trust.success({
  msg: 'Save successful',
  duration: 2000
})
```

#### `error(option)`
Displays an error message with a red error icon.

**Parameters:** Same as `show(option)`.
**Default Configuration:** Icon is 'error', direction is 'vertical'.

**Example Usage:**
```typescript
trust.error('Operation failed')
trust.error({
  msg: 'Network error, please retry',
  duration: 3000
})
```

#### `info(option)`
Displays an information message with a blue info icon.

**Parameters:** Same as `show(option)`.
**Default Configuration:** Icon is 'info'.

**Example Usage:**
```typescript
trust.info('This is an information message')
trust.info({
  msg: 'Please check',
  position: 'top'
})
```

#### `warning(option)`
Displays a warning message with a yellow warning icon.

**Parameters:** Same as `show(option)`.
**Default Configuration:** Icon is 'warning'.

**Example Usage:**
```typescript
trust.warning('Warning message')
trust.warning({
  msg: 'Please operate with caution',
  iconName: 'warning'
})
```

#### `close()`
Manually closes the toast.

**Example Usage:**
```typescript
trust.close()
```
```

--------------------------------

### Global Loading Component API

Source: https://starter.wot-ui.cn/guide/feedback

Documentation for the GlobalLoading component, used to display loading states during data fetching or operations. It's a wrapper around wot-design-uni's wd-toast.

```APIDOC
## Global Loading Component API

### Description
GlobalLoading is a globally callable feedback component for displaying loading states. It is based on `wot-design-uni`'s `wd-toast` component and can be used with request libraries like `axios` or `alova`.

### Method
```typescript
import { useGlobalLoading } from '@/composables/useGlobalLoading'

const loading = useGlobalLoading()
```

### API Methods

#### `loading(option)`
Displays the loading state.

**Parameters:**
- `option` (object | string): Either a configuration object or a string for the loading message.

**Configuration Object Properties (`ToastOptions`):**
- `msg` (string): The loading prompt text.
- `iconName` (string, optional): The icon name, defaults to 'loading'.
- `duration` (number, optional): Duration in ms. `0` means it won't auto-close. Defaults to `0`.
- `cover` (boolean, optional): Whether to display a mask layer. Defaults to `true`.
- `position` (string, optional): Display position ('top', 'middle', 'bottom'). Defaults to 'middle'.
- `show` (boolean, internal use only).

**Example Usage:**
```typescript
// Simple text
loading.loading('Loading...')

// With configuration object
loading.loading({
  msg: 'Data loading in progress',
  cover: true
})
```

#### `close()`
Closes the loading state.

**Example Usage:**
```typescript
loading.close()
```
```

--------------------------------

### Use reactive State in Component - Vue

Source: https://starter.wot-ui.cn/guide/state-management

在 Vue 组件中使用 reactive 实现的状态管理。可以直接在模板中访问 countStore 的 count 属性和 increment 方法。

```vue
<template>
  <!-- 自动导入 -->
  <button @click="countStore.increment()">
    {{ countStore.count }}
  </button>
</template>
```

--------------------------------

### Global Loading Component API (TypeScript)

Source: https://starter.wot-ui.cn/guide/feedback

Illustrates the different ways to call the global loading component, including basic text display and configuration objects for customizing messages, cover, and position. The close method is also shown.

```typescript
// 显示加载（字符串参数）
loading.loading('加载中...')

// 显示加载（配置对象）
loading.loading({
  msg: '数据加载中',
  cover: true
})

// 关闭加载
loading.close()
```

```typescript
// 简单文本
loading.loading('请稍候...')

// 自定义配置
loading.loading({
  msg: '数据处理中，请稍候',
  cover: false,
  position: 'middle'
})
```

```typescript
loading.close()
```

--------------------------------

### UnoCSS Core Features and Utility Classes Demo

Source: https://starter.wot-ui.cn/guide/styling

This section showcases various UnoCSS utility classes for styling common UI elements. It covers typography, spacing, colors, layout, shadows, and interactive effects, demonstrating the power and flexibility of atomic CSS.

```html
<view class='text-red-500 bg-blue-100'>UnoCSS Atomic CSS</view>

<!-- Gray color system -->
<view class='gray-50'>#f9fafb</view>
<view class='gray-100'>#f3f4f6</view>
<view class='gray-200'>#e5e7eb</view>
<view class='gray-300'>#d1d5db</view>
<view class='gray-400'>#9ca3af</view>
<view class='gray-500'>#6b7280</view>

<!-- Theme colors -->
<view class='blue-500'>#3b82f6</view>
<view class='green-500'>#10b981</view>
<view class='red-500'>#ef4444</view>
<view class='yellow-500'>#f59e0b</view>
<view class='purple-500'>#8b5cf6</view>
<view class='pink-500'>#ec4899</view>

<!-- Flex layout -->
<view class='flex items-center justify-center'>Flex Center</view>
<view class='flex justify-between items-center'>
  <view>Left</view>
  <view>Right</view>
</view>

<!-- Grid layout -->
<view class='grid grid-cols-3 gap-4'>
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>5</view>
  <view>6</view>
</view>

<!-- Padding system -->
<view class='p-1'>p-1 (4px)</view>
<view class='p-2'>p-2 (8px)</view>
<view class='p-4'>p-4 (16px)</view>
<view class='p-6'>p-6 (24px)</view>
<view class='p-8'>p-8 (32px)</view>

<!-- Font sizes -->
<view class='text-xs'>12px</view>
<view class='text-sm'>14px</view>
<view class='text-base'>16px</view>
<view class='text-lg'>18px</view>
<view class='text-xl'>20px</view>
<view class='text-2xl'>24px</view>
<view class='text-3xl'>30px</view>

<!-- Shadow effects -->
<view class='shadow-sm'>shadow-sm</view>
<view class='shadow'>shadow</view>
<view class='shadow-md'>shadow-md</view>
<view class='shadow-lg'>shadow-lg</view>
<view class='shadow-xl'>shadow-xl</view>

<!-- Interaction effects -->
<view class='hover:bg-blue-200 hover:scale-105 transition-all duration-300'>Hover Effects</view>

<!-- Animation effects -->
<view class='transition-all duration-500 ease-in-out transform rotate-12 scale-110'>Animated Element</view>

<!-- Responsive design -->
<view class='grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>Responsive Grid</view>

<!-- Utility classes -->
<view class='block inline flex hidden'>Display utilities</view>
<view class='absolute relative top-2 left-2 right-2 bottom-2'>Positioning utilities</view>
```

--------------------------------

### Clean Up Stylesheet Code (CSS)

Source: https://starter.wot-ui.cn/guide/dark-mode

This CSS snippet demonstrates removing dark mode-related styles and commented-out media queries for dark mode preference.

```css
/* 移除暗黑模式相关样式 */
.container {
  background: white;
  color: black;
  /* 移除：dark:bg-gray-900 dark:text-white */
}

/* 移除媒体查询 */
/*
@media (prefers-color-scheme: dark) {
  .container {
    background: #1a1a1a;
    color: white;
  }
}
*/
```

--------------------------------

### 常用 Carbon 图标示例 - HTML (UnoCSS)

Source: https://starter.wot-ui.cn/guide/icons

列举了常用 Carbon 图标在 UnoCSS 中的使用方式。通过添加 `i-carbon:{icon-name}` 类名，可以快速引入系统、功能或状态图标。

```html
<!-- 系统图标 -->
<div class="i-carbon:add"></div>          <!-- 添加 -->
<div class="i-carbon:close"></div>        <!-- 关闭 -->
<div class="i-carbon:checkmark"></div>    <!-- 确认 -->
<div class="i-carbon:arrow-right"></div>  <!-- 右箭头 -->

<!-- 功能图标 -->
<div class="i-carbon:home"></div>         <!-- 首页 -->
<div class="i-carbon:search"></div>       <!-- 搜索 -->
<div class="i-carbon:user"></div>         <!-- 用户 -->
<div class="i-carbon:settings"></div>     <!-- 设置 -->

<!-- 状态图标 -->
<div class="i-carbon:star"></div>         <!-- 星级 -->
<div class="i-carbon:favorite"></div>     <!-- 收藏 -->
<div class="i-carbon:warning"></div>      <!-- 警告 -->
<div class="i-carbon:error"></div>        <!-- 错误 -->
```

--------------------------------

### Remove Official Configuration (JSON)

Source: https://starter.wot-ui.cn/guide/dark-mode

This snippet shows how to remove dark mode and theme location configurations from the manifest file for both H5 and mp-weixin platforms.

```json
// src/manifest.config.ts
{
  "h5": {
    // "darkmode": true,              // 删除这行
    // "themeLocation": "theme.json"  // 删除这行
  },
  "mp-weixin": {
    // "darkmode": true,              // 删除这行
    // "themeLocation": "theme.json"  // 删除这行
  }
}
```
Tokens:
Raw