Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 5027b56c 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

wip: 通过 pages.json 文件生成 tabBar 目录

上级 994a8f77
展开全部 隐藏空白更改
内联 并排
Showing with 578 addition and 458 deletion
pages/tabBar/API.uvue
浏览文件 @ 5027b56c
...@@ -26,30 +26,29 @@ ...@@ -26,30 +26,29 @@
</uni-collapse> </uni-collapse>
<text>---------------</text> <text>---------------</text>
<uni-collapse> <uni-collapse>
<template v-for="menuItem in menu" :key="menuItem.id"> <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem!.name"
<uni-collapse-item :title="menuItem.name" class="item"> class="item">
<view v-for="page in menuItem.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active" <view v-for="page in menuItem!.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
@click="goPage(`/${page.path}`)"> @click="goPage(`/${page.path}`)">
<text class="uni-navigate-text">{{ <text class="uni-navigate-text">{{
page.style["navigationBarTitleText"] page.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu.id"> <uni-collapse style="width: 100%" v-for="childMenu in menuItem!.children" :key="childMenu!.id">
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0"> <uni-collapse-item :title="childMenu!.name" class="item" style="margin-bottom: 0">
<view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages" <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu!.pages"
:key="childPage.path" @click="goPage(`/${childPage.path}`)"> :key="childPage.path" @click="goPage(`/${childPage.path}`)">
<text class="uni-navigate-text">{{ <text class="uni-navigate-text">{{
childPage.style["navigationBarTitleText"] childPage.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</uni-collapse-item> </uni-collapse-item>
</template> </uni-collapse>
</uni-collapse>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
...@@ -62,68 +61,9 @@ ...@@ -62,68 +61,9 @@
</template> </template>
<script lang="uts"> <script lang="uts">
import { pages } from '@/target-pages.json' import { generateMenu } from './generateMenu.uts'
import { MenuItem } from './generateMenu.uts'
type PagesJsonPageGroup = { const menu = generateMenu('pages/API')
id : string,
name : string
}
type PagesJsonPage = {
path : string,
style : UTSJSONObject,
group ?: PagesJsonPageGroup[] | null
}
type MenuItem = {
id : string,
name : string,
children : MenuItem[],
pages : PagesJsonPage[]
}
const menu : MenuItem[] = []
const menuKeyMap = new Map<string, number>()
// #ifdef APP-ANDROID
const apiPages = JSON.parse<PagesJsonPage[]>(JSON.stringify(pages))!.filter((page : PagesJsonPage) : boolean => page.path.startsWith('pages/API') && page.group !== null)
// #endif
// #ifdef WEB || APP-IOS
const apiPages = (pages as unknown as PagesJsonPage[]).filter(page => page.path.startsWith('pages/API') && page.group)
// #endif
apiPages.forEach(page => {
let currentArr : MenuItem[] = menu
let currentMenu : MenuItem | null = null
if (page.group !== null) {
page.group!.forEach((item, index) => {
const { id, name } = item
const ids = id.split('.')
const _id = ids[ids.length - 1]
if (!menuKeyMap.has(id)) {
menuKeyMap.set(id, currentArr.length)
currentArr.push({
id: _id,
name,
children: [] as MenuItem[],
pages: [] as PagesJsonPage[]
} as MenuItem)
if (_id == 'page' && name == '页面和路由') {
currentArr[currentArr.length - 1].pages.push({
path: 'set-tab-bar',
style: {
navigationBarTitleText: '设置 TabBar'
}
} as PagesJsonPage)
}
}
currentMenu = currentArr[menuKeyMap.get(id)!]
if (index < page.group!.length - 1) {
currentArr = currentArr[menuKeyMap.get(id)!].children as MenuItem[]
}
})
}
if (currentMenu !== null) {
(currentMenu as MenuItem).pages.push(page)
}
})
type Page = { type Page = {
name : string name : string
url : string url : string
...@@ -140,7 +80,7 @@ ...@@ -140,7 +80,7 @@
export default { export default {
data() { data() {
return { return {
menu: menu as MenuItem[], menu: menu as (MenuItem | null)[],
list: [ list: [
{ {
id: 'global', id: 'global',
......
pages/tabBar/CSS.uvue
浏览文件 @ 5027b56c
...@@ -25,29 +25,28 @@ ...@@ -25,29 +25,28 @@
</uni-collapse> </uni-collapse>
<text>---------------</text> <text>---------------</text>
<uni-collapse> <uni-collapse>
<template v-for="menuItem in menu" :key="menuItem.id"> <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem!.name"
<uni-collapse-item :title="menuItem.name" class="item"> class="item">
<view v-for="page in menuItem.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active" <view v-for="page in menuItem!.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
@click="goPage(`/${page.path}`)"> @click="goPage(`/${page.path}`)">
<text class="uni-navigate-text">{{ <text class="uni-navigate-text">{{
page.style["navigationBarTitleText"] page.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu.id"> <uni-collapse style="width: 100%" v-for="childMenu in menuItem!.children" :key="childMenu!.id">
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0"> <uni-collapse-item :title="childMenu!.name" class="item" style="margin-bottom: 0">
<view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages" <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu!.pages"
:key="childPage.path" @click="goPage(`/${childPage.path}`)"> :key="childPage.path" @click="goPage(`/${childPage.path}`)">
<text class="uni-navigate-text">{{ <text class="uni-navigate-text">{{
childPage.style["navigationBarTitleText"] childPage.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</uni-collapse-item> </uni-collapse-item>
</template>
</uni-collapse> </uni-collapse>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
...@@ -56,60 +55,9 @@ ...@@ -56,60 +55,9 @@
</template> </template>
<script lang="uts"> <script lang="uts">
import { pages } from '@/target-pages.json' import { generateMenu } from './generateMenu.uts'
import { MenuItem } from './generateMenu.uts'
type PagesJsonPageGroup = { const menu = generateMenu('pages/CSS')
id : string,
name : string
}
type PagesJsonPage = {
path : string,
style : UTSJSONObject,
group ?: PagesJsonPageGroup[] | null
}
type MenuItem = {
id : string,
name : string,
children : MenuItem[],
pages : PagesJsonPage[]
}
const menu : MenuItem[] = []
const menuKeyMap = new Map<string, number>()
// #ifdef APP-ANDROID
const cssPages = JSON.parse<PagesJsonPage[]>(JSON.stringify(pages))!.filter((page : PagesJsonPage) : boolean => page.path.startsWith('pages/CSS') && page.group !== null)
// #endif
// #ifdef WEB || APP-IOS
const cssPages = (pages as unknown as PagesJsonPage[]).filter(page => page.path.startsWith('pages/CSS') && page.group)
// #endif
cssPages.forEach(page => {
let currentArr : MenuItem[] = menu
let currentMenu : MenuItem | null = null
if (page.group !== null) {
page.group!.forEach((item, index) => {
const { id, name } = item
const ids = id.split('.')
const _id = ids[ids.length - 1]
if (!menuKeyMap.has(id)) {
menuKeyMap.set(id, currentArr.length)
currentArr.push({
id: _id,
name,
children: [] as MenuItem[],
pages: [] as PagesJsonPage[]
} as MenuItem)
}
currentMenu = currentArr[menuKeyMap.get(id)!]
if (index < page.group!.length - 1) {
currentArr = currentArr[menuKeyMap.get(id)!].children as MenuItem[]
}
})
}
if (currentMenu !== null) {
(currentMenu as MenuItem).pages.push(page)
}
})
type Page = { type Page = {
name : string name : string
enable ?: boolean enable ?: boolean
...@@ -125,7 +73,7 @@ ...@@ -125,7 +73,7 @@
export default { export default {
data() { data() {
return { return {
menu: menu as MenuItem[], menu: menu as (MenuItem | null)[],
list: [ list: [
{ {
id: 'background', id: 'background',
......
pages/tabBar/component.uvue
浏览文件 @ 5027b56c
...@@ -26,28 +26,27 @@ ...@@ -26,28 +26,27 @@
<text>---------------</text> <text>---------------</text>
<uni-collapse> <uni-collapse>
<template v-for="menuItem in menu" :key="menuItem.id"> <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem!.name"
<uni-collapse-item :title="menuItem.name" class="item"> class="item">
<view v-for="page in menuItem.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active" <view v-for="page in menuItem!.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
@click="goPage(`/${page.path}`)"> @click="goPage(`/${page.path}`)">
<text class="uni-navigate-text">{{ <text class="uni-navigate-text">{{
page.style["navigationBarTitleText"] page.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu.id"> <uni-collapse style="width: 100%" v-for="childMenu in menuItem!.children" :key="childMenu!.id">
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0"> <uni-collapse-item :title="childMenu!.name" class="item" style="margin-bottom: 0">
<view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages" <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu!.pages"
:key="childPage.path" @click="goPage(`/${childPage.path}`)"> :key="childPage.path" @click="goPage(`/${childPage.path}`)">
<text class="uni-navigate-text">{{ <text class="uni-navigate-text">{{
childPage.style["navigationBarTitleText"] childPage.style["navigationBarTitleText"]
}}</text> }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</uni-collapse-item> </uni-collapse-item>
</template>
</uni-collapse> </uni-collapse>
<!-- #ifdef UNI-APP-X && APP --> <!-- #ifdef UNI-APP-X && APP -->
...@@ -60,60 +59,9 @@ ...@@ -60,60 +59,9 @@
</template> </template>
<script lang="uts"> <script lang="uts">
import { pages } from '@/target-pages.json' import { generateMenu } from './generateMenu.uts'
import { MenuItem } from './generateMenu.uts'
type PagesJsonPageGroup = { const menu = generateMenu('pages/component')
id : string,
name : string
}
type PagesJsonPage = {
path : string,
style : UTSJSONObject,
group ?: PagesJsonPageGroup[] | null
}
type MenuItem = {
id : string,
name : string,
children : MenuItem[],
pages : PagesJsonPage[]
}
const menu : MenuItem[] = []
const menuKeyMap = new Map<string, number>()
// #ifdef APP-ANDROID
const componentPages = JSON.parse<PagesJsonPage[]>(JSON.stringify(pages))!.filter((page : PagesJsonPage) : boolean => page.path.startsWith('pages/component') && page.group !== null)
// #endif
// #ifdef WEB || APP-IOS
const componentPages = (pages as unknown as PagesJsonPage[]).filter(page => page.path.startsWith('pages/component') && page.group)
// #endif
componentPages.forEach(page => {
let currentArr : MenuItem[] = menu
let currentMenu : MenuItem | null = null
if (page.group !== null) {
page.group!.forEach((item, index) => {
const { id, name } = item
const ids = id.split('.')
const _id = ids[ids.length - 1]
if (!menuKeyMap.has(id)) {
menuKeyMap.set(id, currentArr.length)
currentArr.push({
id: _id,
name,
children: [] as MenuItem[],
pages: [] as PagesJsonPage[]
} as MenuItem)
}
currentMenu = currentArr[menuKeyMap.get(id)!]
if (index < page.group!.length - 1) {
currentArr = currentArr[menuKeyMap.get(id)!].children as MenuItem[]
}
})
}
if (currentMenu !== null) {
(currentMenu as MenuItem).pages.push(page)
}
})
// #ifdef UNI-APP-X && APP // #ifdef UNI-APP-X && APP
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update' import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
// #endif // #endif
...@@ -133,7 +81,7 @@ ...@@ -133,7 +81,7 @@
export default { export default {
data() { data() {
return { return {
menu: menu as MenuItem[], menu: menu as (MenuItem | null)[],
list: [ list: [
{ {
id: 'view', id: 'view',
......
pages/tabBar/generateMenu.uts 0 → 100644
浏览文件 @ 5027b56c
import { pages } from '@/target-pages.json'
type PageGroup = {
id: string,
name: string,
index: number | null
}
type Page = {
path: string,
style: UTSJSONObject,
group?: PageGroup[] | null
}
export type MenuItem = {
id: string,
name: string,
index: number,
children: (MenuItem | null)[],
pages: Page[]
}
export function generateMenu(tabBarType: string): (MenuItem | null)[] {
const res: (MenuItem | null)[] = []
const tabBarPages = JSON.parse<Page[]>(JSON.stringify(pages))!.filter((page: Page): boolean => page.path.startsWith(tabBarType) && hasPageGroup(page.group))
tabBarPages.forEach(page => {
let menuItemArr: (MenuItem | null)[] = res
let currentMenu: MenuItem | null = null
const groupLength = page.group!.length
page.group!.forEach((group, groupIndex) => {
const { index, id, name } = group
const validIndex = isNumber(index) ? index! : menuItemArr.length
fillArrayWithNull(menuItemArr, validIndex)
if (menuItemArr[validIndex] == null) {
menuItemArr[validIndex] = {
id: id.split('.').slice(-1)[0],
name,
index: validIndex,
children: [] as (MenuItem | null)[],
pages: [] as Page[]
} as MenuItem
}
currentMenu = menuItemArr[validIndex]
if (groupIndex < groupLength - 1) {
menuItemArr = menuItemArr[validIndex]!.children as (MenuItem | null)[]
}
})
currentMenu!.pages.push(page)
})
return removeNullItem(res)
}
function hasPageGroup(value: PageGroup[] | null): boolean {
// #ifdef APP-ANDROID
return value !== null
// #endif
// #ifndef APP-ANDROID
return !!value
// #endif
}
function isNumber(value: number | null): boolean {
// #ifdef APP-ANDROID
return value !== null
// #endif
// #ifndef APP-ANDROID
return typeof value === 'number'
// #endif
}
function fillArrayWithNull(arr: (MenuItem | null)[], index: number): void {
const len = arr.length
for (let i = 0;i <= index - (len - 1);i++) {
arr.push(null)
}
}
function removeNullItem(arr: (MenuItem | null)[]): (MenuItem | null)[] {
const res = arr.filter((item: MenuItem | null): boolean => item !== null)
res.forEach(menuItem => {
addSetTabBarPage(menuItem!)
// #ifdef APP-ANDROID
menuItem!.children = removeNullItem(menuItem.children)
// #endif
// #ifndef APP-ANDROID
menuItem!.children = removeNullItem(menuItem!.children)
// #endif
})
return res
}
function addSetTabBarPage(menuItem: MenuItem) {
const { id, name } = menuItem
if (id == 'page' && name == '页面和路由') {
menuItem.pages.push({
path: 'set-tab-bar',
style: {
navigationBarTitleText: '设置 TabBar'
}
} as Page)
}
}
target-pages.json
浏览文件 @ 5027b56c
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或