feat: page lifecycle

c50bbd35 · DCloud-WZF · efcda9a2 · c50bbd35 · c50bbd35 · c50bbd35
7 changed file
--- a/App.vue
+++ b/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",

--- a/pages.json
+++ b/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,174 +447,172 @@
      "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" :                                                                                    
+    },
    {
+      "path": "pages/component/long-list/long-list",
+      "style": {
        "navigationBarTitleText": "长列表示例",
        "enablePullDownRefresh": false
      }
-        
-    }
-    ,{
-        "path" : "pages/component/long-list/detail/detail",
-        "style" :                                                                                    
+    },
    {
+      "path": "pages/component/long-list/detail/detail",
+      "style": {
        "navigationBarTitleText": "详情示例",
        "enablePullDownRefresh": false
      }
-        
-    }
-      ,{
-            "path" : "pages/template/swiper-tiktok/swiper-tiktok",
-            "style" :                                                                                    
+    },
    {
+      "path": "pages/template/swiper-tiktok/swiper-tiktok",
+      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
      }
-            
    }
  ],
  "globalStyle": {

--- a/pages/API/navigator/navigator.uvue
+++ b/pages/API/navigator/navigator.uvue
@@ -2,100 +2,110 @@
  <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 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 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>
+      <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 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 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="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>
-                
+        <button @tap="customAnimation" class="uni-btn">
+          使用自定义动画打开页面
+        </button>
      </view>
    </view>
  </view>
 </template>
 <script lang="ts">
-    export default {
+import { setLifeCycleNum, state } from '@/store/index.uts'
+export default {
  data() {
    return {
-				onLoadTime:0,
-				onShowTime:0,
-				onReadyTime:0,
-				onHideTime:0,
+      onLoadTime: 0,
+      onShowTime: 0,
+      onReadyTime: 0,
+      onHideTime: 0,
    }
  },
  onLoad() {
-			this.onLoadTime = Date.now();
-			console.log("onLoad",this.onLoadTime);
+    this.onLoadTime = Date.now()
+    console.log('onLoad', this.onLoadTime)
  },
  onShow() {
-			this.onShowTime = Date.now();
-			console.log("onShow",this.onShowTime);
+    this.onShowTime = Date.now()
+    console.log('onShow', this.onShowTime)
  },
  onReady() {
-			this.onReadyTime = Date.now();
-			console.log("onReady",this.onReadyTime);
+    this.onReadyTime = Date.now()
+    console.log('onReady', this.onReadyTime)
  },
  onHide() {
-			this.onHideTime = Date.now();
-			console.log("onHide",Date.now());
+    this.onHideTime = Date.now()
+    console.log('onHide', Date.now())
  },
  onUnload() {
-			console.log("onUnLoad",Date.now());
+    console.log('onUnLoad', Date.now())
  },
  methods: {
    navigateTo() {
      uni.navigateTo({
-                    url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
+        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello',
      })
    },
    navigateBack() {
      uni.navigateBack({
-                    delta: 1
-                });
+        delta: 1,
+      })
    },
    redirectTo() {
      uni.redirectTo({
-                    url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello'
-                });
+        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=Hello',
+      })
    },
    switchTab() {
      uni.switchTab({
-                    url: '/pages/tabBar/template'
-                });
+        url: '/pages/tabBar/template',
+      })
    },
    reLaunch() {
      uni.reLaunch({
-                    url: '/pages/tabBar/component'
-                });
+        url: '/pages/tabBar/component',
+      })
    },
    customAnimation() {
      uni.navigateTo({
        url: '/pages/API/navigator/new-page/new-uvue-page-1?data=使用自定义动画打开页面',
        animationType: 'slide-in-bottom',
-                    animationDuration: 200
+        animationDuration: 200,
      })
-            }
-        }
-    }
+    },
+    setLifeCycleNum(num: number) {
+      setLifeCycleNum(num)
+    },
+    getLifeCycleNum(): number {
+      return state.lifeCycleNum
+    },
+  },
+}
 </script>
--- a/pages/API/page-lifecircle/page-lifecircle.uvue
+++ b/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>
--- a/pages/API/page-lifecycle/page-lifecycle.test.js
+++ b/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)
+  })
+})
--- a/pages/API/page-lifecycle/page-lifecycle.uvue
+++ b/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>
--- a/store/index.uts
+++ b/store/index.uts
 export type State = {
  colorIndex: number,
-    currentColor: string
+  currentColor: string,
+  lifeCycleNum: number
 }

 const colorList: string[] = ['#FF0000', '#00FF00', '#0000FF']

 export const state = reactive({
  colorIndex: 0,
-    currentColor: colorList[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
+}