feat: page lifecycle

App.vue

 <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,12 +12,15 @@ export default {
     // observer1.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions)
   },
   onShow: function () {
+    setLifeCycleNum(state.lifeCycleNum + 100)
     console.log("App Show");
   },
   onHide: function () {
+    setLifeCycleNum(state.lifeCycleNum - 100)
     console.log("App Hide");
   },
   onLastPageBackPress: function (): boolean | null {
+    setLifeCycleNum(state.lifeCycleNum - 1000)
     uni.showToast({
       title: "再按一次退出应用",
       position: "bottom",

pages.json

 {
-  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+  "pages": [
+    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
     {
       "path": "pages/tabBar/component",
       "style": {
@@ -146,6 +147,12 @@
         "navigationBarTitleText": "新UVUE页面2"
       }
     },
+    {
+      "path": "pages/API/page-lifecycle/page-lifecycle",
+      "style": {
+        "navigationBarTitleText": "页面生命周期"
+      }
+    },
     {
       "path": "pages/API/storage/storage",
       "style": {
@@ -440,176 +447,174 @@
       "style": {
         "navigationBarTitleText": "text-decoration-line"
       }
-    }, {
+    },
+    {
       "path": "pages/CSS/transition/transition",
       "style": {
         "navigationBarTitleText": "Transition"
       }
-    }, {
+    },
+    {
       "path": "pages/CSS/transform/transform",
       "style": {
         "navigationBarTitleText": "Transform"
       }
-    }, {
+    },
+    {
       "path": "pages/API/request/request",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/upload-file/upload-file",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/download-file/download-file",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/websocket-socketTask/websocket-socketTask",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/websocket-global/websocket-global",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/get-system-info/get-system-info",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/get-device-info/get-device-info",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/get-app-base-info/get-app-base-info",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/get-system-setting/get-system-setting",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/get-app-authorize-setting/get-app-authorize-setting",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/preview-image/preview-image",
       "style": {
         "navigationBarTitleText": "图片预览",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/component/scroll-view/scroll-view-refresher",
       "style": {
         "navigationBarTitleText": "scroll-view-refresher",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/component/list/list",
       "style": {
         "navigationBarTitleText": "列表到详情示例",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/get-network-type/get-network-type",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/component/list/detail/detail",
       "style": {
         "navigationBarTitleText": "详情示例",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/page-scroll-to/page-scroll-to",
       "style": {
         "navigationBarTitleText": "pageScrollTo",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/API/event-bus/event-bus",
       "style": {
         "navigationBarTitleText": "event-bus",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/template/drop-card/drop-card",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-
-    }, {
+    },
+    {
       "path": "pages/tabBar/template",
       "style": {
         "navigationBarTitleText": "模板",
         "enablePullDownRefresh": false
       }
-
-    }
-    ,{
-        "path" : "pages/component/long-list/long-list",
-        "style" :                                                                                    
-        {
-            "navigationBarTitleText": "长列表示例",
-            "enablePullDownRefresh": false
-        }
-        
-    }
-    ,{
-        "path" : "pages/component/long-list/detail/detail",
-        "style" :                                                                                    
-        {
-            "navigationBarTitleText": "详情示例",
-            "enablePullDownRefresh": false
-        }
-        
+    },
+    {
+      "path": "pages/component/long-list/long-list",
+      "style": {
+        "navigationBarTitleText": "长列表示例",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/component/long-list/detail/detail",
+      "style": {
+        "navigationBarTitleText": "详情示例",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/template/swiper-tiktok/swiper-tiktok",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
     }
-      ,{
-            "path" : "pages/template/swiper-tiktok/swiper-tiktok",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+  ],
   "globalStyle": {
     "pageOrientation": "portrait",
     "navigationBarTitleText": "Hello uniapp x",

pages/API/navigator/navigator.uvue

 <template>
-    <view>
-        <page-head title="navigate"></page-head>
-        <view class="uni-padding-wrap uni-common-mt">
-			<view style="flex-direction: row;">
-				<text style="width: 170px; ">onLoad触发时间戳：</text>
-				<text style="text-align: right">{{onLoadTime}}</text>
-			</view>
-			<view style="flex-direction: row;">
-				<text style="width: 170px; ">onReady触发时间戳：</text>
-				<text style="text-align: right">{{onReadyTime}}</text>
-			</view>
-			<view style="flex-direction: row;">
-				<text style="width: 170px; ">onUnload触发时间戳：</text>
-				<text style="text-align: right">退出页面时见控制台</text>
-			</view>
-			<view style="flex-direction: row;">
-				<text style="width: 170px; ">onShow触发时间戳：</text>
-				<text style="text-align: right">{{onShowTime}}</text>
-			</view>
-			<view style="flex-direction: row;">
-				<text style="width: 170px; ">onHide触发时间戳：</text>
-				<text style="text-align: right">{{onHideTime}}</text>
-			</view>
-            <view class="uni-btn-v">
-                <button @tap="navigateTo" class="uni-btn">跳转新页面，并传递数据</button>
-                <button @tap="navigateBack" class="uni-btn">返回上一页</button>
-                <button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
-                <button @tap="switchTab"  class="uni-btn">切换到模板选项卡</button>
-                <button @tap="reLaunch" class="uni-btn">关闭所有页面，打开首页</button>
-                <button @tap="customAnimation" class="uni-btn">使用自定义动画打开页面</button>
-                
-            </view>
-        </view>
+  <view>
+    <page-head title="navigate"></page-head>
+    <view class="uni-padding-wrap uni-common-mt">
+      <view style="flex-direction: row">
+        <text style="width: 170px">onLoad触发时间戳：</text>
+        <text style="text-align: right">{{ onLoadTime }}</text>
+      </view>
+      <view style="flex-direction: row">
+        <text style="width: 170px">onReady触发时间戳：</text>
+        <text style="text-align: right">{{ onReadyTime }}</text>
+      </view>
+      <view style="flex-direction: row">
+        <text style="width: 170px">onUnload触发时间戳：</text>
+        <text style="text-align: right">退出页面时见控制台</text>
+      </view>
+      <view style="flex-direction: row">
+        <text style="width: 170px">onShow触发时间戳：</text>
+        <text style="text-align: right">{{ onShowTime }}</text>
+      </view>
+      <view style="flex-direction: row">
+        <text style="width: 170px">onHide触发时间戳：</text>
+        <text style="text-align: right">{{ onHideTime }}</text>
+      </view>
+      <view class="uni-btn-v">
+        <button @tap="navigateTo" class="uni-btn">
+          跳转新页面，并传递数据
+        </button>
+        <button @tap="navigateBack" class="uni-btn">返回上一页</button>
+        <button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
+        <button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
+        <button @tap="reLaunch" class="uni-btn">关闭所有页面，打开首页</button>
+        <button @tap="customAnimation" class="uni-btn">
+          使用自定义动画打开页面
+        </button>
+      </view>
     </view>
+  </view>
 </template>
 <script lang="ts">
-    export default {
-        data() {
-            return {
-				onLoadTime:0,
-				onShowTime:0,
-				onReadyTime:0,
-				onHideTime:0,
-            }
-        },
-		onLoad() {
-			this.onLoadTime = Date.now();
-			console.log("onLoad",this.onLoadTime);
-		},
-		onShow() {
-			this.onShowTime = Date.now();
-			console.log("onShow",this.onShowTime);
-		},
-		onReady() {
-			this.onReadyTime = Date.now();
-			console.log("onReady",this.onReadyTime);
-		},
-		onHide() {
-			this.onHideTime = Date.now();
-			console.log("onHide",Date.now());
-		},
-		onUnload() {
-			console.log("onUnLoad",Date.now());
-		},
-        methods: {
-            navigateTo() {
-                uni.navigateTo({
-                    url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
-                })
-            },
-            navigateBack() {
-                uni.navigateBack({
-                    delta: 1
-                });
-            },
-            redirectTo() {
-                uni.redirectTo({
-                    url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
-                });
-            },
-            switchTab() {
-                uni.switchTab({
-                    url: '/pages/tabBar/template'
-                });
-            },
-            reLaunch() {
-                uni.reLaunch({
-                    url: '/pages/tabBar/component'
-                });
-            },
-            customAnimation() {
-                uni.navigateTo({
-                    url: '/pages/API/navigator/new-page/new-uvue-page-1?data=使用自定义动画打开页面',
-                    animationType: 'slide-in-bottom',
-                    animationDuration: 200
-                })
-            }
-        }
+import { setLifeCycleNum, state } from '@/store/index.uts'
+export default {
+  data() {
+    return {
+      onLoadTime: 0,
+      onShowTime: 0,
+      onReadyTime: 0,
+      onHideTime: 0,
     }
-</script>
\ No newline at end of file
+  },
+  onLoad() {
+    this.onLoadTime = Date.now()
+    console.log('onLoad', this.onLoadTime)
+  },
+  onShow() {
+    this.onShowTime = Date.now()
+    console.log('onShow', this.onShowTime)
+  },
+  onReady() {
+    this.onReadyTime = Date.now()
+    console.log('onReady', this.onReadyTime)
+  },
+  onHide() {
+    this.onHideTime = Date.now()
+    console.log('onHide', Date.now())
+  },
+  onUnload() {
+    console.log('onUnLoad', Date.now())
+  },
+  methods: {
+    navigateTo() {
+      uni.navigateTo({
+        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello',
+      })
+    },
+    navigateBack() {
+      uni.navigateBack({
+        delta: 1,
+      })
+    },
+    redirectTo() {
+      uni.redirectTo({
+        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello',
+      })
+    },
+    switchTab() {
+      uni.switchTab({
+        url: '/pages/tabBar/template',
+      })
+    },
+    reLaunch() {
+      uni.reLaunch({
+        url: '/pages/tabBar/component',
+      })
+    },
+    customAnimation() {
+      uni.navigateTo({
+        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=使用自定义动画打开页面',
+        animationType: 'slide-in-bottom',
+        animationDuration: 200,
+      })
+    },
+    setLifeCycleNum(num: number) {
+      setLifeCycleNum(num)
+    },
+    getLifeCycleNum(): number {
+      return state.lifeCycleNum
+    },
+  },
+}
+</script>

pages/API/page-lifecircle/page-lifecircle.uvue

-<template>
-	<view>
-		<text>onLoad触发时间</text>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		onLoad() {
-			// const d = Date.now();
-			// const s = d.toDateString()
-			console.log("onLoad");
-			
-		},
-		onShow() {
-			console.log("onShow");
-		},
-		onReady() {
-			console.log("onReady");
-		},
-		onHide() {
-			console.log("onHide");
-		},
-		onUnload() {
-			console.log("onUnLoad");
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>

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

+const PAGE_PATH = '/pages/API/page-lifecycle/page-lifecycle'
+const INTERMEDIATE_PAGE_PATH = '/pages/API/navigator/navigator'
+
+describe('page-lifecycle', () => {
+  let page
+  let lifeCycleNum
+  beforeAll(async () => {
+    page = await program.reLaunch(INTERMEDIATE_PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1100)
+
+    const initLifecycleNum = 0
+    await page.callMethod('setLifeCycleNum', initLifecycleNum)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(initLifecycleNum)
+
+    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('onHide', async () => {
+    page = await program.navigateTo(INTERMEDIATE_PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(110)
+    page = await program.navigateBack()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(120)
+  })
+  it('onUnload', async () => {
+    page = await program.redirectTo(INTERMEDIATE_PAGE_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(20)
+  })
+  it('onBackPress', async () => {
+    page = await program.navigateTo(PAGE_PATH)
+    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 () => {
+    page = await program.navigateBack()
+    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)
+  })
+})

pages/API/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>

store/index.uts

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