Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 356
Star 3
Fork 7
H
hello-uvue
提交 8e97c0c5 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

refactor(lifecycle): component

上级 b8675d88
隐藏空白更改
内联 并排
Showing with 208 addition and 359 deletion
components/CompositionAPILifecycle.uvue 已删除 100644 → 0
浏览文件 @ b8675d88
<template>
title: {{ title }}
<button class="component-lifecycle-btn uni-common-mt" @click="updateTitle">
updateTitle
</button>
</template>
<script setup>
import { state, setLifeCycleNum } from '../store/index.uts'
const title = ref('component for composition API lifecycle test')
const emit = defineEmits<{
(e : 'updateIsScroll', val : boolean) : void
}>()
onLoad((_ : OnLoadOptions) => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100)
})
onPageShow(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onReady(() => {
// 自动化测试
// TODO: onReady 未触发
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPullDownRefresh(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPageScroll((_) => {
// 自动化测试
emit('updateIsScroll', true)
})
onReachBottom(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onBackPress((_ : OnBackPressOptions) : boolean | null => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
return null
})
onPageHide(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
})
onUnload(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
})
onBeforeMount(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test mounted')
})
onMounted(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test mounted')
})
onBeforeUpdate(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeUpdate')
})
onUpdated(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test updated')
})
onBeforeUnmount(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test beforeUnmount')
})
onUnmounted(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test unmounted')
})
// TODO: app-android 不触发
onActivated(() => { })
// TODO: app-android 不触发
onDeactivated(() => { })
const updateTitle = () => {
title.value = 'component for lifecycle test updated'
}
</script>
\ No newline at end of file
pages.json
浏览文件 @ 8e97c0c5
......@@ -292,9 +292,17 @@
}
},
{
"path": "pages/lifecycle/component/component",
"path": "pages/lifecycle/component/component-options",
"style": {
"navigationBarTitleText": "component-lifecycle"
"navigationBarTitleText": "component-lifecycle 选项式 API",
"enablePullDownRefresh": true
}
},
{
"path": "pages/lifecycle/component/component-composition",
"style": {
"navigationBarTitleText": "component-lifecycle 组合式 API",
"enablePullDownRefresh": true
}
},
{
......@@ -759,20 +767,6 @@
"navigationBarTitleText": "onScopeDispose"
}
},
{
"path": "pages/composition-api/lifecycle/page-lifecycle/page-lifecycle",
"style": {
"navigationBarTitleText": "页面生命周期",
"enablePullDownRefresh": true
}
},
{
"path": "pages/composition-api/lifecycle/component-lifecycle/component-lifecycle",
"style": {
"navigationBarTitleText": "组件生命周期",
"enablePullDownRefresh": true
}
},
{
"path": "pages/composition-api/dependency-injection/provide/provide",
"style": {
......
pages/composition-api/lifecycle/page-lifecycle/page-lifecycle.test.js 已删除 100644 → 0
浏览文件 @ b8675d88
const PAGE_PATH = '/pages/composition-api/lifecycle/page-lifecycle/page-lifecycle'
const HOME_PATH = '/pages/tab-bar/options-api'
const INTER_PAGE_PATH = '/pages/app-instance/index/index'
let page
let lifeCycleNum
describe('page-lifecycle', () => {
beforeAll(async () => {
page = await program.reLaunch(HOME_PATH)
await page.waitFor(700)
await page.callMethod('setLifeCycleNum', 0)
});
afterAll(async () => {
const resetLifecycleNum = 1100
await page.callMethod('setLifeCycleNum', resetLifecycleNum)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(resetLifecycleNum)
})
it('onLoad onShow onReady onResize', async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(700)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(120)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('onPullDownRefresh', async () => {
await page.callMethod('pullDownRefresh')
await page.waitFor(1500)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(10)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('onPageScroll onReachBottom', async () => {
await program.pageScrollTo(2000)
await page.waitFor(1000)
const isScrolled = await page.callMethod('getIsScrolled')
expect(isScrolled).toBe(true)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(10)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('onHide', async () => {
page = await program.navigateTo(INTER_PAGE_PATH)
await page.waitFor('view')
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(-10)
page = await program.navigateBack()
await page.waitFor('view')
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(0)
})
it('onUnload', async () => {
page = await program.reLaunch(HOME_PATH)
await page.waitFor(700)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(-100)
await page.callMethod('setLifeCycleNum', 0)
})
it('onBackPress', async () => {
page = await program.navigateTo(PAGE_PATH)
await page.waitFor(700)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(120)
page = await program.navigateBack()
await page.waitFor('view')
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(10)
await page.callMethod('setLifeCycleNum', 0)
})
})
\ No newline at end of file
pages/composition-api/lifecycle/page-lifecycle/page-lifecycle.uvue 已删除 100644 → 0
浏览文件 @ b8675d88
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1" :bounces="false">
<!-- #endif -->
<view class="page container">
<text>page lifecycle</text>
<button class="uni-common-mt" @click="scrollToBottom">scrollToBottom</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup>
import { state, setLifeCycleNum } from '@/store/index.uts'
const isScrolled = ref(false)
onLoad((_: OnLoadOptions) => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100)
})
onPageShow(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onReady(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPullDownRefresh(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPageScroll((_) => {
// 自动化测试
isScrolled.value = true
})
onReachBottom(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onBackPress((_: OnBackPressOptions): boolean | null => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
return null
})
onPageHide(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
})
onUnload(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
})
onResize((_) => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
// 自动化测试
const getLifeCycleNum = () : number => {
return state.lifeCycleNum
}
// 自动化测试
const pageSetLifeCycleNum = (num: number) => {
setLifeCycleNum(num)
}
// 自动化测试
const pullDownRefresh = () => {
uni.startPullDownRefresh({
success() {
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1500)
},
})
}
const scrollToBottom = () => {
uni.pageScrollTo({
scrollTop: 2000,
})
}
// 自动化测试
const getIsScrolled = (): boolean => {
return isScrolled.value
}
defineExpose({
getLifeCycleNum,
pageSetLifeCycleNum,
pullDownRefresh,
scrollToBottom,
getIsScrolled
})
</script>
<style>
.container {
height: 1200px;
}
</style>
\ No newline at end of file
pages/index/index.uvue
浏览文件 @ 8e97c0c5
......@@ -4,10 +4,22 @@
<!-- #endif -->
<view>
<uni-collapse>
<uni-collapse-item v-for="menu in menus" :key="menu.id" :title="menu.name" class="menu">
<uni-collapse-item
v-for="menu in menus"
:key="menu.id"
:title="menu.name"
class="menu">
<view v-for="(page, index) in menu.pages" :key="page.name">
<view v-if="page.url" class="page-item" :class="{ 'first-child': index == 0 }" @click="goDetailPage(menu.id, page)">
<text :class="{ 'text-disabled': page.enable == false }" class="text">{{ page.name }}</text>
<view
v-if="page.url"
class="page-item"
:class="{ 'first-child': index == 0 }"
@click="goDetailPage(menu.id, page)">
<text
:class="{ 'text-disabled': page.enable == false }"
class="text"
>{{ page.name }}</text
>
</view>
<template v-if="page.children">
<uni-collapse style="flex: 1">
......@@ -17,9 +29,12 @@
:key="child.url"
class="page-item"
:class="{ 'first-child': index == 0 }"
@click="goDetailPage(`${menu.id}/${page.id}`, child)"
>
<text :class="{ 'text-disabled': child.enable == false }" class="text">{{ child.name }}</text>
@click="goDetailPage(`${menu.id}/${page.id}`, child)">
<text
:class="{ 'text-disabled': child.enable == false }"
class="text"
>{{ child.name }}</text
>
</view>
</uni-collapse-item>
</uni-collapse>
......@@ -303,6 +318,22 @@ export default {
url: 'page-composition'
}
]
}, {
id: 'component',
name: '组件生命周期',
children: [
{
id: 'component-options',
name: '组件生命周期 选项式 API',
url: 'component-options'
},
{
id: 'component-composition',
name: '组件生命周期 组合式 API',
url: 'component-composition'
}
]
}
] as Page[]
},
......@@ -510,4 +541,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
pages/lifecycle/component/ChildComponentComposition.uvue 0 → 100644
浏览文件 @ 8e97c0c5
<template>
title: {{ title }}
<button class="component-lifecycle-btn mt-10" @click="updateTitle">
updateTitle
</button>
</template>
<script setup lang='uts'>
import { state, setLifeCycleNum } from '@/store/index.uts'
const title = ref('component for composition API lifecycle test')
const emit = defineEmits<{
(e : 'updateIsScroll', val : boolean) : void
}>()
onLoad((_ : OnLoadOptions) => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100)
})
onPageShow(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onReady(() => {
// 自动化测试
// TODO: onReady 未触发
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPullDownRefresh(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPageScroll((_) => {
// 自动化测试
emit('updateIsScroll', true)
})
onReachBottom(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onBackPress((_ : OnBackPressOptions) : boolean | null => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
return null
})
onPageHide(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
})
onUnload(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
})
onBeforeMount(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test mounted')
})
onMounted(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test mounted')
})
onBeforeUpdate(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeUpdate')
})
onUpdated(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test updated')
})
onBeforeUnmount(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test beforeUnmount')
})
onUnmounted(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test unmounted')
})
// TODO: app-android 不触发
onActivated(() => { })
// TODO: app-android 不触发
onDeactivated(() => { })
const updateTitle = () => {
title.value = 'component for lifecycle test updated'
}
</script>
components/OptionsAPILifecycle.uvue → pages/lifecycle/component/ChildComponentOptions.uvue
浏览文件 @ 8e97c0c5
<template>
title: {{ title }}
<button class="component-lifecycle-btn uni-common-mt" @click="updateTitle">
<button class="component-lifecycle-btn mt-10" @click="updateTitle">
updateTitle
</button>
</template>
<script>
import { state, setLifeCycleNum } from '../store/index.uts';
<script lang='uts'>
import { state, setLifeCycleNum } from '@/store/index.uts';
export default {
name: 'OptionsAPIComponentLifecycle',
data() {
......
pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.test.js → pages/lifecycle/component/component-composition.test.js
浏览文件 @ 8e97c0c5
const PAGE_PATH = '/pages/composition-api/lifecycle/component-lifecycle/component-lifecycle'
const INTER_PAGE_PATH = '/pages/app-instance/index/index'
const HOME_PATH = '/pages/tab-bar/options-api'
const PAGE_PATH = '/pages/lifecycle/component/component-composition'
const HOME_PATH = '/pages/index/index'
describe('component-lifecycle', () => {
let page
......@@ -24,23 +23,23 @@ describe('component-lifecycle', () => {
})
it('onLoad onPageShow onReady onBeforeMount onMounted', async () => {
lifeCycleNum = await page.callMethod('getLifeCycleNum')
lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
expect(lifeCycleNum).toBe(112)
await page.callMethod('pageSetlifeCycleNum', 0)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('onBeforeUpdate onUpdated', async () => {
const updateTitleBtn = await page.$('.component-lifecycle-btn')
await updateTitleBtn.tap()
lifeCycleNum = await page.callMethod('getLifeCycleNum')
lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
expect(lifeCycleNum).toBe(2)
await page.callMethod('pageSetlifeCycleNum', 0)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('onPullDownRefresh', async () => {
await page.callMethod('pullDownRefresh')
await page.waitFor(1500)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
await page.waitFor(2000)
lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
expect(lifeCycleNum).toBe(10)
await page.callMethod('pageSetlifeCycleNum', 0)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('onPageScroll onReachBottom', async () => {
await program.pageScrollTo(2000)
......@@ -48,21 +47,21 @@ describe('component-lifecycle', () => {
if (process.env.uniTestPlatformInfo.startsWith('android')) {
const isScrolled = await page.callMethod('getIsScrolled')
expect(isScrolled).toBe(true)
lifeCycleNum = await page.callMethod('getLifeCycleNum')
lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
expect(lifeCycleNum).toBe(10)
}
await page.callMethod('pageSetlifeCycleNum', 0)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('onHide', async () => {
page = await program.navigateTo(INTER_PAGE_PATH)
page = await program.navigateTo(HOME_PATH)
await page.waitFor('view')
lifeCycleNum = await page.callMethod('getLifeCycleNum')
expect(lifeCycleNum).toBe(-10)
page = await program.navigateBack()
await page.waitFor('view')
lifeCycleNum = await page.callMethod('getLifeCycleNum')
lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
expect(lifeCycleNum).toBe(0)
await page.callMethod('pageSetlifeCycleNum', 0)
await page.callMethod('pageSetLifeCycleNum', 0)
})
it('beforeUnmount unmounted onUnload onBackPress', async () => {
page = await program.navigateBack()
......
pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.uvue → pages/lifecycle/component/component-composition.uvue
浏览文件 @ 8e97c0c5
......@@ -2,29 +2,29 @@
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="pag container">
<text class="uni-common-mb">component lifecycle</text>
<component-lifecycle class="component-lifecycle" @updateIsScroll="updateIsScroll" />
<button class="uni-common-mt" @click="scrollToBottom">scrollToBottom</button>
<view class="page container">
<text class="mb-10">component lifecycle 组合式 API</text>
<child-component @updateIsScroll="updateIsScroll" />
<button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup>
import ComponentLifecycle from '@/components/CompositionAPILifecycle.uvue'
<script setup lang='uts'>
import ChildComponent from './ChildComponentComposition.uvue'
import { state, setLifeCycleNum } from '@/store/index.uts'
const isScrolled = ref(false)
// 自动化测试
const getLifeCycleNum = () : number => {
const pageGetLifeCycleNum = () : number => {
return state.lifeCycleNum
}
// 自动化测试
const pageSetlifeCycleNum = (num : number) => {
const pageSetLifeCycleNum = (num : number) => {
setLifeCycleNum(num)
}
......@@ -55,8 +55,8 @@
}
defineExpose({
getLifeCycleNum,
pageSetlifeCycleNum,
pageGetLifeCycleNum,
pageSetLifeCycleNum,
pullDownRefresh,
scrollToBottom,
getIsScrolled
......
pages/lifecycle/component/component.test.js → pages/lifecycle/component/component-options.test.js
浏览文件 @ 8e97c0c5
const PAGE_PATH = '/pages/lifecycle/component/component'
const HOME_PATH = '/pages/tab-bar/options-api'
const PAGE_PATH = '/pages/lifecycle/component/component-options'
const HOME_PATH = '/pages/index/index'
describe('component-lifecycle', () => {
let page
......
pages/lifecycle/component/component.uvue → pages/lifecycle/component/component-options.uvue
浏览文件 @ 8e97c0c5
<template>
<view class="page">
<text class="uni-common-mb">component lifecycle</text>
<component-lifecycle class="component-lifecycle" />
</view>
</template>
<script>
import ComponentLifecycle from '@/components/OptionsAPILifecycle.uvue'
import { state } from '@/store/index.uts'
export default {
components: { ComponentLifecycle },
methods: {
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
}
</script>
<template>
<view class="page">
<text class="mb-10">component lifecycle 选项式 API</text>
<child-component />
</view>
</template>
<script lang='uts'>
import ChildComponent from './ChildComponentOptions.uvue'
import { state } from '@/store/index.uts'
export default {
components: { ChildComponent },
methods: {
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
}
</script>
pages/lifecycle/page/page-composition.uvue
浏览文件 @ 8e97c0c5
......@@ -3,7 +3,7 @@
<scroll-view style="flex: 1" :bounces="false">
<!-- #endif -->
<view class="page container">
<text>page lifecycle</text>
<text>page lifecycle 组合式 API</text>
<button class="mt-10" @click="scrollToBottom">
scrollToBottom
</button>
......@@ -18,11 +18,11 @@
type DataInfo = {
isScrolled : boolean
}
const dataInfo = reactive({
isScrolled: false,
const dataInfo = reactive({
isScrolled: false,
} as DataInfo)
onLoad((_ : OnLoadOptions) => {
onLoad((_ : OnLoadOptions) => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100)
})
......@@ -39,7 +39,7 @@
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPageScroll((_) => {
// 自动化测试
// 自动化测试
dataInfo.isScrolled = true
})
onReachBottom(() => {
......@@ -65,9 +65,9 @@
})
// 自动化测试
const pageGetLifeCycleNum = () : number => {
const pageGetLifeCycleNum = () : number => {
return state.lifeCycleNum
}
}
// 自动化测试
const pageSetLifeCycleNum = (num : number) => {
setLifeCycleNum(num)
......@@ -90,7 +90,7 @@
})
}
defineExpose({
defineExpose({
dataInfo,
pageGetLifeCycleNum,
pageSetLifeCycleNum,
......
pages/lifecycle/page/page-options.uvue
浏览文件 @ 8e97c0c5
......@@ -3,7 +3,7 @@
<scroll-view style="flex: 1" :bounces="false">
<!-- #endif -->
<view class="page container">
<text>page lifecycle</text>
<text>page lifecycle 选项式 API</text>
<button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
</view>
<!-- #ifdef APP -->
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或