1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-12 16:40:40 +08:00

refactor: 架构升级

This commit is contained in:
小莫唐尼
2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,177 @@
# uni.navigateBack - 返回上一页示例
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#navigateback
## 概述
`uni.navigateBack` 用于关闭当前页面,返回上一页面或多级页面。
## 基础用法
```javascript
uni.navigateBack()
```
## 完整示例
### 示例 1: 基本返回
```javascript
uni.navigateBack({
success: () => {
console.log('返回成功')
},
fail: (err) => {
console.error('返回失败', err)
}
})
```
### 示例 2: 返回多级页面
```javascript
// 返回上一页
uni.navigateBack({
delta: 1
})
// 返回上两页
uni.navigateBack({
delta: 2
})
```
### 示例 3: 在页面中使用
```vue
<template>
<view class="container">
<button @click="goBack">返回</button>
<button @click="goBackTwoPages">返回上两页</button>
</view>
</template>
<script>
export default {
methods: {
goBack() {
uni.navigateBack()
},
goBackTwoPages() {
uni.navigateBack({
delta: 2
})
}
}
}
</script>
```
### 示例 4: 带数据返回
```vue
<!-- 当前页面 -->
<template>
<view class="container">
<button @click="saveAndBack">保存并返回</button>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
name: 'test',
value: '123'
}
}
},
methods: {
saveAndBack() {
// 保存数据到上一页
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
if (prevPage) {
prevPage.setData({
savedData: this.formData
})
}
uni.navigateBack()
}
}
}
</script>
```
### 示例 5: 返回前确认
```vue
<template>
<view class="container">
<button @click="handleBack">返回</button>
</view>
</template>
<script>
export default {
data() {
return {
hasChanges: false
}
},
methods: {
handleBack() {
if (this.hasChanges) {
uni.showModal({
title: '提示',
content: '有未保存的更改,确定要返回吗?',
success: (res) => {
if (res.confirm) {
uni.navigateBack()
}
}
})
} else {
uni.navigateBack()
}
}
}
}
</script>
```
## 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| delta | Number | 否 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页 |
## 平台兼容性
| 平台 | 支持情况 |
|------|---------|
| H5 | ✅ |
| 微信小程序 | ✅ |
| 支付宝小程序 | ✅ |
| 百度小程序 | ✅ |
| 字节跳动小程序 | ✅ |
| QQ 小程序 | ✅ |
| 快手小程序 | ✅ |
| App | ✅ |
| 快应用 | ✅ |
## 注意事项
1. `delta` 默认为 1,表示返回上一页
2. 如果 `delta` 大于现有页面数,会返回到首页
3. 可以通过 `getCurrentPages()` 获取页面栈信息
4. 返回时可以传递数据给上一页
## 参考资源
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#navigateback
- **页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
@@ -0,0 +1,151 @@
# uni.navigateTo - 页面跳转示例
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#navigateto
## 概述
`uni.navigateTo` 用于保留当前页面,跳转到应用内的某个页面。
## 基础用法
```javascript
uni.navigateTo({
url: '/pages/detail/detail'
})
```
## 完整示例
### 示例 1: 基本跳转
```javascript
uni.navigateTo({
url: '/pages/detail/detail',
success: () => {
console.log('跳转成功')
},
fail: (err) => {
console.error('跳转失败', err)
}
})
```
### 示例 2: 带参数跳转
```javascript
// 跳转并传递参数
uni.navigateTo({
url: '/pages/detail/detail?id=123&name=test'
})
// 在目标页面接收参数
// pages/detail/detail.vue
export default {
onLoad(options) {
console.log('接收到的参数', options)
// { id: '123', name: 'test' }
}
}
```
### 示例 3: 传递对象参数
```javascript
// 传递对象
const params = {
id: 123,
name: 'test',
data: { key: 'value' }
}
// 需要序列化
uni.navigateTo({
url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(params))}`
})
// 在目标页面解析
export default {
onLoad(options) {
const data = JSON.parse(decodeURIComponent(options.data))
console.log('解析后的数据', data)
}
}
```
### 示例 4: 在组件中使用
```vue
<template>
<view class="container">
<button @click="goToDetail">查看详情</button>
<button @click="goToDetailWithParams">带参数跳转</button>
</view>
</template>
<script>
export default {
methods: {
goToDetail() {
uni.navigateTo({
url: '/pages/detail/detail'
})
},
goToDetailWithParams() {
uni.navigateTo({
url: '/pages/detail/detail?id=123&name=test'
})
}
}
}
</script>
```
### 示例 5: 封装跳转函数
```javascript
// utils/navigation.js
const navigation = {
// 跳转到详情页
toDetail(id) {
uni.navigateTo({
url: `/pages/detail/detail?id=${id}`
})
},
// 跳转到用户页
toUser(userId) {
uni.navigateTo({
url: `/pages/user/user?id=${userId}`
})
},
// 通用跳转
navigate(url, params = {}) {
const query = Object.keys(params)
.map(key => `${key}=${encodeURIComponent(params[key])}`)
.join('&')
const fullUrl = query ? `${url}?${query}` : url
uni.navigateTo({
url: fullUrl
})
}
}
// 使用
navigation.toDetail(123)
navigation.navigate('/pages/detail/detail', { id: 123, name: 'test' })
```
## 注意事项
1. 不能跳转到 tabBar 页面,需要使用 `uni.switchTab`
2. 路径前需要加 `/`,表示从根目录开始
3. 参数会拼接在 URL 后面,长度有限制
4. 复杂对象需要序列化后传递
## 参考资源
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
- **其他路由 API**: https://uniapp.dcloud.net.cn/api/router.html
@@ -0,0 +1,152 @@
# uni.reLaunch - 重新启动应用示例
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#relaunch
## 概述
`uni.reLaunch` 用于关闭所有页面,打开到应用内的某个页面。
## 基础用法
```javascript
uni.reLaunch({
url: '/pages/index/index'
})
```
## 完整示例
### 示例 1: 基本重新启动
```javascript
uni.reLaunch({
url: '/pages/index/index',
success: () => {
console.log('重新启动成功')
},
fail: (err) => {
console.error('重新启动失败', err)
}
})
```
### 示例 2: 退出登录后重新启动
```javascript
function logout() {
// 清除所有数据
uni.clearStorageSync()
// 重新启动到登录页
uni.reLaunch({
url: '/pages/login/login'
})
}
```
### 示例 3: 在页面中使用
```vue
<template>
<view class="container">
<button @click="restartApp">重新启动应用</button>
</view>
</template>
<script>
export default {
methods: {
restartApp() {
uni.showModal({
title: '提示',
content: '确定要重新启动应用吗?',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '/pages/index/index'
})
}
}
})
}
}
}
</script>
```
### 示例 4: 与 navigateTo 和 redirectTo 的区别
```javascript
// navigateTo: 保留当前页面,可以返回
uni.navigateTo({
url: '/pages/detail/detail'
})
// 页面栈: [首页, 详情页]
// redirectTo: 关闭当前页面,不能返回
uni.redirectTo({
url: '/pages/detail/detail'
})
// 页面栈: [详情页] (首页被关闭)
// reLaunch: 关闭所有页面,重新启动
uni.reLaunch({
url: '/pages/detail/detail'
})
// 页面栈: [详情页] (所有页面都被关闭)
```
### 示例 5: 登录后重新启动
```javascript
function login() {
uni.request({
url: 'https://api.example.com/login',
method: 'POST',
data: { username: 'test', password: '123456' },
success: (res) => {
if (res.data.success) {
uni.setStorageSync('token', res.data.token)
// 重新启动到首页
uni.reLaunch({
url: '/pages/index/index'
})
}
}
})
}
```
## 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 |
## 平台兼容性
| 平台 | 支持情况 |
|------|---------|
| H5 | ✅ |
| 微信小程序 | ✅ |
| 支付宝小程序 | ✅ |
| 百度小程序 | ✅ |
| 字节跳动小程序 | ✅ |
| QQ 小程序 | ✅ |
| 快手小程序 | ✅ |
| App | ✅ |
| 快应用 | ✅ |
## 注意事项
1. 不能跳转到 tabBar 页面,需要使用 `uni.switchTab`
2. 会关闭所有页面,无法返回
3. 路径前需要加 `/`,表示从根目录开始
4. 适合退出登录、重新启动等场景
## 参考资源
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#relaunch
- **页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
@@ -0,0 +1,146 @@
# uni.redirectTo - 重定向跳转示例
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#redirectto
## 概述
`uni.redirectTo` 用于关闭当前页面,跳转到应用内的某个页面。
## 基础用法
```javascript
uni.redirectTo({
url: '/pages/detail/detail'
})
```
## 完整示例
### 示例 1: 基本重定向
```javascript
uni.redirectTo({
url: '/pages/detail/detail',
success: () => {
console.log('跳转成功')
},
fail: (err) => {
console.error('跳转失败', err)
}
})
```
### 示例 2: 带参数重定向
```javascript
uni.redirectTo({
url: '/pages/detail/detail?id=123&name=test'
})
// 在目标页面接收参数
// pages/detail/detail.vue
export default {
onLoad(options) {
console.log('接收到的参数', options)
// { id: '123', name: 'test' }
}
}
```
### 示例 3: 登录后重定向
```javascript
function login() {
// 登录逻辑
uni.request({
url: 'https://api.example.com/login',
method: 'POST',
data: { username: 'test', password: '123456' },
success: (res) => {
if (res.data.success) {
// 保存 token
uni.setStorageSync('token', res.data.token)
// 重定向到首页(关闭登录页)
uni.redirectTo({
url: '/pages/index/index'
})
}
}
})
}
```
### 示例 4: 在页面中使用
```vue
<template>
<view class="container">
<button @click="goToDetail">跳转到详情页</button>
</view>
</template>
<script>
export default {
methods: {
goToDetail() {
uni.redirectTo({
url: '/pages/detail/detail?id=123'
})
}
}
}
</script>
```
### 示例 5: 与 navigateTo 的区别
```javascript
// navigateTo: 保留当前页面,可以返回
uni.navigateTo({
url: '/pages/detail/detail'
})
// 页面栈: [首页, 详情页]
// redirectTo: 关闭当前页面,不能返回
uni.redirectTo({
url: '/pages/detail/detail'
})
// 页面栈: [详情页] (首页被关闭)
```
## 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 |
## 平台兼容性
| 平台 | 支持情况 |
|------|---------|
| H5 | ✅ |
| 微信小程序 | ✅ |
| 支付宝小程序 | ✅ |
| 微信小程序 | ✅ |
| 支付宝小程序 | ✅ |
| 百度小程序 | ✅ |
| 字节跳动小程序 | ✅ |
| QQ 小程序 | ✅ |
| 快手小程序 | ✅ |
| App | ✅ |
| 快应用 | ✅ |
## 注意事项
1. 不能跳转到 tabBar 页面,需要使用 `uni.switchTab`
2. 会关闭当前页面,无法返回
3. 路径前需要加 `/`,表示从根目录开始
4. 适合登录后跳转等不需要返回的场景
## 参考资源
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#redirectto
- **保留页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
- **重新启动**: https://uniapp.dcloud.net.cn/api/router.html#relaunch
@@ -0,0 +1,149 @@
# uni.switchTab - 切换 TabBar 页面示例
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#switchtab
## 概述
`uni.switchTab` 用于跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
## 基础用法
```javascript
uni.switchTab({
url: '/pages/index/index'
})
```
## 完整示例
### 示例 1: 基本切换
```javascript
uni.switchTab({
url: '/pages/index/index',
success: () => {
console.log('切换成功')
},
fail: (err) => {
console.error('切换失败', err)
}
})
```
### 示例 2: 在页面中使用
```vue
<template>
<view class="container">
<button @click="goToHome">回到首页</button>
<button @click="goToCategory">分类</button>
<button @click="goToCart">购物车</button>
<button @click="goToProfile">我的</button>
</view>
</template>
<script>
export default {
methods: {
goToHome() {
uni.switchTab({
url: '/pages/index/index'
})
},
goToCategory() {
uni.switchTab({
url: '/pages/category/category'
})
},
goToCart() {
uni.switchTab({
url: '/pages/cart/cart'
})
},
goToProfile() {
uni.switchTab({
url: '/pages/profile/profile'
})
}
}
}
</script>
```
### 示例 3: 登录后跳转到首页
```javascript
function login() {
uni.request({
url: 'https://api.example.com/login',
method: 'POST',
data: { username: 'test', password: '123456' },
success: (res) => {
if (res.data.success) {
uni.setStorageSync('token', res.data.token)
// 跳转到 tabBar 首页
uni.switchTab({
url: '/pages/index/index'
})
}
}
})
}
```
### 示例 4: 封装切换函数
```javascript
// utils/navigation.js
const navigation = {
switchToTab(url) {
uni.switchTab({
url: url,
fail: (err) => {
console.error('切换失败', err)
// 如果不是 tabBar 页面,使用 navigateTo
uni.navigateTo({
url: url
})
}
})
}
}
// 使用
navigation.switchToTab('/pages/index/index')
```
## 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| url | String | 是 | 需要跳转的 tabBar 页面的路径 |
## 平台兼容性
| 平台 | 支持情况 |
|------|---------|
| H5 | ✅ |
| 微信小程序 | ✅ |
| 支付宝小程序 | ✅ |
| 百度小程序 | ✅ |
| 字节跳动小程序 | ✅ |
| QQ 小程序 | ✅ |
| 快手小程序 | ✅ |
| App | ✅ |
| 快应用 | ✅ |
## 注意事项
1. 只能跳转到 `pages.json` 中配置的 tabBar 页面
2. 不能传递参数(URL 参数会被忽略)
3. 会关闭所有非 tabBar 页面
4. 如果目标页面不是 tabBar 页面,会触发 fail 回调
## 参考资源
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#switchtab
- **页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto