提交 c50bbd35 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat: page lifecycle

上级 efcda9a2
<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": [ //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": {
......
......@@ -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>
<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>
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)
})
})
<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>
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
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册