uView Pro

https://uviewpro.cn/zh/
Admin
uView Pro is a comprehensive Vue UI component library for uni-app providing 100+ components...
Tokens:195,243
Snippets:1,353
Trust Score:3.7
Update:7 months ago
Show doc for...
Tokens:
Raw
### Running the uView Pro demonstration project

Source: https://uviewpro.cn/zh/components/install.html

Commands to install dependencies and start the development server for the uView Pro demo project.

```bash
pnpm install
pnpm run dev:h5
```

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

### Installing uView Pro via package managers

Source: https://uviewpro.cn/zh/components/install.html

Commands to install the uView Pro library using npm, yarn, or pnpm. Requires a initialized package.json file in the project root.

```bash
npm init -y
npm i uview-pro
```

```bash
yarn add uview-pro
```

```bash
pnpm add uview-pro
```

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

### Dropdown Component Usage Example

Source: https://uviewpro.cn/zh/components/dropdown.html

Example of how to use the u-dropdown and u-dropdown-item components, including event handling.

```APIDOC
## How to Keep Menu Highlighted

Sometimes, we might want the title part to remain highlighted after the dropdown menu is collapsed. The component can achieve this internally. However, if content is passed via a custom `slot`, the component won't know whether to keep the menu highlighted upon collapse because it doesn't know if you've performed any "operations" within your custom content. Therefore, we provide a manual `highlight(index)` method that can be called via `ref`, allowing you to decide whether a specific menu should be highlighted. You can combine this with events like `change` (dropdown-item), `open` (dropdown), and `close` (dropdown) for custom operations.

```html
<template>
	<view class="">
		<u-dropdown ref="uDropdownRef" @open="open" @close="close">
			<u-dropdown-item v-model="value1" title="Distance" :options="options1" @change="change"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="Temperature" :options="options2"></u-dropdown-item>
		</u-dropdown>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Define reactive data
const value1 = ref<number>(1)
const value2 = ref<number>(2)

// Define options data
const options1 = ref<Array<{ label: string; value: number }>>([
	{
		label: 'Default Sort',
		value: 1,
	},
	{
		label: 'Distance Priority',
		value: 2,
	}
])

const options2 = ref<Array<{ label: string; value: number }>>([
	{
		label: 'No Ice',
		value: 1,
	},
	{
		label: 'Add Ice',
		value: 2,
	},
])

// Define component refs
const uDropdownRef = ref<any>(null)

// Define event handler functions
const open = (index: number) => {
	// When expanding a dropdown menu, first close the highlight of other existing menus.
	// The component will automatically highlight the currently expanded item.
	uDropdownRef.value?.highlight()
}

const close = (index: number) => {
	// When closing, add highlight to the current item.
	// Of course, you can also handle this by listening to the dropdown-item's @change event.
	uDropdownRef.value?.highlight(index)
}

const change = (value: any) => {
	// For more details, please handle according to your business logic if needed.
	// uDropdownRef.value?.highlight(xxx)
}
</script>
```
```

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

### Install vite-plugin-uni-components (npm)

Source: https://uviewpro.cn/zh/components/setting.html

This command installs the `@uni-helper/vite-plugin-uni-components` package as a development dependency using npm. This plugin facilitates the automatic import of uni-app components, including those from uView Pro, when using Vite as the build tool.

```bash
npm i @uni-helper/vite-plugin-uni-components -D
```

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

### Build Theme Switching UI with Vue and useTheme

Source: https://uviewpro.cn/zh/guide/customTheme.html

Provides a complete Vue component example demonstrating how to build a user interface for theme switching. It utilizes the `useTheme` composable to get available themes, the current theme, and functions to change themes and dark mode.

```vue
<script setup lang="ts">
import { useTheme } from 'uview-pro';
const { themes, currentTheme, setTheme, darkMode, setDarkMode, toggleDarkMode } = useTheme();
</script>

<template>
  <picker :range="themes" range-key="label" @change="e => setTheme(themes[e.detail.value].name)">
    <view>当前主题：{{ currentTheme?.label }}</view>
  </picker>
  <u-switch :checked="darkMode === 'dark'" @change="toggleDarkMode" />
  <u-button @click="setDarkMode('auto')">跟随系统</u-button>
</template>
```

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

