Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/exports.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export * from './usePreferredLanguage';
export * from './usePrevPage';
export * from './usePrevRoute';
export * from './useProvider';
export * from './useQuery';
export * from './useRequest';
export * from './useRoute';
export * from './useRouter';
Expand Down
1 change: 1 addition & 0 deletions src/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
- [usePrevPage](./usePrevPage/index.md)
- [usePrevRoute](./usePrevRoute/index.md)
- [useProvider](./useProvider/index.md)
- [useQuery](./useQuery/index.md)
- [useRequest](./useRequest/index.md)
- [useRoute](./useRoute/index.md)
- [useRouter](./useRouter/index.md)
Expand Down
267 changes: 267 additions & 0 deletions src/useQuery/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
# useQuery

获取页面传递的参数,支持自动解析 JSON 字符串。

## 特性

- 🚀 **简单易用** - 一行代码获取页面参数
- 🎯 **智能解析** - 自动识别并解析 JSON 字符串
- 🔧 **灵活配置** - 可选择开启或关闭 JSON 解析
- 📱 **响应式** - 支持响应式参数键
- 🛡️ **类型安全** - 完整的 TypeScript 类型支持
- 🌐 **编码兼容** - 支持 URL 编码的 JSON 数据

## 使用方法

### 基础用法

```vue
<script setup>
import { useQuery } from '@uni-helper/uni-use';

// 获取所有页面参数
const { query } = useQuery();

// 页面跳转: uni.navigateTo({ url: '/pages/detail?id=123&name=test' })
// query.value = { id: '123', name: 'test' }
</script>
```

### 获取特定参数

```vue
<script setup>
import { useQuery } from '@uni-helper/uni-use';

// 获取特定参数的值
const { value: userId } = useQuery('id');
const { value: userName } = useQuery('name');

// 页面跳转: uni.navigateTo({ url: '/pages/detail?id=123&name=test' })
// userId.value = '123'
// userName.value = 'test'
</script>
```

### 自动解析 JSON 数据

```vue
<script setup>
import { useQuery } from '@uni-helper/uni-use';

// 自动解析 JSON 字符串(默认开启)
const { value: resData } = useQuery('resData');

// 页面跳转示例:
// uni.navigateTo({
// url: '/pages/detail?resData=' + encodeURIComponent(JSON.stringify({
// id: 123,
// type: 'coal',
// details: { amount: 50 }
// }))
// })
//
// 结果: resData.value = { id: 123, type: 'coal', details: { amount: 50 } }
</script>
```

### 禁用 JSON 解析

```vue
<script setup>
import { useQuery } from '@uni-helper/uni-use';

// 禁用 JSON 自动解析,所有参数保持为原始字符串
const { query } = useQuery(undefined, { parseJson: false });

// 或者针对特定参数禁用解析
const { value: rawData } = useQuery('data', { parseJson: false });
</script>
```

### 响应式参数键

```vue
<script setup>
import { useQuery } from '@uni-helper/uni-use';
import { ref } from 'vue';

const paramKey = ref('id');
const { value } = useQuery(paramKey);

// 动态改变要获取的参数
paramKey.value = 'name'; // value 会自动更新为对应参数的值
</script>
```

## 支持的 JSON 格式

### encodeURIComponent + JSON.stringify(推荐)

```javascript
// 页面跳转
const data = { id: 123, name: 'test', details: { amount: 50 } };
uni.navigateTo({
url: `/pages/detail?resData=${encodeURIComponent(JSON.stringify(data))}`
});

// 目标页面自动解析
const { value: resData } = useQuery('resData');
// resData.value = { id: 123, name: 'test', details: { amount: 50 } }
```

### 直接 JSON.stringify

```javascript
// 页面跳转
const params = { order: 'A001', type: 'recruitment' };
uni.navigateTo({
url: `/pages/order?data=${JSON.stringify(params)}`
});

// 目标页面自动解析
const { value: orderData } = useQuery('data');
// orderData.value = { order: 'A001', type: 'recruitment' }
```

## API 参考

### useQuery()

```typescript
function useQuery(): {
query: Ref<Record<string, any>>;
};
```

获取所有页面参数。

### useQuery(key, options?)

```typescript
function useQuery(
key: MaybeRefOrGetter<string>,
options?: UseQueryOptions
): {
value: Ref<any>;
};
```

#### 参数

- **key**: `MaybeRefOrGetter<string>` - 要获取的参数键名,支持响应式
- **options**: `UseQueryOptions` - 配置选项

#### UseQueryOptions

```typescript
interface UseQueryOptions {
/**
* 是否自动解析 JSON 字符串
* @default true
*/
parseJson?: boolean;
}
```

#### 返回值

- **query**: `Ref<Record<string, any>>` - 所有页面参数(仅在不传 key 时返回)
- **value**: `Ref<any>` - 指定参数的值(仅在传入 key 时返回)

## 辅助函数

### tryParseJson

```typescript
function tryParseJson(value: string): any;
```

尝试解析 JSON 字符串,支持自动处理 URL 编码。

**特性:**
- 智能检测 JSON 格式
- 自动处理 URL 编码(encodeURIComponent)
- 解析失败时返回原始字符串
- 处理各种边界情况

**示例:**

```javascript
import { tryParseJson } from '@uni-helper/uni-use';

// 普通 JSON
tryParseJson('{"id":123}'); // { id: 123 }

// URL 编码的 JSON
tryParseJson('%7B%22id%22%3A123%7D'); // { id: 123 }

// 非 JSON 字符串
tryParseJson('hello'); // 'hello'

// 无效 JSON
tryParseJson('{"invalid":}'); // '{"invalid":}'
```

## API

## 实际使用场景

### 场景一:商品详情页

```javascript
// 商品列表页跳转
const product = { id: 'P001', name: '商品A', price: 99.99 };
uni.navigateTo({
url: `/pages/product/detail?product=${encodeURIComponent(JSON.stringify(product))}`
});

// 商品详情页接收
const { value: productInfo } = useQuery('product');
// productInfo.value = { id: 'P001', name: '商品A', price: 99.99 }
```

### 场景二:订单页面

```javascript
// 订单创建页跳转
const orderData = {
items: [{ id: 1, qty: 2 }],
total: 198,
userId: 'U001'
};
uni.navigateTo({
url: `/pages/order/create?data=${JSON.stringify(orderData)}`
});

// 订单创建页接收
const { value: order } = useQuery('data');
// order.value = { items: [{ id: 1, qty: 2 }], total: 198, userId: 'U001' }
```

### 场景三:混合参数

```javascript
// 复杂页面跳转
const complexData = { config: { theme: 'dark' }, user: { role: 'admin' } };
uni.navigateTo({
url: `/pages/dashboard?id=123&source=menu&config=${encodeURIComponent(JSON.stringify(complexData))}`
});

// 目标页面接收
const { query } = useQuery();
// query.value = {
// id: '123',
// source: 'menu',
// config: { config: { theme: 'dark' }, user: { role: 'admin' } }
// }
```

## 注意事项

1. **JSON 解析优先级**:先尝试直接解析,失败后尝试 URL 解码再解析
2. **类型安全**:建议配合 TypeScript 使用以获得更好的类型提示
3. **性能考虑**:JSON 解析在 `onLoad` 生命周期中执行,不会影响页面性能
4. **错误处理**:解析失败时会保持原始字符串值,不会抛出错误
5. **响应式更新**:参数值在页面生命周期内保持响应式
6. **编码建议**:推荐使用 `encodeURIComponent` 来确保特殊字符的正确传输
Loading