```
feat(registration): 优化经销商注册流程并增加地址定位功能 - 修改导航栏标题从“邀请注册”为“注册成为会员” - 修复重复提交问题并移除不必要的submitting状态 - 增加昵称和头像的必填验证提示 - 添加用户角色缺失时的默认角色写入机制 - 集成地图选点功能,支持经纬度获取和地址解析 - 实现微信地址导入功能,自动填充基本信息 - 增加定位权限检查和错误处理机制 - 添加.gitignore规则忽略备份文件夹src__bak - 移除已废弃的银行卡和客户管理页面代码 - 优化表单验证规则和错误提示信息 - 实现经销商注册成功后自动跳转到“我的”页面 - 添加用户信息缓存刷新机制确保角色信息同步 ```
This commit is contained in:
241
docs/NAVIGATION_USAGE.md
Normal file
241
docs/NAVIGATION_USAGE.md
Normal file
@@ -0,0 +1,241 @@
|
||||
# 导航工具使用指南
|
||||
|
||||
## 📖 概述
|
||||
|
||||
封装了 Taro 的导航方法,提供更便捷和统一的页面跳转功能。
|
||||
|
||||
## 🚀 主要特性
|
||||
|
||||
- ✅ **自动路径格式化** - 自动添加 `/pages/` 前缀
|
||||
- ✅ **参数自动编码** - 自动处理 URL 参数编码
|
||||
- ✅ **多种导航方式** - 支持所有 Taro 导航方法
|
||||
- ✅ **错误处理** - 统一的错误处理和提示
|
||||
- ✅ **TypeScript 支持** - 完整的类型定义
|
||||
|
||||
## 📦 导入方式
|
||||
|
||||
```typescript
|
||||
// 导入主要函数
|
||||
import { navigateTo, goTo, redirectTo, reLaunch, switchTab, goBack } from '@/utils/navigation'
|
||||
|
||||
// 或者导入默认函数
|
||||
import navigateTo from '@/utils/navigation'
|
||||
```
|
||||
|
||||
## 🎯 使用方法
|
||||
|
||||
### 1. 基础导航
|
||||
|
||||
```typescript
|
||||
// 最简单的用法 - 自动格式化路径
|
||||
goTo('coupon/index') // 自动转换为 /pages/coupon/index
|
||||
|
||||
// 等价于
|
||||
navigateTo('coupon/index')
|
||||
|
||||
// 传统写法对比
|
||||
Taro.navigateTo({ url: '/pages/coupon/index' })
|
||||
```
|
||||
|
||||
### 2. 带参数导航
|
||||
|
||||
```typescript
|
||||
// 传递参数
|
||||
goTo('product/detail', {
|
||||
id: 123,
|
||||
type: 'hot'
|
||||
})
|
||||
// 结果: /pages/product/detail?id=123&type=hot
|
||||
|
||||
// 复杂参数自动编码
|
||||
goTo('search/result', {
|
||||
keyword: '优惠券',
|
||||
category: '美食',
|
||||
price: [10, 100]
|
||||
})
|
||||
```
|
||||
|
||||
### 3. 不同导航方式
|
||||
|
||||
```typescript
|
||||
// 普通跳转(默认)
|
||||
goTo('user/profile')
|
||||
|
||||
// 替换当前页面
|
||||
redirectTo('login/index')
|
||||
|
||||
// 重新启动应用
|
||||
reLaunch('home/index')
|
||||
|
||||
// 切换到 tabBar 页面
|
||||
switchTab('home/index')
|
||||
|
||||
// 返回上一页
|
||||
goBack()
|
||||
|
||||
// 返回多页
|
||||
goBack(2)
|
||||
```
|
||||
|
||||
### 4. 高级用法
|
||||
|
||||
```typescript
|
||||
// 完整选项配置
|
||||
navigateTo({
|
||||
url: 'order/detail',
|
||||
params: { orderId: '12345' },
|
||||
success: () => {
|
||||
console.log('跳转成功')
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('跳转失败:', error)
|
||||
}
|
||||
})
|
||||
|
||||
// 不同导航类型
|
||||
navigateTo({
|
||||
url: 'login/index',
|
||||
replace: true, // 使用 redirectTo
|
||||
params: { from: 'profile' }
|
||||
})
|
||||
|
||||
navigateTo({
|
||||
url: 'home/index',
|
||||
switchTab: true // 使用 switchTab
|
||||
})
|
||||
```
|
||||
|
||||
## 🛠️ 路径格式化规则
|
||||
|
||||
### 自动添加前缀
|
||||
|
||||
```typescript
|
||||
// 输入 -> 输出
|
||||
'coupon/index' -> '/pages/coupon/index'
|
||||
'/coupon/index' -> '/pages/coupon/index'
|
||||
'pages/coupon/index' -> '/pages/coupon/index'
|
||||
'/pages/coupon/index' -> '/pages/coupon/index'
|
||||
```
|
||||
|
||||
### 特殊路径处理
|
||||
|
||||
```typescript
|
||||
// 如果已经是完整路径,不会重复添加
|
||||
'/pages/user/profile' -> '/pages/user/profile'
|
||||
'/subPages/vip/index' -> '/subPages/vip/index'
|
||||
```
|
||||
|
||||
## 🎨 实际使用示例
|
||||
|
||||
### 在组件中使用
|
||||
|
||||
```typescript
|
||||
import React from 'react'
|
||||
import { Button } from '@nutui/nutui-react-taro'
|
||||
import { goTo, switchTab } from '@/utils/navigation'
|
||||
|
||||
const ProductCard = ({ product }) => {
|
||||
const handleViewDetail = () => {
|
||||
goTo('product/detail', {
|
||||
id: product.id,
|
||||
from: 'list'
|
||||
})
|
||||
}
|
||||
|
||||
const handleGoHome = () => {
|
||||
switchTab('home/index')
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Button onClick={handleViewDetail}>
|
||||
查看详情
|
||||
</Button>
|
||||
<Button onClick={handleGoHome}>
|
||||
返回首页
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### 在页面中使用
|
||||
|
||||
```typescript
|
||||
import { useEffect } from 'react'
|
||||
import { redirectTo, getCurrentRoute } from '@/utils/navigation'
|
||||
|
||||
const LoginPage = () => {
|
||||
useEffect(() => {
|
||||
// 检查登录状态
|
||||
const checkAuth = async () => {
|
||||
const isLoggedIn = await checkLoginStatus()
|
||||
if (isLoggedIn) {
|
||||
// 已登录,跳转到首页
|
||||
redirectTo('home/index')
|
||||
}
|
||||
}
|
||||
|
||||
checkAuth()
|
||||
}, [])
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
await login()
|
||||
// 登录成功,跳转
|
||||
redirectTo('home/index')
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
// 登录页面内容
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 工具函数
|
||||
|
||||
```typescript
|
||||
// 获取当前页面路径
|
||||
const currentRoute = getCurrentRoute()
|
||||
console.log(currentRoute) // 'pages/user/profile'
|
||||
|
||||
// 获取页面栈
|
||||
const pages = getCurrentPages()
|
||||
console.log(pages.length) // 当前页面栈深度
|
||||
```
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
1. **tabBar 页面**:使用 `switchTab` 时不能传递参数
|
||||
2. **页面栈限制**:小程序页面栈最多 10 层
|
||||
3. **参数大小**:URL 参数有长度限制,大数据建议使用全局状态
|
||||
4. **特殊字符**:参数值会自动进行 URL 编码
|
||||
|
||||
## 🎉 迁移指南
|
||||
|
||||
### 替换现有代码
|
||||
|
||||
```typescript
|
||||
// 旧写法
|
||||
Taro.navigateTo({
|
||||
url: '/pages/product/detail?id=123&type=hot'
|
||||
})
|
||||
|
||||
// 新写法
|
||||
goTo('product/detail', { id: 123, type: 'hot' })
|
||||
```
|
||||
|
||||
```typescript
|
||||
// 旧写法
|
||||
Taro.redirectTo({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
|
||||
// 新写法
|
||||
redirectTo('login/index')
|
||||
```
|
||||
|
||||
现在你可以在整个项目中使用这些便捷的导航函数了!
|
||||
Reference in New Issue
Block a user