69 lines
2.5 KiB
Plaintext
69 lines
2.5 KiB
Plaintext
|
---
|
|||
|
|
description: bdrp-app 页面写法（参考 bdrp-mini）
|
|||
|
|
globs: src/pages/**/*.vue
|
|||
|
|
alwaysApply: false
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# bdrp-app 页面规范（按 mini 风格）
|
|||
|
|
|
|||
|
|
- 使用 Vue SFC + `script setup`，不要混用 Options API。
|
|||
|
|
- 页面元信息统一写在 `definePage(...)`，并放在脚本顶部。
|
|||
|
|
- `layout` 只用三种：`home`（首页/资产/我的/推广类）、`default`（普通业务页）、`false`（登录/分享/维护等无壳页面）。
|
|||
|
|
- 站内路由跳转必须使用 uni 官方导航 API，不使用 `window.location.href`、`router.push`、`router.back`。
|
|||
|
|
- 跳转规范：普通页用 `uni.navigateTo`，替换当前页用 `uni.redirectTo`，回首页/重开流程用 `uni.reLaunch`，tab 页切换用 `uni.switchTab`，返回用 `uni.navigateBack`。
|
|||
|
|
- 接口调用使用 `async/await` + `try/catch`；失败统一 `uni.showToast({ title: 'xxx', icon: 'none' })`。
|
|||
|
|
- 页面不要直接硬编码产品枚举，优先后端配置 + 本地白名单兜底（与 mini 的动态加载策略一致）。
|
|||
|
|
- 页面模板优先使用 uni 标签：`<view>`、`<text>`、`<image>`、`<scroll-view>`、`<swiper>`；避免在页面层大量使用纯 H5 标签（如 `div/span/img`）。
|
|||
|
|
- 图片与资源使用 uni 写法：`<image :src="..." mode="aspectFill|aspectFit" />`，避免直接依赖 H5 行为。
|
|||
|
|
- 生命周期优先使用 uni 页面生命周期：`onLoad`、`onShow`、`onPullDownRefresh`、`onReachBottom`、`onUnload`；通用副作用再用 Vue 的 `onMounted/onUnmounted`。
|
|||
|
|
- 页面文件尾部允许并推荐使用 `<route ...>` 声明页面配置（如 `layout`、`style`、`title`、`auth`、`agent`）；与 `definePage(...)` 保持一致，避免冲突。
|
|||
|
|
- UI 组件库统一优先使用 `wot-design-uni`（`wd-*` 组件）；新增或重构页面时不再引入 `vant` 组件。
|
|||
|
|
- 历史页面若存在 `van-*` 组件（如 `van-button`、`van-icon`、`van-popup`、`van-field`），重构时应替换为 `wd-*` 或 uni 原生标签实现。
|
|||
|
|
|
|||
|
|
## 示例
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<script setup>
|
|||
|
|
definePage({ layout: 'default' })
|
|||
|
|
onLoad(() => {
|
|||
|
|
// 页面参数初始化
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onShow(() => {
|
|||
|
|
// 页面每次可见时刷新
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function toDetail() {
|
|||
|
|
uni.navigateTo({ url: '/pages/help-detail' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function back() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<script setup>
|
|||
|
|
// ❌ 不建议：站内页跳转使用 window/router
|
|||
|
|
function toDetail() {
|
|||
|
|
window.location.href = '/pages/help-detail'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toList() {
|
|||
|
|
router.push('/pages/help')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<route type="home" lang="json">
|
|||
|
|
{
|
|||
|
|
"layout": "home",
|
|||
|
|
"style": {
|
|||
|
|
"navigationStyle": "custom"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</route>
|
|||
|
|
```
|