feat: navigator & lifecycle

pages.json

@@ -121,13 +121,13 @@
       "style": {
         "navigationBarTitleText": "大图测试"
       }
-    },
-	{
-	  "path": "pages/component/video/video",
-	  "style": {
-	    "navigationBarTitleText": "video"
-	  }
-	},
+    },
+    {
+      "path": "pages/component/video/video",
+      "style": {
+        "navigationBarTitleText": "video"
+      }
+    },
     {
       "path": "pages/component/web-view/web-view",
       "style": {
@@ -154,9 +154,16 @@
       }
     },
     {
-      "path": "pages/API/navigator/new-page/new-page",
+      "path": "pages/API/navigator/new-page/new-page-1",
       "style": {
-        "navigationBarTitleText": "新页面"
+        "navigationBarTitleText": "新页面-1"
+      }
+    },
+    {
+      "path": "pages/API/navigator/new-page/new-page-2",
+      "style": {
+        "navigationBarTitleText": "新页面-2",
+        "enablePullDownRefresh": true
       }
     },
     {
@@ -592,24 +599,24 @@
         "navigationBarTitleText": "详情示例"
       }
     },
-    {
-      "path": "pages/template/swiper-vertical-video/swiper-vertical-video",
-      "style": {
-        "navigationBarTitleText": ""
-      }
-    },
-    {
-      "path": "pages/template/custom-pull-page/custom-pull-page",
-      "style": {
-        "navigationBarTitleText": "自定义下拉上拉效果"
-      }
-    },
-    {
-      "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
-      "style": {
-        "navigationStyle": "custom"
-      }
-    },
+    {
+      "path": "pages/template/swiper-vertical-video/swiper-vertical-video",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/template/custom-pull-page/custom-pull-page",
+      "style": {
+        "navigationBarTitleText": "自定义下拉上拉效果"
+      }
+    },
+    {
+      "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/API/get-battery-info/get-battery-info",
       "style": {

pages/API/navigator/navigator.uvue

@@ -77,17 +77,101 @@ export default {
     console.log('onUnload', Date.now())
   },
   methods: {
+    reLaunch() {
+      uni.reLaunch({
+        url: '/pages/tabBar/component',
+        success(result) {
+          console.log('reLaunch success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+        fail(error) {
+          console.log('reLaunch fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
+        },
+        complete(result) {
+          console.log('reLaunch complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+      })
+    },
     navigateTo() {
       uni.navigateTo({
-        url: '/pages/API/navigator/new-page/new-page?data=Hello',
+        url: '/pages/API/navigator/new-page/new-page-1?data=Hello',
+        success(result) {
+          console.log('navigateTo success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+        fail(error) {
+          console.log('navigateTo fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
+        },
+        complete(result) {
+          console.log('navigateTo complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+      })
+    },
+    navigateToErrorPage() {
+      uni.navigateTo({
+        url: '/pages/error-page/error-page',
         success(result) {
           console.log('navigateTo success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
         },
         fail(error) {
           console.log('navigateTo fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
         complete(result) {
           console.log('navigateTo complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+      })
+    },
+    navigateToDebounce() {
+      uni.navigateTo({
+        url: '/pages/API/navigator/new-page/new-page-1?data=debounce',
+        success(result) {
+          console.log('navigateTo success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+        fail(error) {
+          console.log('navigateTo fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
+        },
+        complete(result) {
+          console.log('navigateTo complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+      })
+      uni.navigateTo({
+        url: '/pages/API/navigator/new-page/new-page-1?data=debounce',
+        success(result) {
+          console.log('navigateTo success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
+        },
+        fail(error) {
+          console.log('navigateTo fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
+        },
+        complete(result) {
+          console.log('navigateTo complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
       })
     },
@@ -95,26 +179,38 @@ export default {
       uni.navigateBack({
         success(result) {
           console.log('navigateBack success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail(error) {
           console.log('navigateBack fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete(result) {
           console.log('navigateBack complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
       })
     },
     redirectTo() {
       uni.redirectTo({
-        url: '/pages/API/navigator/new-page/new-page?data=Hello',
+        url: '/pages/API/navigator/new-page/new-page-1?data=Hello',
         success(result) {
           console.log('redirectTo success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail(error) {
           console.log('redirectTo fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete(result) {
           console.log('redirectTo complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
       })
     },
@@ -123,32 +219,24 @@ export default {
         url: '/pages/tabBar/template',
         success(result) {
           console.log('switchTab success', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail(error) {
           console.log('switchTab fail', error.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete(result) {
           console.log('switchTab complete', result.errMsg)
-        },
-      })
-    },
-    reLaunch() {
-      uni.reLaunch({
-        url: '/pages/tabBar/component',
-        success(result) {
-          console.log('reLaunch success', result.errMsg)
-        },
-        fail(error) {
-          console.log('reLaunch fail', error.errMsg)
-        },
-        complete(result) {
-          console.log('reLaunch complete', result.errMsg)
+          // 自动化测试
+          setLifeCycleNum(state.lifeCycleNum + 1)
         },
       })
     },
     customAnimation() {
       uni.navigateTo({
-        url: '/pages/API/navigator/new-page/new-page?data=自定义动画打开页面',
+        url: '/pages/API/navigator/new-page/new-page-1?data=自定义动画打开页面',
         animationType: 'slide-in-bottom',
         animationDuration: 200,
       })

pages/API/navigator/new-page/new-page-1.uvue

+<template>
+  <view class="uni-padding-wrap">
+    <text>onLoad 接收到参数</text>
+    <text>data: {{ data }}</text>
+  </view>
+</template>
+<script lang="ts">
+import { state } from '@/store/index.uts'
+export default {
+  data() {
+    return {
+      data: '',
+    }
+  },
+  onLoad(options: OnLoadOptions) {
+    console.log('new-page2 onLoad', options)
+    if (options.has('data')) {
+      this.data = options.get('data')!
+    }
+  },
+  methods: {
+    // 自动化测试
+    getLifeCycleNum(): number {
+      return state.lifeCycleNum
+    },
+  },
+}
+</script>

pages/API/navigator/new-page/new-page.test.js → pages/API/navigator/new-page/new-page-2.test.js

-const PAGE_PATH = '/pages/API/navigator/new-page/new-page'
+const PAGE_PATH = '/pages/API/navigator/new-page/new-page-2'
 const INTERMEDIATE_PAGE_PATH = '/pages/API/navigator/navigator'
+let page
+let lifeCycleNum
 
-describe('page-lifecycle', () => {
-  let page
-  let lifeCycleNum
-  beforeAll(async () => {
+describe('app-lifecycle', () => {
+  it('onLaunch onShow', async () => {
     page = await program.reLaunch(INTERMEDIATE_PAGE_PATH)
+    await page.waitFor(1000)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
     expect(lifeCycleNum).toBe(1100)
+  })
+  it('onLastPageBackPress', async () => {
+    page = await program.navigateBack()
+    await page.waitFor(1000)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(100)
 
-    const initLifecycleNum = 0
-    await page.callMethod('setLifeCycleNum', initLifecycleNum)
+    await page.callMethod('setLifeCycleNum', 0)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(initLifecycleNum)
+    expect(lifeCycleNum).toBe(0)
+  })
+})
 
+describe('page-lifecycle', () => {
+  it('onLoad onShow onReady', async () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor(1000)
-  })
-  it('onLoad onShow onReady', async () => {
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
     expect(lifeCycleNum).toBe(120)
   })
+  it('onPullDownRefresh', async () => {
+    await page.callMethod('pullDownRefresh')
+    await page.waitFor(1500)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(130)
+  })
+  // TODO: pageScrollTo 无法触发 onReachBottom, 待修复后调整 lifeCycleNum
+  it('onPageScroll onReachBottom', async () => {
+    await program.pageScrollTo(2000)
+    const data = await page.data()
+    expect(data.isScrolled).toBe(true)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(130)
+  })
   it('onHide', async () => {
     page = await program.navigateTo(INTERMEDIATE_PAGE_PATH)
+    await page.waitFor(1000)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(110)
+    expect(lifeCycleNum).toBe(120)
     page = await program.navigateBack()
+    await page.waitFor(1000)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(120)
+    expect(lifeCycleNum).toBe(130)
   })
   it('onUnload', async () => {
     page = await program.redirectTo(INTERMEDIATE_PAGE_PATH)
+    await page.waitFor(1000)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(20)
+    expect(lifeCycleNum).toBe(30)
   })
   it('onBackPress', async () => {
     page = await program.navigateTo(PAGE_PATH)
+    await page.waitFor(1000)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(140)
-    page = await program.navigateBack()
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(30)
-  })
-  it('onLastPageBackPress', async () => {
+    expect(lifeCycleNum).toBe(150)
     page = await program.navigateBack()
+    await page.waitFor(1000)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(-970)
-
-    const resetLifecycleNum = 1100
-    await page.callMethod('setLifeCycleNum', resetLifecycleNum)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(resetLifecycleNum)
+    expect(lifeCycleNum).toBe(40)
+    await page.callMethod('setLifeCycleNum', 0)
   })
 })

pages/API/navigator/new-page/new-page.uvue → pages/API/navigator/new-page/new-page-2.uvue

 <template>
-  <view class="uni-padding-wrap">
-    <text>onLoad 接收到参数</text>
-    <text>data: {{ data }}</text>
+  <view class="uni-padding-wrap container">
+		<button @click="pageScrollTo">scrollToBottom</button>
   </view>
 </template>
 <script lang="ts">
@@ -9,14 +8,10 @@ import { state, setLifeCycleNum } from '@/store/index.uts'
 export default {
   data() {
     return {
-      data: '',
+      isScrolled: false,
     }
   },
-  onLoad(options: OnLoadOptions) {
-    console.log('new-page onLoad', options)
-    if(options.has('data')) {
-      this.data = options.get('data')!
-    }
+  onLoad(_: OnLoadOptions) {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 100)
   },
@@ -28,15 +23,29 @@ export default {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   },
-  onHide() {
+  onPullDownRefresh() {
+    console.log('onPullDownRefresh')
     // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 10)
+    setLifeCycleNum(state.lifeCycleNum + 10)
+  },
+  onPageScroll(_) {
+    // 自动化测试
+    this.isScrolled = true
+  },
+  onReachBottom() {
+    console.log('onReachBottom')
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 10)
   },
   onBackPress(_: OnBackPressOptions): boolean | null {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 10)
     return null
   },
+  onHide() {
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum - 10)
+  },
   onUnload() {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 100)
@@ -50,6 +59,29 @@ export default {
     setLifeCycleNum(num: number) {
       setLifeCycleNum(num)
     },
+    pullDownRefresh() {
+      uni.startPullDownRefresh({
+        success() {
+          setTimeout(() => {
+            uni.stopPullDownRefresh()
+          }, 1000)
+        },
+      })
+    },
+		pageScrollTo(){
+			uni.pageScrollTo({
+				scrollTop: 1200,
+				complete(res){
+					console.warn('pageScrollTo', res)
+				}
+			})
+		}
   },
 }
 </script>
+
+<style>
+.container {
+  height: 1200px;
+}
+</style>

store/index.uts

-export type State = {
-  colorIndex: number,
-  currentColor: string,
-  lifeCycleNum: number
+class State {
+  constructor(public lifeCycleNum: number) {
+  }
 }
 
-const colorList: string[] = ['#FF0000', '#00FF00', '#0000FF']
-
-export const state = reactive({
-  colorIndex: 0,
-  currentColor: colorList[0],
-  lifeCycleNum: 0
-} as State)
-
-export const setColorIndex = (index: number) => {
-  state.colorIndex = index
-  state.currentColor = colorList[index]
-}
+export const state = reactive(new State(0))
 
 export const setLifeCycleNum = (num: number) => {
   state.lifeCycleNum = num