### Install vite-plugin-uni-components (pnpm)

Source: https://uviewpro.cn/zh/components/setting.html

This command installs the `@uni-helper/vite-plugin-uni-components` package as a development dependency using pnpm. This package is required for automatic component resolution and import when using Vite with uni-app projects.

```bash
pnpm add @uni-helper/vite-plugin-uni-components -D
```

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

### Install vite-plugin-uni-components (yarn)

Source: https://uviewpro.cn/zh/components/setting.html

This command installs the `@uni-helper/vite-plugin-uni-components` package as a development dependency using Yarn. This plugin is essential for enabling automatic component imports in Vite-based uni-app projects, simplifying the development workflow.

```bash
yarn add @uni-helper/vite-plugin-uni-components -D
```

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

### Full Example: Login Page with Local Toast in TypeScript

Source: https://uviewpro.cn/zh/hooks/useToast.html

A comprehensive example combining Vue template and TypeScript script for a login page. It utilizes local toast mode for user feedback during login, including validation, loading states, and error handling.

```typescript
<script setup lang="ts">
import { ref } from 'vue';
import { useToast } from 'uview-pro';

const toast = useToast({ page: true }); // Local mode

const formData = ref({
    username: '',
    password: ''
});

const login = async () => {
    // Validation
    if (!formData.value.username) {
        toast.error('请输入用户名');
        return;
    }
    
    if (!formData.value.password) {
        toast.error('请输入密码');
        return;
    }
    
    // Show loading
    toast.loading('登录中...');
    
    try {
        // Make request
        const res = await uni.request({
            url: '/api/login',
            method: 'POST',
            data: formData.value
        });
        
        if (res.code === 0) {
            toast.success('登录成功');
            // Redirect to home page
            uni.navigateTo({ url: '/pages/home/index' });
        } else {
            toast.error(res.message || '登录失败');
        }
    } catch (error) {
        toast.error('网络错误，请重试');
    }
};
</script>

<template>
    <view class="login-page">
        <input 
            v-model="formData.username" 
            placeholder="用户名" 
        />
        <input 
            v-model="formData.password" 
            type="password" 
            placeholder="密码" 
        />
        <button @click="login">登录</button>
        
        <!-- Local Toast component -->
        <u-toast page />
    </view>
</template>
```

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

### Basic Keyboard Usage (Vue)

Source: https://uviewpro.cn/zh/components/keyboard.html

Demonstrates the basic setup of the u-keyboard component in Vue. It shows how to control the keyboard's visibility using v-model and how to set the keyboard mode. The 'car' mode is used as an example, and a button is provided to trigger the keyboard's display.

```html
<template>
	<view>
		<u-keyboard ref="uKeyboardRef" mode="car" v-model="show"></u-keyboard>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>
```

```javascript
<script setup lang="ts">
import { ref } from 'vue'

// 定义响应式数据
const show = ref<boolean>(false)

// 定义组件引用
const uKeyboardRef = ref<any>(null)
</script>
```

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

### Language Package Example (TypeScript)

Source: https://uviewpro.cn/zh/hooks/useLocale.html

Provides example language packages for Chinese (zh-CN) and English (en-US), demonstrating how to structure translations with different namespaces and keys.

```typescript
// language/zh-CN.ts
export default {
    common: {
        confirm: '确定',
        cancel: '取消',
        save: '保存',
        delete: '删除',
        edit: '编辑',
        loading: '加载中...',
        noData: '暂无数据'
    },
    home: {
        welcome: '欢迎回来，{name}',
        title: '首页',
        desc: '这是您的个人中心'
    },
    errors: {
        network: '网络连接失败，请检查网络',
        server: '服务器错误，请稍后重试',
        notFound: '页面不存在'
    }
};

// language/en-US.ts
export default {
    common: {
        confirm: 'Confirm',
        cancel: 'Cancel',
        save: 'Save',
        delete: 'Delete',
        edit: 'Edit',
        loading: 'Loading...',
        noData: 'No data'
    },
    home: {
        welcome: 'Welcome back, {name}',
        title: 'Home',
        desc: 'This is your personal center'
    },
    errors: {
        network: 'Network connection failed, please check your network',
        server: 'Server error, please try again later',
        notFound: 'Page not found'
    }
};
```

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

