Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 402
Star 3
Fork 10
H
hello-uvue
提交 263dd924 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

perf(lifecycle): add annotation

上级 32a3f1db
隐藏空白更改
内联 并排
Showing with 551 addition and 519 deletion
App.vue
浏览文件 @ 263dd924
<script lang="ts"> <script lang="ts">
import { state, setLifeCycleNum } from './store/index.uts' import { state, setLifeCycleNum } from './store/index.uts'
export default { export default {
onLaunch: function () { onLaunch: function () {
setLifeCycleNum(state.lifeCycleNum + 1000) // 自动化测试
console.log('App Launch') setLifeCycleNum(state.lifeCycleNum + 1000)
console.log('App Launch')
const performance : Performance = uni.getPerformance()
const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => { const performance: Performance = uni.getPerformance()
console.log("observer:entryList.getEntries()") const observer: PerformanceObserver = performance.createObserver(
(entryList: PerformanceObserverEntryList) => {
console.log('observer:entryList.getEntries()')
console.log(entryList.getEntries()) console.log(entryList.getEntries())
}) }
observer.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions) )
}, observer.observe({
onShow: function () { entryTypes: ['render', 'navigation'],
setLifeCycleNum(state.lifeCycleNum + 100) } as PerformanceObserverOptions)
console.log('App Show') },
}, onShow: function () {
onHide: function () { // 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100) setLifeCycleNum(state.lifeCycleNum + 100)
console.log('App Hide') console.log('App Show')
}, },
onLastPageBackPress: function (): boolean | null { onHide: function () {
setLifeCycleNum(state.lifeCycleNum - 1000) // 自动化测试
uni.showToast({ setLifeCycleNum(state.lifeCycleNum - 100)
title: '再按一次退出应用', console.log('App Hide')
position: 'bottom' },
}) onLastPageBackPress: function (): boolean | null {
return null // 自动化测试
}, setLifeCycleNum(state.lifeCycleNum - 1000)
} uni.showToast({
title: '再按一次退出应用',
position: 'bottom',
})
return null
},
}
</script> </script>
<style> <style>
/* @font-face { /* @font-face {
font-family: uniicons; font-family: uniicons;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
src: url('./static/fonts/uni.ttf') format('truetype'); src: url('./static/fonts/uni.ttf') format('truetype');
} */ } */
.page { .page {
padding: 15px; padding: 15px;
} }
.uni-panel { .uni-panel {
margin-bottom: 12px; margin-bottom: 12px;
} }
.uni-panel-h { .uni-panel-h {
background-color: #ffffff; background-color: #ffffff;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
} }
.uni-panel-h-on { .uni-panel-h-on {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.uni-panel-text { .uni-panel-text {
color: #000000; color: #000000;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
} }
.uni-panel-icon {} .uni-panel-icon {}
.uni-panel-icon-on { .uni-panel-icon-on {
transform: rotate(180deg); transform: rotate(180deg);
} }
.uni-navigate-item { .uni-navigate-item {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: #FFFFFF; background-color: #ffffff;
border-top-style: solid; border-top-style: solid;
border-top-color: #f0f0f0; border-top-color: #f0f0f0;
border-top-width: 1px; border-top-width: 1px;
padding: 12px; padding: 12px;
justify-content: space-between; justify-content: space-between;
} }
.uni-navigate-item:active { .uni-navigate-item:active {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.uni-navigate-text { .uni-navigate-text {
color: #000000; color: #000000;
font-size: 12px; font-size: 12px;
opacity: 0.8; opacity: 0.8;
} }
.uni-navigate-icon { .uni-navigate-icon {
margin-left: 15px; margin-left: 15px;
color: #999999; color: #999999;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
} }
.text-disabled { .text-disabled {
color: #a0a0a0; color: #a0a0a0;
} }
.list-item-text { .list-item-text {
line-height: 36px; line-height: 36px;
} }
.split-title { .split-title {
margin: 20px 0 5px; margin: 20px 0 5px;
padding: 5px 0; padding: 5px 0;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
} }
.btn-view { .btn-view {
margin: 10px 0; margin: 10px 0;
padding: 10px; padding: 10px;
border: 1px solid #dfdfdf; border: 1px solid #dfdfdf;
border-radius: 3px; border-radius: 3px;
} }
</style> </style>
\ No newline at end of file
components/Lifecycle.uvue
浏览文件 @ 263dd924
<template> <template>
<view> <view>
<text>{{title}}</text> <text>{{ title }}</text>
</view> </view>
</template> </template>
<script lang="ts"> <script lang="ts">
import { state, setLifeCycleNum } from '../store/index.uts' import { state, setLifeCycleNum } from '../store/index.uts'
export default { export default {
name: 'ComponentLifecycle', name: 'ComponentLifecycle',
data(){ data() {
return { return {
title: 'component for lifecycle test' title: 'component for lifecycle test',
} }
}, },
beforeCreate() { beforeCreate() {
setLifeCycleNum(state.lifeCycleNum + 1) // 自动化测试
console.log('component for lifecycle test beforeCreate') setLifeCycleNum(state.lifeCycleNum + 1)
}, console.log('component for lifecycle test beforeCreate')
created() { },
setLifeCycleNum(state.lifeCycleNum + 1) created() {
console.log('component for lifecycle test created') // 自动化测试
}, setLifeCycleNum(state.lifeCycleNum + 1)
beforeMount() { console.log('component for lifecycle test created')
setLifeCycleNum(state.lifeCycleNum + 1) },
console.log('component for lifecycle test beforeMount') beforeMount() {
}, // 自动化测试
mounted() { setLifeCycleNum(state.lifeCycleNum + 1)
setLifeCycleNum(state.lifeCycleNum + 1) console.log('component for lifecycle test beforeMount')
console.log('component for lifecycle test mounted') },
}, mounted() {
beforeUpdate() { // 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1) setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeUpdate') console.log('component for lifecycle test mounted')
}, },
updated() { beforeUpdate() {
setLifeCycleNum(state.lifeCycleNum + 1) // 自动化测试
console.log('component for lifecycle test updated') setLifeCycleNum(state.lifeCycleNum + 1)
}, console.log('component for lifecycle test beforeUpdate')
beforeUnmount() { },
setLifeCycleNum(state.lifeCycleNum - 1) updated() {
console.log('component for lifecycle test beforeUnmount') // 自动化测试
}, setLifeCycleNum(state.lifeCycleNum + 1)
unmounted() { console.log('component for lifecycle test updated')
setLifeCycleNum(state.lifeCycleNum - 1) },
console.log('component for lifecycle test unmounted') beforeUnmount() {
}, // 自动化测试
methods: { setLifeCycleNum(state.lifeCycleNum - 1)
getLifeCycleNum(): number { console.log('component for lifecycle test beforeUnmount')
return state.lifeCycleNum },
} unmounted() {
}, // 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test unmounted')
},
methods: {
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
} }
</script> </script>
pages/index.uvue
浏览文件 @ 263dd924
...@@ -2,13 +2,21 @@ ...@@ -2,13 +2,21 @@
<view class="uni-container"> <view class="uni-container">
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" @click="triggerCollapse(item, index)"> <view class="uni-panel-h" @click="triggerCollapse(item, index)">
<text class="uni-panel-text">{{item.name}}</text> <text class="uni-panel-text">{{ item.name }}</text>
<!-- <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.open ? '&#xe581;' : '&#xe470;'}}</text> --> <!-- <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.open ? '&#xe581;' : '&#xe470;'}}</text> -->
</view> </view>
<view class="uni-panel-c" v-if="item.open"> <view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="page in item.pages" :key="page.name" <view
@click="goDetailPage(item.id, page)"> class="uni-navigate-item"
<text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text> v-for="page in item.pages"
:key="page.name"
@click="goDetailPage(item.id, page)"
>
<text
class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> --> <!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> -->
</view> </view>
</view> </view>
...@@ -17,329 +25,329 @@ ...@@ -17,329 +25,329 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { setLifeCycleNum, state } from '@/store/index.uts' import { setLifeCycleNum, state } from '@/store/index.uts'
type PageItem = { type PageItem = {
name : string, name: string
enable ?: boolean, enable?: boolean
url ?: string url?: string
} }
type PageList = { type PageList = {
id : string, id: string
name : string, name: string
open : boolean, open: boolean
pages : PageItem[], pages: PageItem[]
url ?: string, url?: string
enable ?: boolean enable?: boolean
} }
export default { export default {
data() { data() {
return { return {
list: [ list: [
{ {
id: 'lifecycle', id: 'lifecycle',
name: '生命周期', name: '生命周期',
open: false, open: false,
pages: [ pages: [
{ {
name: 'page', name: 'page',
url: 'page', url: 'page',
enable: true enable: true,
}, },
{ {
name: 'component', name: 'component',
url: 'component', url: 'component',
enable: true enable: true,
} },
] as PageItem[] ] as PageItem[],
}, },
{ {
id: 'directive', id: 'directive',
name: '指令', name: '指令',
open: false, open: false,
pages: [ pages: [
{ {
name: 'v-for', name: 'v-for',
url: 'v-for', url: 'v-for',
enable: true enable: true,
}, },
{ {
name: 'v-for-item-click', name: 'v-for-item-click',
url: 'v-for/v-for-item-click', url: 'v-for/v-for-item-click',
enable: true enable: true,
}, },
{ {
name: 'v-for-item-v-if', name: 'v-for-item-v-if',
url: 'v-for/v-for-item-v-if', url: 'v-for/v-for-item-v-if',
enable: true enable: true,
}, },
{ {
name: 'v-for-item-v-show', name: 'v-for-item-v-show',
url: 'v-for/v-for-item-v-show', url: 'v-for/v-for-item-v-show',
enable: true enable: true,
}, },
{ {
name: 'v-for-v-for', name: 'v-for-v-for',
url: 'v-for/v-for-v-for', url: 'v-for/v-for-v-for',
enable: true enable: true,
}, },
{ {
name: 'v-if', name: 'v-if',
url: 'v-if', url: 'v-if',
enable: true enable: true,
}, },
{ {
name: 'v-show', name: 'v-show',
url: 'v-show', url: 'v-show',
enable: true enable: true,
}, },
{ {
name: 'v-on', name: 'v-on',
url: 'v-on', url: 'v-on',
enable: true enable: true,
}, },
{ {
name: 'v-bind', name: 'v-bind',
url: 'v-bind', url: 'v-bind',
enable: true enable: true,
}, },
{ {
name: 'v-model', name: 'v-model',
url: 'v-model', url: 'v-model',
enable: true enable: true,
}, },
{ {
name: 'v-slot', name: 'v-slot',
url: 'v-slot', url: 'v-slot',
enable: true enable: true,
}, },
{ {
name: 'v-pre', name: 'v-pre',
url: 'v-pre', url: 'v-pre',
enable: false enable: false,
}, },
{ {
name: 'v-once', name: 'v-once',
url: 'v-once', url: 'v-once',
enable: false enable: false,
}, },
{ {
name: 'v-memo', name: 'v-memo',
url: 'v-memo', url: 'v-memo',
enable: false enable: false,
}, },
{ {
name: 'v-cloak', name: 'v-cloak',
url: 'v-cloak', url: 'v-cloak',
enable: false enable: false,
}, },
] as PageItem[] ] as PageItem[],
}, },
{ {
id: 'state', id: 'state',
name: '状态', name: '状态',
open: false, open: false,
pages: [ pages: [
{ {
name: 'data', name: 'data',
url: 'data', url: 'data',
enable: true enable: true,
}, },
{ {
name: 'props', name: 'props',
url: 'props', url: 'props',
enable: true enable: true,
}, },
{ {
name: 'computed', name: 'computed',
url: 'computed', url: 'computed',
enable: true enable: true,
}, },
{ {
name: 'methods', name: 'methods',
url: 'methods', url: 'methods',
enable: true enable: true,
}, },
{ {
name: 'watch', name: 'watch',
url: 'watch', url: 'watch',
enable: true enable: true,
}, },
] as PageItem[] ] as PageItem[],
}, },
{ {
id: 'rendering', id: 'rendering',
name: '渲染选项', name: '渲染选项',
open: false, open: false,
pages: [ pages: [
{ {
name: 'template', name: 'template',
url: 'template', url: 'template',
enable: true enable: true,
}, },
{ {
name: 'render', name: 'render',
url: 'render', url: 'render',
enable: false enable: false,
}, },
{ {
name: 'slots', name: 'slots',
url: 'slots', url: 'slots',
enable: true enable: true,
}, },
] as PageItem[] ] as PageItem[],
}, },
{ {
id: 'component-instance', id: 'component-instance',
name: '组件实例', name: '组件实例',
open: false, open: false,
pages: [ pages: [
{ {
name: '$data', name: '$data',
url: 'data', url: 'data',
enable: true enable: true,
}, },
{ {
name: '$props', name: '$props',
url: 'props', url: 'props',
enable: true enable: true,
}, },
{ {
name: '$el', name: '$el',
url: 'el', url: 'el',
enable: true enable: true,
}, },
{ {
name: '$options', name: '$options',
url: 'options', url: 'options',
enable: true enable: true,
}, },
{ {
name: '$parent', name: '$parent',
url: 'parent', url: 'parent',
enable: true enable: true,
}, },
{ {
name: '$root', name: '$root',
url: 'root', url: 'root',
enable: true enable: true,
}, },
{ {
name: '$slots', name: '$slots',
url: 'slots', url: 'slots',
enable: true enable: true,
}, },
{ {
name: '$refs', name: '$refs',
url: 'refs', url: 'refs',
enable: true enable: true,
}, },
{ {
name: '$attrs', name: '$attrs',
url: 'attrs', url: 'attrs',
enable: true enable: true,
}, },
{ {
name: '$watch', name: '$watch',
url: 'watch-function', url: 'watch-function',
enable: true enable: true,
}, },
{ {
name: '$emit', name: '$emit',
url: 'emit-function', url: 'emit-function',
enable: true enable: true,
}, },
{ {
name: '$forceUpdate', name: '$forceUpdate',
url: 'forceUpdate-function', url: 'forceUpdate-function',
enable: false enable: false,
}, },
{ {
name: '$nextTick', name: '$nextTick',
url: 'nextTick-function', url: 'nextTick-function',
enable: true enable: true,
}, },
] as PageItem[] ] as PageItem[],
}, },
{ {
id: 'composition', id: 'composition',
name: '组合选项', name: '组合选项',
open: false, open: false,
pages: [ pages: [
{ {
name: 'provide', name: 'provide',
url: 'provide', url: 'provide',
enable: false enable: false,
}, },
{ {
name: 'inject', name: 'inject',
url: 'inject', url: 'inject',
enable: false enable: false,
}, },
{ {
name: 'mixins', name: 'mixins',
url: 'mixins', url: 'mixins',
enable: false enable: false,
}, },
{ {
name: 'extends', name: 'extends',
url: 'extends', url: 'extends',
enable: false enable: false,
}, },
] as PageItem[] ] as PageItem[],
}, },
] as PageList[] ] as PageList[],
}
},
methods: {
triggerCollapse(_: PageList, index: number) {
this.list[index].open = !this.list[index].open
},
goDetailPage(id: string, e: PageItem) {
if (e.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持',
})
return
} }
const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
uni.navigateTo({
url: `/pages/${id}/${url}`,
})
}, },
onLoad() { // 自动化测试
setLifeCycleNum(num: number) {
setLifeCycleNum(num)
}, },
methods: { // 自动化测试
triggerCollapse(_ : PageList, index : number) { getLifeCycleNum(): number {
this.list[index].open = !this.list[index].open return state.lifeCycleNum
}, },
goDetailPage(id : string, e : PageItem) { },
if (e.enable == false) { }
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
uni.navigateTo({
url: `/pages/${id}/${url}`
})
},
setLifeCycleNum(num : number) {
setLifeCycleNum(num)
},
getLifeCycleNum() : number {
return state.lifeCycleNum
},
}
}
</script> </script>
<style> <style>
.arrow { .arrow {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-top: 2px solid #ccc; border-top: 2px solid #ccc;
border-left: 2px solid #ccc; border-left: 2px solid #ccc;
} }
.arrow-right { .arrow-right {
transform: rotate(135deg); transform: rotate(135deg);
} }
.arrow-up { .arrow-up {
transform: rotate(45deg); transform: rotate(45deg);
} }
.arrow-down { .arrow-down {
transform: rotate(-135deg); transform: rotate(-135deg);
} }
</style> </style>
pages/lifecycle/component/component.uvue
浏览文件 @ 263dd924
<template> <template>
<view class="page"> <view class="page">
<text>component lifecycle</text> <text>component lifecycle</text>
<component-lifecycle class="component-lifecycle" /> <component-lifecycle class="component-lifecycle" />
</view> </view>
</template> </template>
<script lang="ts"> <script lang="ts">
import ComponentLifecycle from '@/components/Lifecycle.uvue' import ComponentLifecycle from '@/components/Lifecycle.uvue'
import { state } from '@/store/index.uts' import { state } from '@/store/index.uts'
export default { export default {
components: { ComponentLifecycle }, components: { ComponentLifecycle },
methods: { methods: {
getLifeCycleNum(): number { // 自动化测试
return state.lifeCycleNum getLifeCycleNum(): number {
} return state.lifeCycleNum
}, },
},
} }
</script> </script>
pages/lifecycle/page/page.uvue
浏览文件 @ 263dd924
<template> <template>
<view class="page"> <view class="page">
<text>page lifecycle</text> <text>page lifecycle</text>
</view> </view>
</template> </template>
<script lang="ts"> <script lang="ts">
import { state, setLifeCycleNum } from '@/store/index.uts' import { state, setLifeCycleNum } from '@/store/index.uts'
export default { export default {
onLoad() { onLoad() {
setLifeCycleNum(state.lifeCycleNum + 100) // 自动化测试
console.log('Page onLoad') setLifeCycleNum(state.lifeCycleNum + 100)
}, console.log('Page onLoad')
onShow() { },
setLifeCycleNum(state.lifeCycleNum + 10) onShow() {
console.log('Page onShow') // 自动化测试
}, setLifeCycleNum(state.lifeCycleNum + 10)
onReady() { console.log('Page onShow')
setLifeCycleNum(state.lifeCycleNum + 10) },
console.log('Page onReady') onReady() {
}, // 自动化测试
onHide() { setLifeCycleNum(state.lifeCycleNum + 10)
setLifeCycleNum(state.lifeCycleNum - 10) console.log('Page onReady')
console.log('Page onHide') },
}, onHide() {
onUnload() { // 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100) setLifeCycleNum(state.lifeCycleNum - 10)
console.log('Page onUnload') console.log('Page onHide')
}, },
onBackPress(options: Map<string, string>) : boolean | null { onUnload() {
setLifeCycleNum(state.lifeCycleNum - 10) // 自动化测试
console.log('Page onBackPress',options) setLifeCycleNum(state.lifeCycleNum - 100)
return null console.log('Page onUnload')
}, },
methods: { onBackPress(options: OnBackPressOptions): boolean | null {
getLifeCycleNum() : number { // 自动化测试
return state.lifeCycleNum setLifeCycleNum(state.lifeCycleNum - 10)
} console.log('Page onBackPress from: ', options.from)
}, return null
} },
</script> methods: {
\ No newline at end of file getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
}
</script>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或