From 97155cf5dcb0f1bf6263b442341a0e8a40f8e1c1 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Fri, 30 Jun 2023 10:08:37 +0800
Subject: [PATCH] feat: page lifecycle

---
 App.vue                                     | 153 +++++++++++---------
 pages.json                                  |   5 +
 pages/index.uvue                            |  17 +--
 pages/page-lifecycle/page-lifecycle.test.js |  41 ++++++
 pages/page-lifecycle/page-lifecycle.uvue    |  41 ++++++
 store/index.uts                             |  10 ++
 6 files changed, 184 insertions(+), 83 deletions(-)
 create mode 100644 pages/page-lifecycle/page-lifecycle.test.js
 create mode 100644 pages/page-lifecycle/page-lifecycle.uvue
 create mode 100644 store/index.uts

diff --git a/App.vue b/App.vue
index 11756b6..ee151ba 100644
--- a/App.vue
+++ b/App.vue
@@ -1,94 +1,103 @@
-<script>
-  export default {
-    onLaunch: function() {
-      console.log('App Launch')
+<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()
-      const observer: PerformanceObserver = performance.createObserver((entryList: PerformanceObserverEntryList) => {
-        console.log("observer:entryList.getEntries()")
-        console.log(entryList.getEntries())
-      })
-      observer.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions)
-    },
-    onShow: function() {
-      console.log('App Show')
-    },
-    onHide: function() {
-      console.log('App Hide')
-    }
-  }
+    const performance: Performance = uni.getPerformance()
+    const observer: PerformanceObserver = performance.createObserver((entryList: PerformanceObserverEntryList) => {
+      console.log("observer:entryList.getEntries()")
+      console.log(entryList.getEntries())
+    })
+    observer.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(): 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 {
-    padding: 15px;
-  }
+.page {
+  padding: 15px;
+}
 
-  .uni-panel {
-    margin-bottom: 12px;
-  }
+.uni-panel {
+  margin-bottom: 12px;
+}
 
-  .uni-panel-h {
-    background-color: #ffffff;
-    flex-direction: row;
-    align-items: center;
-    padding: 12px;
-  }
+.uni-panel-h {
+  background-color: #ffffff;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+}
 
-  .uni-panel-h-on {
-    background-color: #f0f0f0;
-  }
+.uni-panel-h-on {
+  background-color: #f0f0f0;
+}
 
-  .uni-panel-text {
-    color: #000000;
-    font-size: 14px;
-    font-weight: normal;
-  }
+.uni-panel-text {
+  color: #000000;
+  font-size: 14px;
+  font-weight: normal;
+}
 
-  .uni-panel-icon {}
+.uni-panel-icon {}
 
-  .uni-panel-icon-on {
-    transform: rotate(180deg);
-  }
+.uni-panel-icon-on {
+  transform: rotate(180deg);
+}
 
-  .uni-navigate-item {
-    flex-direction: row;
-    align-items: center;
-    background-color: #FFFFFF;
-    border-top-style: solid;
-    border-top-color: #f0f0f0;
-    border-top-width: 1px;
-    padding: 12px;
-    justify-content: space-between;
-  }
+.uni-navigate-item {
+  flex-direction: row;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-top-style: solid;
+  border-top-color: #f0f0f0;
+  border-top-width: 1px;
+  padding: 12px;
+  justify-content: space-between;
+}
 
-  .uni-navigate-item:active {
-    background-color: #f8f8f8;
-  }
+.uni-navigate-item:active {
+  background-color: #f8f8f8;
+}
 
-  .uni-navigate-text {
-    color: #000000;
-    font-size: 12px;
-    opacity: 0.8;
-  }
+.uni-navigate-text {
+  color: #000000;
+  font-size: 12px;
+  opacity: 0.8;
+}
 
-  .uni-navigate-icon {
-    margin-left: 15px;
-    color: #999999;
-    font-size: 14px;
-    font-weight: normal;
-  }
+.uni-navigate-icon {
+  margin-left: 15px;
+  color: #999999;
+  font-size: 14px;
+  font-weight: normal;
+}
 
-  .split-title {
-    margin: 20px 0 5px;
-    padding: 5px 0;
-    border-bottom: 1px solid #dfdfdf;
-  }
+.split-title {
+  margin: 20px 0 5px;
+  padding: 5px 0;
+  border-bottom: 1px solid #dfdfdf;
+}
 </style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index cc1fbb6..a2aa0d7 100644
--- a/pages.json
+++ b/pages.json
@@ -52,6 +52,11 @@
       "style": {
         "navigationBarTitleText": "v-slot"
       }
+    },{
+      "path": "pages/page-lifecycle/page-lifecycle",
+      "style": {
+        "navigationBarTitleText": "page-lifecycle"
+      }
     }
   ],
   "globalStyle": {
diff --git a/pages/index.uvue b/pages/index.uvue
index e04ec1c..4d7162b 100644
--- a/pages/index.uvue
+++ b/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>
diff --git a/pages/page-lifecycle/page-lifecycle.test.js b/pages/page-lifecycle/page-lifecycle.test.js
new file mode 100644
index 0000000..15910ae
--- /dev/null
+++ b/pages/page-lifecycle/page-lifecycle.test.js
@@ -0,0 +1,41 @@
+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
diff --git a/pages/page-lifecycle/page-lifecycle.uvue b/pages/page-lifecycle/page-lifecycle.uvue
new file mode 100644
index 0000000..bc5bdc4
--- /dev/null
+++ b/pages/page-lifecycle/page-lifecycle.uvue
@@ -0,0 +1,41 @@
+<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
diff --git a/store/index.uts b/store/index.uts
new file mode 100644
index 0000000..458eb06
--- /dev/null
+++ b/store/index.uts
@@ -0,0 +1,10 @@
+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
-- 
GitLab