### Configure Volar Type Hints (npm)

Source: https://uviewpro.cn/zh/components/setting.html

This JSON snippet shows how to configure `tsconfig.json` to enable Volar type hint support for uView Pro when installed via npm. Adding `uview-pro/types` to the `types` array in `compilerOptions` provides better autocompletion and type checking in CLI projects.

```json
{
  "compilerOptions": {
    // npm 方式
    "types": ["uview-pro/types"]
    // uni_modules 方式
    // "types": ["@/uni_modules/uview-pro/types"]
  }
}
```

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

### Register uView Pro in main.ts (npm)

Source: https://uviewpro.cn/zh/components/setting.html

This code snippet demonstrates how to import and register the uView Pro library in your Vue application's main entry file (`main.ts`) when using the npm installation method. This step is crucial for making uView Pro components and functionalities available throughout your project.

```js
import { createSSRApp } from 'vue'
import uViewPro from 'uview-pro'

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

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

### Basic Usage

Source: https://uviewpro.cn/zh/tools/request.html

Demonstrates how to perform common HTTP requests using both Composition API and async/await syntax.

```APIDOC
## Basic Usage

### Composition API

Perform GET, POST, PUT, and DELETE requests.

```typescript
import { http } from 'uview-pro'

// GET
http.get('/api/user', { id: 1 }).then(res => { /* ... */ })

// POST
http.post('/api/login', { username: 'xx', password: 'xx' }).then(res => { /* ... */ })

// PUT/DELETE
http.put('/api/user/1', { name: 'new' })
http.delete('/api/user/1')
```

### await/async

Use `async/await` for cleaner asynchronous code.

```typescript
const res = await http.post('/api/login', { username: 'xx' })
```

### Custom Header

Add custom headers to requests.

```typescript
http.get('/api/user', {}, {
  header: { Authorization: 'Bearer token' }
})
```
```

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

### Smart Dark Color Generation Example (v0.4.x)

Source: https://uviewpro.cn/zh/components/upgrade/04x.html

This example demonstrates how uView Pro v0.4.x automatically generates dark mode colors based on provided light colors. You can optionally override specific dark colors.

```ts
{
  color: {
    primary: '#2979ff',
    bgColor: '#f3f4f6',
    // ... 其他亮色
  },
  darkColor: {
    // 留空，系统自动生成以下内容：
    // primary: '#5b9ff5'（基于 #2979ff 混合生成的暗色）
    // bgColor: '#1a1a1a'（基于 #f3f4f6 反转生成）
    
    // 如果你想手动覆盖某个暗色：
    primary: '#6ba1ff',  // 自定义的暗色 primary
    // bgColor 仍会由系统生成
  }
}
```

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

### Multiple Instances / Interceptors

Source: https://uviewpro.cn/zh/tools/request.html

Demonstrates how to create multiple HTTP instances with custom configurations and interceptors.

```APIDOC
## Multiple Instances / Interceptors

### Description
This section shows how to create separate instances of the HTTP client, allowing for different base URLs or interceptor logic.

### Method
Instantiation and Configuration

### Endpoint
N/A

### Parameters
N/A

### Request Example
```typescript
import { Request } from 'uview-pro'

const customHttp = new Request()
customHttp.setConfig({ baseUrl: 'https://other.api.com' })
customHttp.interceptor.request = (config) => {
  // ...custom logic
  return config
}
```

### Response
N/A
```

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

### Locking SASS dependency versions

Source: https://uviewpro.cn/zh/components/install.html

Recommended configuration for package.json to ensure compatibility between SASS and SASS-loader, preventing compilation errors.

```json
{
  "sass": "1.63.2",
  "sass-loader": "10.4.1"
}
```

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

### Listening to Transition Animation Events

Source: https://uviewpro.cn/zh/components/transition.html

Provides an example of how to listen to various animation lifecycle events such as 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', and 'after-leave'. The callback functions receive the DOM element as a parameter.

```html
<u-transition
    :show="visible"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @before-leave="onBeforeLeave"
    @leave="onLeave"
    @after-leave="onAfterLeave"
