feat: page lifecycle

App.vue

-<script>
-  export default {
-    onLaunch: function() {
+<script lang="ts">
+import { state, setLifeCycleNum } from './store/index.uts'
+export default {
+  onLaunch: function () {
+    setLifeCycleNum(state.lifeCycleNum + 1000)
     console.log('App Launch')
 
     const performance: Performance = uni.getPerformance()
@@ -10,55 +12,62 @@
     })
     observer.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions)
   },
-    onShow: function() {
+  onShow: function () {
+    setLifeCycleNum(state.lifeCycleNum + 100)
     console.log('App Show')
   },
-    onHide: function() {
+  onHide: function () {
+    setLifeCycleNum(state.lifeCycleNum - 100)
     console.log('App Hide')
-    }
-  }
+  },
+  onLastPageBackPress(): boolean | null {
+    setLifeCycleNum(state.lifeCycleNum - 1000)
+    console.log('App onLastPageBackPress')
+    return null
+  },
+}
 </script>
 
 <style>
-  /* @font-face {
+/* @font-face {
     font-family: uniicons;
     font-weight: normal;
     font-style: normal;
     src: url('./static/fonts/uni.ttf') format('truetype');
   } */
 
-  .page {
+.page {
   padding: 15px;
-  }
+}
 
-  .uni-panel {
+.uni-panel {
   margin-bottom: 12px;
-  }
+}
 
-  .uni-panel-h {
+.uni-panel-h {
   background-color: #ffffff;
   flex-direction: row;
   align-items: center;
   padding: 12px;
-  }
+}
 
-  .uni-panel-h-on {
+.uni-panel-h-on {
   background-color: #f0f0f0;
-  }
+}
 
-  .uni-panel-text {
+.uni-panel-text {
   color: #000000;
   font-size: 14px;
   font-weight: normal;
-  }
+}
 
-  .uni-panel-icon {}
+.uni-panel-icon {}
 
-  .uni-panel-icon-on {
+.uni-panel-icon-on {
   transform: rotate(180deg);
-  }
+}
 
-  .uni-navigate-item {
+.uni-navigate-item {
   flex-direction: row;
   align-items: center;
   background-color: #FFFFFF;
@@ -67,28 +76,28 @@
   border-top-width: 1px;
   padding: 12px;
   justify-content: space-between;
-  }
+}
 
-  .uni-navigate-item:active {
+.uni-navigate-item:active {
   background-color: #f8f8f8;
-  }
+}
 
-  .uni-navigate-text {
+.uni-navigate-text {
   color: #000000;
   font-size: 12px;
   opacity: 0.8;
-  }
+}
 
-  .uni-navigate-icon {
+.uni-navigate-icon {
   margin-left: 15px;
   color: #999999;
   font-size: 14px;
   font-weight: normal;
-  }
+}
 
-  .split-title {
+.split-title {
   margin: 20px 0 5px;
   padding: 5px 0;
   border-bottom: 1px solid #dfdfdf;
-  }
+}
 </style>
\ No newline at end of file

pages.json

@@ -52,6 +52,11 @@
       "style": {
         "navigationBarTitleText": "v-slot"
       }
+    },{
+      "path": "pages/page-lifecycle/page-lifecycle",
+      "style": {
+        "navigationBarTitleText": "page-lifecycle"
+      }
     }
   ],
   "globalStyle": {

pages/index.uvue

@@ -16,6 +16,7 @@
 </template>
 
 <script lang="ts">
+  import { state } from '../store/index.uts'
   const STORAGE_KEY_PREFIX = 'INDEX-STATUS'
   let storageData : Array<string> = []
 
@@ -35,16 +36,7 @@
             name: '生命周期',
             open: false,
             pages: [
-              'beforeCreate',
-              'created',
-              'beforeMount',
-              'mounted',
-              // 'beforeUpdate',
-              // 'updated',
-              'beforeUnmount',
-              'unmounted',
-              'activated',
-              'deactivated',
+              'page-lifecycle',
             ]
           },
           {
@@ -157,7 +149,10 @@
         uni.navigateTo({
           url: `/pages/${e}/${e}`
         })
-      }
+      },
+      getLifeCycleNum(): number {
+        return state.lifeCycleNum
+      },
     }
   }
 </script>

pages/page-lifecycle/page-lifecycle.test.js

+const PAGE_PATH = '/pages/page-lifecycle/page-lifecycle'
+const HOME_PATH = '/pages/index'
+
+describe('page-lifecycle', () => {
+  let page
+	let lifeCycleNum
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(1000)
+  })
+  it('onLoad onShow onReady', async () => {
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1220)
+  })
+  it('onHide', async () => {
+    page = await program.navigateTo(HOME_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1210)
+		page = await program.navigateBack()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1220)
+  })
+  it('onUnload', async () => {
+    page = await program.redirectTo(HOME_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1120)
+  })
+  it('onBackPress', async () => {
+    page = await program.navigateTo(PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1240)
+    page = await program.navigateBack()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1130)
+  })
+	it('onLastPageBackPress', async () => {
+	  page = await program.navigateBack()
+	  lifeCycleNum = await page.callMethod('getLifeCycleNum')
+	  expect(lifeCycleNum).toBe(130)
+	})
+})
\ No newline at end of file

pages/page-lifecycle/page-lifecycle.uvue

+<template>
+	<view class="page">
+		<text>page lifecycle</text>
+	</view>
+</template>
+
+<script lang="ts">
+	import { state, setLifeCycleNum } from '../../store/index.uts'
+	export default {
+		onLoad() {
+			setLifeCycleNum(state.lifeCycleNum + 100)
+			console.log('Page onLoad')
+		},
+		onShow() {
+			setLifeCycleNum(state.lifeCycleNum + 10)
+			console.log('Page onShow')
+		},
+		onReady() {
+			setLifeCycleNum(state.lifeCycleNum + 10)
+			console.log('Page onReady')
+		},
+		onHide() {
+			setLifeCycleNum(state.lifeCycleNum - 10)
+			console.log('Page onHide')
+		},
+		onUnload() {
+			setLifeCycleNum(state.lifeCycleNum - 100)
+			console.log('Page onUnload')
+		},
+		onBackPress(options: Map<string, string>) : boolean | null {
+			setLifeCycleNum(state.lifeCycleNum - 10)
+			console.log('Page onBackPress',options)
+			return null
+		},
+		methods: {
+			getLifeCycleNum() : number {
+				return state.lifeCycleNum
+			}
+		},
+	}
+</script>
\ No newline at end of file

store/index.uts

+export type State = {
+    lifeCycleNum: number
+}
+export const state = reactive({
+    lifeCycleNum: 0
+} as State)
+
+export const setLifeCycleNum = (num: number) => {
+  state.lifeCycleNum = num
+}
\ No newline at end of file