Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 c50bbd35 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat: page lifecycle

上级 efcda9a2
隐藏空白更改
内联 并排
Showing with 289 addition and 207 deletion
App.vue
浏览文件 @ c50bbd35
<script lang="ts"> <script lang="ts">
import { state, setLifeCycleNum } from './store/index.uts'
export default { export default {
onLaunch: function () { onLaunch: function () {
setLifeCycleNum(state.lifeCycleNum + 1000)
console.log("App Launch"); console.log("App Launch");
// const performance: Performance = uni.getPerformance() // const performance: Performance = uni.getPerformance()
...@@ -10,12 +12,15 @@ export default { ...@@ -10,12 +12,15 @@ export default {
// observer1.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions) // observer1.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions)
}, },
onShow: function () { onShow: function () {
setLifeCycleNum(state.lifeCycleNum + 100)
console.log("App Show"); console.log("App Show");
}, },
onHide: function () { onHide: function () {
setLifeCycleNum(state.lifeCycleNum - 100)
console.log("App Hide"); console.log("App Hide");
}, },
onLastPageBackPress: function (): boolean | null { onLastPageBackPress: function (): boolean | null {
setLifeCycleNum(state.lifeCycleNum - 1000)
uni.showToast({ uni.showToast({
title: "再按一次退出应用", title: "再按一次退出应用",
position: "bottom", position: "bottom",
......
pages.json
浏览文件 @ c50bbd35
{ {
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/tabBar/component", "path": "pages/tabBar/component",
"style": { "style": {
...@@ -146,6 +147,12 @@ ...@@ -146,6 +147,12 @@
"navigationBarTitleText": "新UVUE页面2" "navigationBarTitleText": "新UVUE页面2"
} }
}, },
{
"path": "pages/API/page-lifecycle/page-lifecycle",
"style": {
"navigationBarTitleText": "页面生命周期"
}
},
{ {
"path": "pages/API/storage/storage", "path": "pages/API/storage/storage",
"style": { "style": {
...@@ -440,176 +447,174 @@ ...@@ -440,176 +447,174 @@
"style": { "style": {
"navigationBarTitleText": "text-decoration-line" "navigationBarTitleText": "text-decoration-line"
} }
}, { },
{
"path": "pages/CSS/transition/transition", "path": "pages/CSS/transition/transition",
"style": { "style": {
"navigationBarTitleText": "Transition" "navigationBarTitleText": "Transition"
} }
}, { },
{
"path": "pages/CSS/transform/transform", "path": "pages/CSS/transform/transform",
"style": { "style": {
"navigationBarTitleText": "Transform" "navigationBarTitleText": "Transform"
} }
}, { },
{
"path": "pages/API/request/request", "path": "pages/API/request/request",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/upload-file/upload-file", "path": "pages/API/upload-file/upload-file",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/download-file/download-file", "path": "pages/API/download-file/download-file",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/websocket-socketTask/websocket-socketTask", "path": "pages/API/websocket-socketTask/websocket-socketTask",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/websocket-global/websocket-global", "path": "pages/API/websocket-global/websocket-global",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/get-system-info/get-system-info", "path": "pages/API/get-system-info/get-system-info",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/get-device-info/get-device-info", "path": "pages/API/get-device-info/get-device-info",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/get-app-base-info/get-app-base-info", "path": "pages/API/get-app-base-info/get-app-base-info",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/get-system-setting/get-system-setting", "path": "pages/API/get-system-setting/get-system-setting",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/get-app-authorize-setting/get-app-authorize-setting", "path": "pages/API/get-app-authorize-setting/get-app-authorize-setting",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/preview-image/preview-image", "path": "pages/API/preview-image/preview-image",
"style": { "style": {
"navigationBarTitleText": "图片预览", "navigationBarTitleText": "图片预览",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/component/scroll-view/scroll-view-refresher", "path": "pages/component/scroll-view/scroll-view-refresher",
"style": { "style": {
"navigationBarTitleText": "scroll-view-refresher", "navigationBarTitleText": "scroll-view-refresher",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/component/list/list", "path": "pages/component/list/list",
"style": { "style": {
"navigationBarTitleText": "列表到详情示例", "navigationBarTitleText": "列表到详情示例",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/get-network-type/get-network-type", "path": "pages/API/get-network-type/get-network-type",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/component/list/detail/detail", "path": "pages/component/list/detail/detail",
"style": { "style": {
"navigationBarTitleText": "详情示例", "navigationBarTitleText": "详情示例",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/API/page-scroll-to/page-scroll-to", "path": "pages/API/page-scroll-to/page-scroll-to",
"style": { "style": {
"navigationBarTitleText": "pageScrollTo", "navigationBarTitleText": "pageScrollTo",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { },
{
"path": "pages/API/event-bus/event-bus", "path": "pages/API/event-bus/event-bus",
"style": { "style": {
"navigationBarTitleText": "event-bus", "navigationBarTitleText": "event-bus",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { },
{
"path": "pages/template/drop-card/drop-card", "path": "pages/template/drop-card/drop-card",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}, { {
"path": "pages/tabBar/template", "path": "pages/tabBar/template",
"style": { "style": {
"navigationBarTitleText": "模板", "navigationBarTitleText": "模板",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
} {
,{ "path": "pages/component/long-list/long-list",
"path" : "pages/component/long-list/long-list", "style": {
"style" : "navigationBarTitleText": "长列表示例",
{ "enablePullDownRefresh": false
"navigationBarTitleText": "长列表示例", }
"enablePullDownRefresh": false },
} {
"path": "pages/component/long-list/detail/detail",
} "style": {
,{ "navigationBarTitleText": "详情示例",
"path" : "pages/component/long-list/detail/detail", "enablePullDownRefresh": false
"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": { "globalStyle": {
"pageOrientation": "portrait", "pageOrientation": "portrait",
"navigationBarTitleText": "Hello uniapp x", "navigationBarTitleText": "Hello uniapp x",
......
pages/API/navigator/navigator.uvue
浏览文件 @ c50bbd35
<template> <template>
<view> <view>
<page-head title="navigate"></page-head> <page-head title="navigate"></page-head>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view style="flex-direction: row;"> <view style="flex-direction: row">
<text style="width: 170px; ">onLoad触发时间戳：</text> <text style="width: 170px">onLoad触发时间戳：</text>
<text style="text-align: right">{{onLoadTime}}</text> <text style="text-align: right">{{ onLoadTime }}</text>
</view> </view>
<view style="flex-direction: row;"> <view style="flex-direction: row">
<text style="width: 170px; ">onReady触发时间戳：</text> <text style="width: 170px">onReady触发时间戳：</text>
<text style="text-align: right">{{onReadyTime}}</text> <text style="text-align: right">{{ onReadyTime }}</text>
</view> </view>
<view style="flex-direction: row;"> <view style="flex-direction: row">
<text style="width: 170px; ">onUnload触发时间戳：</text> <text style="width: 170px">onUnload触发时间戳：</text>
<text style="text-align: right">退出页面时见控制台</text> <text style="text-align: right">退出页面时见控制台</text>
</view> </view>
<view style="flex-direction: row;"> <view style="flex-direction: row">
<text style="width: 170px; ">onShow触发时间戳：</text> <text style="width: 170px">onShow触发时间戳：</text>
<text style="text-align: right">{{onShowTime}}</text> <text style="text-align: right">{{ onShowTime }}</text>
</view> </view>
<view style="flex-direction: row;"> <view style="flex-direction: row">
<text style="width: 170px; ">onHide触发时间戳：</text> <text style="width: 170px">onHide触发时间戳：</text>
<text style="text-align: right">{{onHideTime}}</text> <text style="text-align: right">{{ onHideTime }}</text>
</view> </view>
<view class="uni-btn-v"> <view class="uni-btn-v">
<button @tap="navigateTo" class="uni-btn">跳转新页面，并传递数据</button> <button @tap="navigateTo" class="uni-btn">
<button @tap="navigateBack" class="uni-btn">返回上一页</button> 跳转新页面，并传递数据
<button @tap="redirectTo" class="uni-btn">在当前页面打开</button> </button>
<button @tap="switchTab" class="uni-btn">切换到模板选项卡</button> <button @tap="navigateBack" class="uni-btn">返回上一页</button>
<button @tap="reLaunch" class="uni-btn">关闭所有页面，打开首页</button> <button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
<button @tap="customAnimation" class="uni-btn">使用自定义动画打开页面</button> <button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
<button @tap="reLaunch" class="uni-btn">关闭所有页面，打开首页</button>
</view> <button @tap="customAnimation" class="uni-btn">
</view> 使用自定义动画打开页面
</button>
</view>
</view> </view>
</view>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { import { setLifeCycleNum, state } from '@/store/index.uts'
data() { export default {
return { data() {
onLoadTime:0, return {
onShowTime:0, onLoadTime: 0,
onReadyTime:0, onShowTime: 0,
onHideTime: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
})
}
}
} }
</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 已删除 100644 → 0
浏览文件 @ efcda9a2
<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 0 → 100644
浏览文件 @ c50bbd35
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 0 → 100644
浏览文件 @ c50bbd35
<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
浏览文件 @ c50bbd35
export type State = { export type State = {
colorIndex: number, colorIndex: number,
currentColor: string currentColor: string,
lifeCycleNum: number
} }
const colorList: string[] = ['#FF0000', '#00FF00', '#0000FF'] const colorList: string[] = ['#FF0000', '#00FF00', '#0000FF']
export const state = reactive({ export const state = reactive({
colorIndex: 0, colorIndex: 0,
currentColor: colorList[0] currentColor: colorList[0],
lifeCycleNum: 0
} as State) } as State)
export const setColorIndex = (index: number) => { export const setColorIndex = (index: number) => {
state.colorIndex = index state.colorIndex = index
state.currentColor = colorList[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.
先完成此消息的编辑！
想要评论请 注册 或