>
    <view>监听动画事件</view>
</u-transition>
```

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

### u-top-tips Basic Usage

Source: https://uviewpro.cn/zh/components/topTips.html

Demonstrates the fundamental way to use the u-top-tips component by calling its `show` method via a ref in the `onReady` lifecycle hook.

```APIDOC
## POST /u-top-tips

### Description
Displays a temporary message at the top of the page.

### Method
POST (via ref)

### Endpoint
N/A (Component method call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<template>
	<u-top-tips ref="uTipsRef"></u-top-tips>
</template>

<script setup lang="ts">
import { ref, onReady } from 'vue'

const uTipsRef = ref()

onReady(() => {
	if (uTipsRef.value) {
		uTipsRef.value.show({
			title: '铁马冰河入梦来',
			type: 'success',
			duration: '2300'
		})
	}
})
</script>
```

### Response
#### Success Response (200)
None (component method call)

#### Response Example
None
```

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

### Configure Vite for Auto-Import (npm)

Source: https://uviewpro.cn/zh/components/setting.html

This JavaScript code configures the Vite build tool to automatically import uni-app components, specifically integrating uView Pro using its resolver. This setup in `vite.config.ts` ensures that components are automatically recognized and available without manual imports.

```js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

import Components from '@uni-helper/vite-plugin-uni-components'
import { uViewProResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'

export default defineConfig({
  plugins: [
    // make sure put it before `Uni()`
    Components({
      resolvers: [uViewProResolver()]
    }),
    uni()
  ]
})
```

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

### Customize Page Share Title in Vue

Source: https://uviewpro.cn/zh/tools/mpShare.html

This Vue script setup example shows how to dynamically set the share title for a specific page using `uni.$u.mpShare.title` within the `onLoad` lifecycle hook. This allows for personalized sharing messages based on page content or user interactions.

```vue
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {
  uni.$u.mpShare.title = '天苍苍野茫茫，风吹草低见牛羊';
})
</script>
```

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

### Basic Usage of Gap Component

Source: https://uviewpro.cn/zh/components/gap.html

Demonstrates the basic usage of the u-gap component for creating fixed spacing between content blocks. It shows how to configure height and background color using HTML.

```html
<u-gap height="80" bg-color="#bbb"></u-gap>
```

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

### Custom Button in Modal for User Info (Vue & TS)

Source: https://uviewpro.cn/zh/components/common.html

This example demonstrates using the `u-reset-button` class within a `u-modal` component's `confirm-button` slot to create a custom button that triggers the `getUserInfo` open-type functionality in WeChat mini programs. It includes Vue template and script setup with TypeScript.

```html
/* 请在微信开发工具中运行此代码 */
<template>
  <view>
    <u-modal v-model="show" content="点击确定进行授权">
      <template #confirm-button>
        <button
          open-type="getUserInfo"
          class="u-reset-button"
          @getuserinfo="getUserInfo"
        >
          确定
        </button>
      </template>
    </u-modal>
    <u-button @click="show = true">打开modal</u-button>
  </view>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const show = ref(true);

  function getUserInfo(res: any) {
    console.log(res);
  }
</script>
```

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

### u-tabs-swiper Integration with uni-app Swiper for Advanced Usage

Source: https://uviewpro.cn/zh/components/tabsSwiper.html

Provides an example of using u-tabs-swiper in conjunction with uni-app's swiper component. This setup enables swipe gestures for navigation and can be extended with features like pull-to-refresh using uni-app's scroll-view. It highlights the necessity of setting `ref` attributes and correctly managing the `current` and `animationfinish` events for seamless synchronization.

```html
<template>
  <view>
    <view>
      <u-tabs-swiper
        ref="uTabsRef"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <scroll-view
          scroll-y
          style="height: 800rpx;width: 100%;"
          @scrolltolower="onreachBottom"
        >
          ...
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface TabItem {
  name: string
}

const list = ref<TabItem[]>([
  { name: '十年' },
  { name: '青春' },
  { name: '之约' }
])

// tabs组件的current值，表示当前活动的tab选项
const current = ref(0)
// swiper组件的current值，表示当前那个swiper-item是活动的
const swiperCurrent = ref(0)
const uTabsRef = ref()

function tabsChange(index: number) {
  swiperCurrent.value = index
}

function transition(e: any) {
  const dx = e.detail.dx
  uTabsRef.value?.setDx(dx)
}

// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
function animationfinish(e: any) {
  const curr = e.detail.current
  uTabsRef.value?.setFinishCurrent(curr)
  swiperCurrent.value = curr
  current.value = curr
}

function onreachBottom() {
  // scroll-view到底部加载更多
}
</script>
```

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

### Global Configuration

Source: https://uviewpro.cn/zh/tools/request.html

Details how to set global configurations like `baseUrl`, `header`, and `meta` for the HTTP client.

```APIDOC
## Global Configuration

### Description
Learn how to configure global settings for the HTTP client, such as the base URL, default headers, and default meta fields. It's recommended to call `setConfig` before registering interceptors.

### Method
Configuration

### Endpoint
N/A

### Parameters
#### Request Body
- **baseUrl** (string) - Optional - The base URL for all requests.
- **header** (object) - Optional - Default headers to be sent with all requests.
- **meta** (object) - Optional - Default meta fields for all requests.

### Request Example
```typescript
// http.setConfig({ baseUrl: 'https://api.example.com', header: { 'X-Token': 'your-token' } })
```

### Response
N/A
```

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

### Basic Radio Group Usage in Vue.js

Source: https://uviewpro.cn/zh/components/radio.html

Demonstrates the fundamental setup of a radio group using Vue.js and the u-radio component. It shows how to bind values using v-model and handle change events for both individual radio buttons and the group. This example requires the `radioGroup` component to wrap `radio` components due to Vue's 'provide/inject' dependency.

```html
<template>
	<view class="">
		<u-radio-group v-model="value" @change="radioGroupChange">
			<u-radio 
				@change="radioChange" 
				v-for="(item, index) in list" :key="index" 
				:label="item.label"
				:value="item.value"
				:disabled="item.disabled"
			/>
		</u-radio-group>
	</view>
</template>
```

```typescript
import { ref } from 'vue'

// 定义列表数据接口
interface RadioItem {
	label: string
	value: string
	disabled: boolean
}

// 定义响应式数据
const list = ref<RadioItem[]>([
	{
		label: '苹果',
		value: 'apple',
		disabled: false
	},
	{
		label: '香蕉',
		value: 'banana',
		disabled: false
	},
	{
		label: '橙子',
		value: 'orange',
		disabled: false
	}
])

const value = ref<string>('orange')

// 定义事件处理函数
const radioChange = (e: any) => {
	// console.log(e);
}

const radioGroupChange = (e: any) => {
	// console.log(e);
}

```

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

### Multiple Instances / Interceptors

Source: https://uviewpro.cn/zh/tools/http.html

Demonstrates how to create and configure multiple HTTP instances with custom interceptors for different API endpoints.

```APIDOC
## Multiple Instances / Interceptors

### Description
This section shows how to create separate instances of the `Request` class, allowing for different base URLs and custom interceptor logic for each instance.

### Method
Instantiation and Configuration

### Endpoint
N/A

### Parameters
N/A

### Request Example
```typescript
import { Request } from 'uview-pro'

const customHttp = new Request()
customHttp.setConfig({ baseUrl: 'https://other.api.com' })
customHttp.interceptor.request = config => {
  // ...custom logic
  return config
}
export { customHttp }
```

### Response
N/A
```

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

### Enabling Transition Animation on First Render

Source: https://uviewpro.cn/zh/components/transition.html

Shows how to make the component perform the enter animation upon its initial render by setting the 'appear' prop to 'true'.

```html
<u-transition :show="visible" :appear="true">
    <view>首次渲染时会执行进入动画</view>
</u-transition>
```

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

### Handling Multiple Environments / Base URLs

Source: https://uviewpro.cn/zh/tools/request.html

Discusses strategies for managing different base URLs for various environments (development, staging, production).

```APIDOC
## Handling Multiple Environments / Base URLs

### Description
Strategies for managing API requests across different environments. You can dynamically switch `baseUrl` using `setConfig` or create multiple `Request` instances.

### Method
Configuration / Instantiation

### Endpoint
N/A

### Parameters
N/A

### Request Example
```typescript
// Option 1: Dynamic switching
// http.setConfig({ baseUrl: '...' })

// Option 2: Multiple instances
// const devHttp = new Request({ baseUrl: 'http://dev.api.com'})
// const prodHttp = new Request({ baseUrl: 'https://prod.api.com'})
```

### Response
N/A
```

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

### Basic Usage of Transition Component

Source: https://uviewpro.cn/zh/components/transition.html

Demonstrates the fundamental usage of the u-transition component by controlling content visibility with the 'show' prop. It defaults to the 'fade' animation effect.

```html
<u-transition :show="visible">
    <view>这是需要动画的内容</view>
</u-transition>
```

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

### 发送 GET 请求并自定义请求头 (TypeScript)

Source: https://uviewpro.cn/zh/tools/request.html

展示如何为 GET 请求自定义请求头，例如添加 `Authorization` 头部来传递认证令牌。这对于需要身份验证的 API 请求非常有用。

```typescript
http.get('/api/user', {}, {
  header: { Authorization: 'Bearer token' }
})
```

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

### http vs $u.http

Source: https://uviewpro.cn/zh/tools/request.html

Explains the equivalence between the `http` instance and the `$u.http` (or `uni.$u.http`) alias, highlighting they share the same underlying implementation.

```APIDOC
## http vs $u.http

### Description
Clarifies that `$u.http.get/post` and `uni.$u.http.get/post` are aliases for the `http` instance exported from `uview-pro`. They function identically and use the same underlying implementation.

### Method
Usage Comparison

### Endpoint
N/A

### Parameters
N/A

### Request Example
```typescript
import { $u, http } from 'uview-pro'

// Method 1: Using http
// http.get('/api/user', { id: 1 }, { meta: { toast: true } })

// Method 2: Using $u.http
// $u.http.get('/api/user', { id: 1 }, { meta: { toast: true } })

// Method 3: Using uni.$u.http
// uni.$u.http.get('/api/user', { id: 1 }, { meta: { toast: true } })
```

### Response
N/A
```

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

### Install @uni-ku/root with yarn

Source: https://uviewpro.cn/zh/components/configProvider.html

Installs the @uni-ku/root package as a development dependency using yarn. This package is essential for setting up global configuration and theme management in uView Pro.

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

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

### Install @uni-ku/root with npm

Source: https://uviewpro.cn/zh/components/configProvider.html

Installs the @uni-ku/root package as a development dependency using npm. This package is typically used for integrating virtual root components in Vue.js applications.

```bash
npm i -D @uni-ku/root
```

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

### Import Utility Functions with Tree-Shaking

Source: https://uviewpro.cn/zh/guide/faq.html

This example demonstrates how to import utility functions from uView Pro with tree-shaking enabled. By importing only the necessary functions, you can reduce your application's bundle size. The imported functions also benefit from automatic type inference, improving development efficiency.

```typescript
import { deepClone } from 'uview-pro'
const copy = deepClone(obj) // 类型自动推断
```

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

### Common Questions FAQ

Source: https://uviewpro.cn/zh/tools/http.html

Addresses frequently asked questions regarding global configuration, single request customization, interceptors, hook usage, multi-environment handling, error handling, and differences between HTTP methods.

```APIDOC
## Common Questions FAQ

### Description
This section provides answers to common questions encountered when using the uView Pro HTTP client, covering configuration, customization, error handling, and usage patterns.

### Method
Q&A

### Endpoint
N/A

### Questions & Answers
1.  **How to globally configure baseUrl, header, meta?**
    > Use `http.setConfig({ ... })`. It's recommended to call this before registering interceptors, typically in `main.ts`.

2.  **How to customize toast/loading for a single request?**
    > Use the `meta` field: `http.post(url, data, { meta: { toast: true, loading: true } })`.

3.  **How to customize interceptors?**
    > Refer to `http.interceptor.ts`. Request and response interceptors can be flexibly extended.

4.  **How to use elegantly in Composition API?**
    > Directly `import { http }`. No need for `getCurrentInstance`.

5.  **How to handle multi-environment/multi-baseUrl?**
    > You can dynamically switch using `setConfig`, or use multiple instances by calling `new Request()`.

6.  **How to capture and handle errors?**
    > It's recommended to handle errors uniformly in the response interceptor. Pages can use `try/catch` or `.catch`.

7.  **What is the difference between `$u.http.get/post` and `http`?**
    > `$u.http.get/post` is adapted for the `http` exported by uview-pro. The parameters are identical to `http`, and the underlying implementation is the same. The following methods are equivalent:
    ```javascript
    import { $u, http } from 'uview-pro'

    // Method 1
    http.get('/api/user', { id: 1 }, { meta: { toast: true } })

    // Method 2
    $u.http.get('/api/user', { id: 1 }, { meta: { toast: true } })

    // Method 3
    uni.$u.http.get('/api/user', { id: 1 }, { meta: { toast: true } })
    ```

8.  **Are there restrictions for `put/delete` on mini-program platforms?**
    > `put` and `delete` have limitations on some platforms like Alipay and Toutiao. Please refer to the notice at the top for details.

```

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

### Install @uni-ku/root with pnpm

Source: https://uviewpro.cn/zh/components/configProvider.html

Installs the @uni-ku/root package as a development dependency using pnpm. This is a package manager that helps in managing dependencies for Vue.js projects, particularly for uView Pro.

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

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

### 异步数据加载后的初始化

Source: https://uviewpro.cn/zh/components/readMore.html

当内容通过异步请求获取时，需在数据渲染后调用组件的 init 方法，以确保高度计算准确。

```vue
<template>
	<u-read-more ref="uReadMoreRef">
		<rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const content = ref<string>('')
const uReadMoreRef = ref<any>(null)

onMounted(() => {
	setTimeout(() => {
		content.value = "异步加载的内容..."
		setTimeout(() => {
			if (uReadMoreRef.value && uReadMoreRef.value.init) {
				uReadMoreRef.value.init()
			}
		}, 0)
	}, 2000)
})
</script>
```

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

### Get Current Locale Info with getCurrentLocale() (TypeScript)

Source: https://uviewpro.cn/zh/hooks/useLocale.html

Demonstrates how to get the current locale's information (non-reactive) using the `getCurrentLocale` function. This provides the same details as `currentLocale.value` but as a direct return value.

```typescript
const { getCurrentLocale } = useLocale();

const current = getCurrentLocale();
console.log(current.name);
console.log(current.label);
```

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

### Configure Mini-Program Share Options

Source: https://uviewpro.cn/zh/tools/mpShare.html

This code illustrates how to configure the global sharing options for mini-programs using `uni.$u.mpShare`. You can customize the share `title`, `path`, and `imageUrl`. These settings are applied within the `onLoad` lifecycle hook of a specific page to override default behaviors.

```javascript
// The object is integrated into this.$u. Internal properties are as follows:
uni.$u.mpShare = {
	title: '', // Defaults to the mini-program name, can be customized
	path: '', // Defaults to the current page path, generally no need to modify, QQ mini-program does not support
	// Share icon, path can be a local file path, code package file path, or network image path.
	// Supports PNG and JPG, defaults to a screenshot of the current page
	imageUrl: ''
}
```

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

### CountDown Autoplay Control and Manual Start

Source: https://uviewpro.cn/zh/components/countDown.html

Demonstrates how to control the countdown's autoplay behavior. Setting 'autoplay' to 'false' requires manually calling the 'start()' method via a ref to initiate the countdown.

```html
<template>
	<u-count-down ref="uCountDownRef" :timestamp="86400" :autoplay="false"></u-count-down>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

const uCountDownRef = ref()

onMounted(() => {
  setTimeout(() => {
    uCountDownRef.value.start()
  }, 2000)
})
</script>
```

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

### Generate Color Gradient

Source: https://uviewpro.cn/zh/tools/colorSwitch.html

The colorGradient function generates an array of hexadecimal color values by interpolating between a start and end color over a specified number of steps. It requires start color, end color, and the number of steps.

```javascript
console.log(uni.$u.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3));
// 结果为：["#fafafa", "#fafafa", "#fbfbfb"]
```

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

### Basic Sticky Component Usage (HTML)

Source: https://uviewpro.cn/zh/components/sticky.html

Demonstrates the basic implementation of the Sticky component by wrapping content within the `<u-sticky>` tags. The content inside the slot must have a single root element. Note that in iframe environments, the sticky effect might not be visible due to missing mobile API context.

```html
<template>
	<view class="container">
		<u-sticky>
			<!-- 只能有一个根元素 -->
			<view class="sticky">
				宝剑锋从磨砺出,梅花香自苦寒来
			</view>
		</u-sticky>
	</view>
</template>

<style lang="scss" scoped>
	.container {
		height: 200vh;
		margin-top: 150rpx;
	}
	
	.sticky {
		width: 750rpx;
		height: 120rpx;
		background-color: #2979ff;
		color: #fff;
		padding: 24rpx;
	}
</style>
```

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

### Generate Unique ID with guid Function

Source: https://uviewpro.cn/zh/tools/guid.html

The `guid` function generates a globally unique identifier. It accepts optional parameters for length, whether the first character should be 'u', and the base for the generated string. Default values are provided for convenience.

```javascript
/**
 * Generates a globally unique identifier.
 * @param {number | null} length - The desired length of the GUID. If null, follows RFC4122 standard.
 * @param {boolean} firstU - Whether the first character should be 'u'. Defaults to true.
 * @param {number} radix - The base for the generated random string (e.g., 2 for binary, 62 for alphanumeric). Defaults to 62.
 * @returns {string} A unique GUID string.
 */
function guid(length = 32, firstU = true, radix = 62) {
  // Implementation details for generating the GUID based on parameters
  // ...
  return ""; // Placeholder for actual implementation
}
```

```html
<template>
	<view :id="$u.guid()" :class="elClass">
		
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { $u } from 'uview-pro';

const elClass = ref('');

onMounted(() => {
  elClass.value = $u.guid(20);
});
</script>
```

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

### Basic Usage of u-section Component

Source: https://uviewpro.cn/zh/components/section.html

Demonstrates the basic implementation of the u-section component, which is used to divide content into sections. It shows how to set the main title and subtitle.

```html
<u-section title="今日热门" sub-title="查看更多"></u-section>
```

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

### Configure Vite for Auto-Import (uni_modules)

Source: https://uviewpro.cn/zh/components/setting.html

This JavaScript code configures the Vite build tool for automatic component importing, specifically tailored for the uni_modules installation of uView Pro. It utilizes `@uni-helper/vite-plugin-uni-components` with a custom path resolver to ensure components are correctly located and imported.

```js
// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

import Components from '@uni-helper/vite-plugin-uni-components'
import { uViewProResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'

export default defineConfig({
  plugins: [
    // make sure put it before `Uni()`
    Components({
      resolvers: [uViewProResolver('@/uni_modules/uview-pro')]
    }),
    uni()
  ]
})
```

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

### Basic Icon Usage

Source: https://uviewpro.cn/zh/components/icon.html

Demonstrates the basic usage of the u-icon component by setting the 'name' prop to an icon name. This is the simplest way to display an icon.

```html
<u-icon name="photo"></u-icon>
```

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

### Import Base Styles in App.vue (npm)

Source: https://uviewpro.cn/zh/components/setting.html

This SCSS code imports the base styles for uView Pro at the top of your `App.vue` file when using the npm installation method. This ensures that all necessary base styles are loaded, providing a foundation for component rendering and layout.

```scss
 @import "uview-pro/index.scss";
```

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

### Basic Usage

Source: https://uviewpro.cn/zh/components/numberBox.html

Demonstrates the basic implementation of the NumberBox component using v-model and an event handler.

```APIDOC
## Basic Usage

Use `v-model` to bind the initial value to the `value` property. This binding is two-way, so you don't need to reassign the returned value in the callback.

```html
<template>
	<u-number-box v-model="value" @change="valChange"></u-number-box>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Define reactive data
const value = ref<number>(0)

// Define the value change callback function
const valChange = (e: { value: number }) => {
	console.log('Current value: ' + e.value)
}
</script>
```
```
Tokens:
Raw