feat: 拆分组合式 & 选项式 API tabBar

e5ea67c4 · DCloud-WZF · 84ee5a6b · e5ea67c4 · e5ea67c4 · e5ea67c4
9 changed file
--- a/App.uvue
+++ b/App.uvue
@@ -55,7 +55,7 @@
    },
    methods: {
      checkLaunchPath() : boolean {
-        const HOME_PATH = '/pages/index'
+        const HOME_PATH = '/pages/tab-bar/options-api'
        if (state.appLaunchPath != HOME_PATH) {
          return false
        }

--- a/pages.json
+++ b/pages.json
 {
-  "pages": [{
-      "path": "pages/index",
-      "style": {
-        "navigationBarTitleText": "hello uvue"
-      }
+  "pages": [
+    {
+      "path": "pages/tab-bar/options-api",
+      "style": {
+        "navigationBarTitleText": "选项式 API"
+      }
+    },
+    {
+      "path": "pages/tab-bar/composition-api",
+      "style": {
+        "navigationBarTitleText": "组合式 API"
+      }
    },
    {
      "path": "pages/app-instance/index/index",
@@ -267,57 +274,49 @@
    {
      "path": "pages/state/data/data",
      "style": {
-        "navigationBarTitleText": "data",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": "data"
      }
    },
    {
      "path": "pages/state/methods/methods",
      "style": {
-        "navigationBarTitleText": "",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/state/props/props",
      "style": {
-        "navigationBarTitleText": "",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/state/computed/computed",
      "style": {
-        "navigationBarTitleText": "",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/state/watch/watch",
      "style": {
-        "navigationBarTitleText": "",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/rendering/slots/slots",
      "style": {
-        "navigationBarTitleText": "slots",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": "slots"
      }
    },
    {
      "path": "pages/rendering/template/template",
      "style": {
-        "navigationBarTitleText": "template",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": "template"
      }
    },
    {
      "path": "pages/rendering/unrecognized-component/unrecognized-component",
      "style": {
-        "navigationBarTitleText": "unrecognized-component",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": "unrecognized-component"
      }
    },
    {
@@ -371,18 +370,31 @@
    {
      "path": "pages/examples/nested-component-communication/nested-component-communication",
      "style": {
-        "navigationBarTitleText": "嵌套组件通信",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": "嵌套组件通信"
      }
    },
    {
      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class",
      "style": {
-        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式",
-        "enablePullDownRefresh": false
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式"
      }
    }
-  ],
+  ],
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#007AFF",
+    "borderStyle": "black",
+    "backgroundColor": "#F8F8F8",
+    "list": [{
+        "pagePath": "pages/tab-bar/options-api",
+        "text": "选项式 API"
+      },
+      {
+        "pagePath": "pages/tab-bar/composition-api",
+        "text": "组合式 API"
+      }
+    ]
+  },
  "globalStyle": {
    "pageOrientation": "portrait",
    "navigationBarTitleText": "Hello UVUE",
@@ -401,10 +413,12 @@
  "condition": {
    //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式(list 的索引项)
-    "list": [{
-      "name": "", //模式名称
-      "path": "", //启动页面，必选
-      "query": "" //启动参数，在页面的onLoad函数里面得到
-    }]
+    "list": [
+      {
+        "name": "", //模式名称
+        "path": "", //启动页面，必选
+        "query": "" //启动参数，在页面的onLoad函数里面得到
+      }
+    ]
  }
 }
\ No newline at end of file
--- a/pages/App.test.js
+++ b/pages/App.test.js
 describe("app lanch & show options", () => {
  it("onLaunch onShow", async () => {
-    const HOME_PATH = "/pages/index"
+    const HOME_PATH = '/pages/tab-bar/options-api'
    const page = await program.reLaunch(HOME_PATH)
    await page.waitFor(1000)
    expect(await page.callMethod("checkLaunchPath")).toBe(true)

--- a/pages/app-instance/index/index.uvue
+++ b/pages/app-instance/index/index.uvue
@@ -7,18 +7,25 @@
  </view>
 </template>

-<script lang="uts">
-import CompForAppComponent from '@/components/CompForAppComponent.uvue'
-// #ifdef APP-ANDROID
-import CompForAppUse from '@/components/CompForAppUse.uvue'
-// #endif
+<script lang="uts">
+  import { state} from '@/store/index.uts'
+  import CompForAppComponent from '@/components/CompForAppComponent.uvue'
+  // #ifdef APP-ANDROID
+  import CompForAppUse from '@/components/CompForAppUse.uvue'
+  // #endif

-export default {
-  components: {
-    CompForAppComponent,
-    // #ifdef APP-ANDROID
-    CompForAppUse
-    // #endif
+  export default {
+    components: {
+      CompForAppComponent,
+      // #ifdef APP-ANDROID
+      CompForAppUse
+      // #endif
+    },
+    methods: {
+      // 自动化测试
+      getLifeCycleNum() : number {
+        return state.lifeCycleNum
+      },
+    }
  }
-}
-</script>
+</script>
\ No newline at end of file
--- a/pages/lifecycle/component/component.test.js
+++ b/pages/lifecycle/component/component.test.js
 const PAGE_PATH = '/pages/lifecycle/component/component'
-const HOME_PATH = '/pages/index'
+const HOME_PATH = '/pages/tab-bar/options-api'

 describe('component-lifecycle', () => {
 	let page

--- a/pages/lifecycle/page/page.test.js
+++ b/pages/lifecycle/page/page.test.js
-const PAGE_PATH = '/pages/lifecycle/page/page'
-const HOME_PATH = '/pages/index'
+const PAGE_PATH = '/pages/lifecycle/page/page'
+const HOME_PATH = '/pages/tab-bar/options-api'
+const INTER_PAGE_PATH = '/pages/app-instance/index/index'
 let page
 let lifeCycleNum

@@ -54,7 +55,7 @@ describe('page-lifecycle', () => {
 		await page.callMethod('setLifeCycleNum', 0)
 	})
 	it('onHide', async () => {
-		page = await program.navigateTo(HOME_PATH)
+		page = await program.navigateTo(INTER_PAGE_PATH)
 		await page.waitFor('view')
 		lifeCycleNum = await page.callMethod('getLifeCycleNum')
 		expect(lifeCycleNum).toBe(-10)
@@ -64,7 +65,7 @@ describe('page-lifecycle', () => {
 		expect(lifeCycleNum).toBe(0)
 	})
 	it('onUnload', async () => {
-		page = await program.redirectTo(HOME_PATH)
+		page = await program.reLaunch(HOME_PATH)
 		await page.waitFor(700)
 		lifeCycleNum = await page.callMethod('getLifeCycleNum')
 		expect(lifeCycleNum).toBe(-100)

--- a/pages/lifecycle/page/page.uvue
+++ b/pages/lifecycle/page/page.uvue
@@ -12,7 +12,7 @@
 </template>

 <script lang="uts">
-import { State, state, setLifeCycleNum } from '@/store/index.uts'
+import { state, setLifeCycleNum } from '@/store/index.uts'

 export default {
  data() {

--- a/pages/tab-bar/composition-api.uvue
+++ b/pages/tab-bar/composition-api.uvue
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view class="uni-container">
+      <uni-collapse>
+        <template v-for="item in list" :key="item.id">
+          <uni-collapse-item :title="item.name" class="item">
+            <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
+              v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(item.id, page)">
+              <text class="uni-navigate-text"
+                :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+              <view class="down_arrow"></view>
+            </view>
+          </uni-collapse-item>
+        </template>
+      </uni-collapse>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+  type PageItem = {
+    name : string
+    enable ?: boolean
+    url ?: string
+  }
+
+  type PageList = {
+    id : string
+    name : string
+    open : boolean
+    pages : PageItem[]
+    url ?: string
+    enable ?: boolean
+  }
+
+  export default {
+    data() {
+      return {
+        list: [
+        ] as PageList[],
+      }
+    },
+    methods: {
+      triggerCollapse(_ : PageList, index : number) {
+        this.list[index].open = !this.list[index].open
+      },
+      goDetailPage(id : string, e : PageItem) {
+        if (e.enable == false) {
+          uni.showToast({
+            icon: 'none',
+            title: '暂不支持',
+          })
+          return
+        }
+
+        const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
+        uni.navigateTo({
+          url: `/pages/${id}/${url}`,
+        })
+      },
+    },
+  }
+</script>
+
+<style>
+  .item {
+    margin-bottom: 12px;
+  }
+
+  .down_arrow {
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    border-right: 1px #999 solid;
+    border-bottom: 1px #999 solid;
+    margin-top: -3px;
+    transition-property: transform;
+    transition-duration: 0.2s;
+  }
+</style>
\ No newline at end of file
--- a/pages/index.uvue
+++ b/pages/index.uvue