Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 356
Star 3
Fork 7
H
hello-uvue
提交 0b8e3a61 编写于 作者: H hdx
浏览文件
操作

refactor：pages

上级 94d7ba9b
隐藏空白更改
内联 并排
Showing with 407 addition and 280 deletion
App.vue
浏览文件 @ 0b8e3a61
<script lang="ts">
import { state, setLifeCycleNum } from './store/index.uts'
export default {
onLaunch: function () {
setLifeCycleNum(state.lifeCycleNum + 1000)
console.log('App Launch')
import { state, setLifeCycleNum } from './store/index.uts'
export default {
onLaunch: function () {
setLifeCycleNum(state.lifeCycleNum + 1000)
console.log('App Launch')
const performance: Performance = uni.getPerformance()
const observer: PerformanceObserver = performance.createObserver((entryList: PerformanceObserverEntryList) => {
console.log("observer:entryList.getEntries()")
console.log(entryList.getEntries())
})
observer.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(): boolean | null {
setLifeCycleNum(state.lifeCycleNum - 1000)
console.log('App onLastPageBackPress')
return null
},
}
const performance : Performance = uni.getPerformance()
const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {
console.log("observer:entryList.getEntries()")
console.log(entryList.getEntries())
})
observer.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() : boolean | null {
setLifeCycleNum(state.lifeCycleNum - 1000)
console.log('App onLastPageBackPress')
return null
},
}
</script>
<style>
/* @font-face {
/* @font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('./static/fonts/uni.ttf') format('truetype');
} */
.page {
padding: 15px;
}
.page {
padding: 15px;
}
.uni-panel {
margin-bottom: 12px;
}
.uni-panel {
margin-bottom: 12px;
}
.uni-panel-h {
background-color: #ffffff;
flex-direction: row;
align-items: center;
padding: 12px;
}
.uni-panel-h {
background-color: #ffffff;
flex-direction: row;
align-items: center;
padding: 12px;
}
.uni-panel-h-on {
background-color: #f0f0f0;
}
.uni-panel-h-on {
background-color: #f0f0f0;
}
.uni-panel-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-panel-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-panel-icon {}
.uni-panel-icon {}
.uni-panel-icon-on {
transform: rotate(180deg);
}
.uni-panel-icon-on {
transform: rotate(180deg);
}
.uni-navigate-item {
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
border-top-style: solid;
border-top-color: #f0f0f0;
border-top-width: 1px;
padding: 12px;
justify-content: space-between;
}
.uni-navigate-item {
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
border-top-style: solid;
border-top-color: #f0f0f0;
border-top-width: 1px;
padding: 12px;
justify-content: space-between;
}
.uni-navigate-item:active {
background-color: #f8f8f8;
}
.uni-navigate-item:active {
background-color: #f8f8f8;
}
.uni-navigate-text {
color: #000000;
font-size: 12px;
opacity: 0.8;
}
.uni-navigate-text {
color: #000000;
font-size: 12px;
opacity: 0.8;
}
.uni-navigate-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
}
.uni-navigate-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
}
.text-disabled {
color: #a0a0a0;
}
.split-title {
margin: 20px 0 5px;
padding: 5px 0;
border-bottom: 1px solid #dfdfdf;
}
</style>
.split-title {
margin: 20px 0 5px;
padding: 5px 0;
border-bottom: 1px solid #dfdfdf;
}
</style>
\ No newline at end of file
manifest.json
浏览文件 @ 0b8e3a61
{
"name" : "hello-uvue",
"appid" : "__UNI__CD1E05C",
"appid" : "",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
......
pages.json
浏览文件 @ 0b8e3a61
......@@ -6,61 +6,61 @@
}
},
{
"path": "pages/v-bind/v-bind",
"path": "pages/directive/v-bind/v-bind",
"style": {
"navigationBarTitleText": "v-bind"
}
},
{
"path": "pages/v-for/v-for",
"path": "pages/directive/v-for/v-for",
"style": {
"navigationBarTitleText": "v-for"
}
},
{
"path": "pages/v-if/v-if",
"path": "pages/directive/v-if/v-if",
"style": {
"navigationBarTitleText": "v-if"
}
},
{
"path": "pages/v-model/v-model",
"path": "pages/directive/v-model/v-model",
"style": {
"navigationBarTitleText": "v-model"
}
},
{
"path": "pages/v-on/v-on",
"path": "pages/directive/v-on/v-on",
"style": {
"navigationBarTitleText": "v-on"
}
},
{
"path": "pages/v-once/v-once",
"path": "pages/directive/v-once/v-once",
"style": {
"navigationBarTitleText": "v-once"
}
},
{
"path": "pages/v-show/v-show",
"path": "pages/directive/v-show/v-show",
"style": {
"navigationBarTitleText": "v-show"
}
},
{
"path": "pages/v-slot/v-slot",
"path": "pages/directive/v-slot/v-slot",
"style": {
"navigationBarTitleText": "v-slot"
}
},
{
"path": "pages/page-lifecycle/page-lifecycle",
"path": "pages/lifecycle/page/page",
"style": {
"navigationBarTitleText": "page-lifecycle"
}
},
{
"path": "pages/component-lifecycle/component-lifecycle",
"path": "pages/lifecycle/component/component",
"style": {
"navigationBarTitleText": "component-lifecycle"
}
......@@ -175,20 +175,20 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/rendering/slots/slots",
"style": {
"navigationBarTitleText": "slots",
"enablePullDownRefresh": false
}
},
{
"path": "pages/rendering/template/template",
"style": {
"navigationBarTitleText": "template",
"enablePullDownRefresh": false
}
}
{
"path": "pages/rendering/slots/slots",
"style": {
"navigationBarTitleText": "slots",
"enablePullDownRefresh": false
}
},
{
"path": "pages/rendering/template/template",
"style": {
"navigationBarTitleText": "template",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"pageOrientation": "portrait",
......
pages/v-bind/v-bind.test.js → pages/directive/v-bind/v-bind.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-bind/v-bind'
const PAGE_PATH = '/pages/directive/v-bind/v-bind'
describe('v-bind', () => {
let page
......
pages/v-for/v-for.test.js → pages/directive/v-for/v-for.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-for/v-for'
const PAGE_PATH = '/pages/directive/v-for/v-for'
describe('v-for', () => {
let page
......
pages/v-if/v-if.test.js → pages/directive/v-if/v-if.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-if/v-if'
const PAGE_PATH = '/pages/directive/v-if/v-if'
describe('v-if', () => {
let page
......
pages/v-model/v-model.test.js → pages/directive/v-model/v-model.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-model/v-model'
const PAGE_PATH = '/pages/directive/v-model/v-model'
describe('v-model', () => {
let page
......
pages/v-on/v-on.test.js → pages/directive/v-on/v-on.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-on/v-on'
const PAGE_PATH = '/pages/directive/v-on/v-on'
describe('v-on', () => {
let page
......
pages/v-once/v-once.test.js → pages/directive/v-once/v-once.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-once/v-once'
const PAGE_PATH = '/pages/directive/v-once/v-once'
describe('v-once', () => {
let page
......
pages/v-show/v-show.test.js → pages/directive/v-show/v-show.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-show/v-show'
const PAGE_PATH = '/pages/directive/v-show/v-show'
describe('v-show', () => {
let page
......
pages/v-slot/v-slot.test.js → pages/directive/v-slot/v-slot.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/v-slot/v-slot'
const PAGE_PATH = '/pages/directive/v-slot/v-slot'
describe('v-slot', () => {
let page
......
pages/index.uvue
浏览文件 @ 0b8e3a61
......@@ -6,8 +6,9 @@
<!-- <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.open ? '&#xe581;' : '&#xe470;'}}</text> -->
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="page in item.pages" :key="page.name" @click="goDetailPage(page)">
<text class="uni-navigate-text">{{page.name}}</text>
<view class="uni-navigate-item" 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> -->
</view>
</view>
......@@ -16,30 +17,21 @@
</template>
<script lang="ts">
import { setLifeCycleNum, state } from '../store/index.uts'
const STORAGE_KEY_PREFIX = 'INDEX-STATUS'
let storageData : Array<string> = []
import { setLifeCycleNum, state } from '@/store/index.uts'
type ListItem = {
id : string,
type PageItem = {
name : string,
open : boolean,
pages : IListPageItem[]
}
type IListPageItem = {
name: string
path: string
enable ?: boolean,
url ?: string
}
function createPageItem (parent: string | null = null): (page: string) => IListPageItem {
return function (page: string): IListPageItem {
const routeName = page.replace(/\$/g, '').replace('()', '-function')
return {
name: page,
path: parent !== null ? `/pages/${parent}/${routeName}/${routeName}`: `/pages/${routeName}/${routeName}`
} as IListPageItem
}
type PageList = {
id : string,
name : string,
open : boolean,
pages : PageItem[],
url ?: string,
enable ?: boolean
}
export default {
......@@ -51,129 +43,260 @@
name: '生命周期',
open: false,
pages: [
'page-lifecycle',
'component-lifecycle'
].map(createPageItem())
{
name: 'page',
url: 'page',
enable: true
},
{
name: 'component',
url: 'component',
enable: true
}
] as PageItem[]
},
{
id: 'directives',
id: 'directive',
name: '指令',
open: false,
pages: [
'v-for',
'v-if',
'v-show',
'v-on',
'v-bind',
'v-model',
'v-slot',
// 'v-pre',
'v-once',
// 'v-memo',
// 'v-cloak'
].map(createPageItem())
{
name: 'v-for',
url: 'v-for',
enable: true
},
{
name: 'v-if',
url: 'v-if',
enable: true
},
{
name: 'v-show',
url: 'v-show',
enable: true
},
{
name: 'v-on',
url: 'v-on',
enable: true
},
{
name: 'v-bind',
url: 'v-bind',
enable: true
},
{
name: 'v-model',
url: 'v-model',
enable: true
},
{
name: 'v-slot',
url: 'v-slot',
enable: true
},
{
name: 'v-pre',
url: 'v-pre',
enable: false
},
{
name: 'v-once',
url: 'v-once',
enable: true
},
{
name: 'v-memo',
url: 'v-memo',
enable: false
},
{
name: 'v-cloak',
url: 'v-cloak',
enable: false
},
] as PageItem[]
},
{
id: 'state',
name: '状态',
open: false,
pages: [
'data',
'props',
'computed',
'methods',
'watch'
].map(createPageItem('state'))
{
name: 'data',
url: 'data',
enable: true
},
{
name: 'props',
url: 'props',
enable: true
},
{
name: 'computed',
url: 'computed',
enable: true
},
{
name: 'methods',
url: 'methods',
enable: true
},
{
name: 'watch',
url: 'watch',
enable: true
},
] as PageItem[]
},
{
id: 'rendering',
name: '渲染选项',
open: false,
pages: [
'template',
// 'render',
'slots'].map(createPageItem('rendering'))
{
name: 'template',
url: 'template',
enable: true
},
{
name: 'render',
url: 'render',
enable: false
},
{
name: 'slots',
url: 'slots',
enable: true
},
] as PageItem[]
},
{
id: 'component-instance',
name: '组件实例',
open: false,
pages: [
'$data',
'$props',
'$el',
'$options',
'$parent',
'$root',
'$slots',
'$refs',
'$attrs',
'$watch()',
'$emit()',
'$forceUpdate()',
'$nextTick()'
].map(createPageItem('component-instance'))
{
name: '$data',
url: 'data',
enable: true
},
{
name: '$props',
url: 'props',
enable: true
},
{
name: '$el',
url: 'el',
enable: true
},
{
name: '$options',
url: 'options',
enable: true
},
{
name: '$parent',
url: 'parent',
enable: true
},
{
name: '$root',
url: 'root',
enable: true
},
{
name: '$slots',
url: 'slots',
enable: true
},
{
name: '$refs',
url: 'refs',
enable: true
},
{
name: '$attrs',
url: 'attrs',
enable: true
},
{
name: '$watch',
url: 'watch',
enable: true
},
{
name: '$emit',
url: 'emit',
enable: true
},
{
name: '$forceUpdate',
url: 'forceUpdate',
enable: true
},
{
name: '$nextTick',
url: 'nextTick',
enable: true
},
] as PageItem[]
},
{
id: 'composition',
name: '组合选项',
open: false,
pages: [
'provide',
'inject',
'mixins',
'extends'
].map(createPageItem('composition'))
}
] as ListItem[]
{
name: 'provide',
url: 'provide',
enable: false
},
{
name: 'inject',
url: 'inject',
enable: false
},
{
name: 'mixins',
url: 'mixins',
enable: false
},
{
name: 'extends',
url: 'extends',
enable: false
},
] as PageItem[]
},
] as PageList[]
}
},
onLoad() {
// uni.getStorage({
// key: STORAGE_KEY_PREFIX,
// success: function (res) {
// storageData = JSON.parse(res.data as string) as Array<string>
// console.log(storageData)
// for (let i = 0; i < this.list.length; ++i) {
// const item = this.list[i]
// if (storageData.includes(item.id)) {
// item.open = true
// }
// }
// }
// })
},
methods: {
triggerCollapse(_ : ListItem, index : number) {
triggerCollapse(_ : PageList, index : number) {
this.list[index].open = !this.list[index].open
// const id = item.id
// const value = this.list[index].open
// if (value) {
// storageData.push(id)
// } else {
// const index2: number = storageData.indexOf(id)
// if (index2 > -1) {
// storageData.splice(index2, 1)
// }
// }
// uni.setStorage({
// key: STORAGE_KEY_PREFIX,
// data: storageData
// })
},
goDetailPage(e : IListPageItem) {
goDetailPage(id : string, e : PageItem) {
if (e.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
uni.navigateTo({
url: e.path
url: `/pages/${id}/${e.url}/${e.url}`
})
},
setLifeCycleNum(num: number){
console.warn('index setLifeCycleNum', num)
setLifeCycleNum(num)
},
getLifeCycleNum(): number {
setLifeCycleNum(num : number) {
console.warn('index setLifeCycleNum', num)
setLifeCycleNum(num)
},
getLifeCycleNum() : number {
return state.lifeCycleNum
},
}
......@@ -199,4 +322,4 @@
.arrow-down {
transform: rotate(-135deg);
}
</style>
</style>
\ No newline at end of file
pages/component-lifecycle/component-lifecycle.test.js → pages/lifecycle/component/component.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/component-lifecycle/component-lifecycle'
const PAGE_PATH = '/pages/lifecycle/component/component'
const HOME_PATH = '/pages/index'
describe('component-lifecycle', () => {
......
pages/component-lifecycle/component-lifecycle.uvue → pages/lifecycle/component/component.uvue
浏览文件 @ 0b8e3a61
<template>
<view class="page">
<text>component lifecycle</text>
<component-lifecycle class="component-lifecycle" />
</view>
</template>
<script lang="ts">
import ComponentLifecycle from '../../components/Lifecycle.uvue'
import { state } from '../../store/index.uts'
export default {
components: { ComponentLifecycle },
methods: {
getLifeCycleNum(): number {
return state.lifeCycleNum
}
},
}
</script>
<template>
<view class="page">
<text>component lifecycle</text>
<component-lifecycle class="component-lifecycle" />
</view>
</template>
<script lang="ts">
import ComponentLifecycle from '@/components/Lifecycle.uvue'
import { state } from '@/store/index.uts'
export default {
components: { ComponentLifecycle },
methods: {
getLifeCycleNum(): number {
return state.lifeCycleNum
}
},
}
</script>
pages/page-lifecycle/page-lifecycle.test.js → pages/lifecycle/page/page.test.js
浏览文件 @ 0b8e3a61
const PAGE_PATH = '/pages/page-lifecycle/page-lifecycle'
const PAGE_PATH = '/pages/lifecycle/page/page'
const HOME_PATH = '/pages/index'
describe('page-lifecycle', () => {
......
pages/page-lifecycle/page-lifecycle.uvue → pages/lifecycle/page/page.uvue
浏览文件 @ 0b8e3a61
<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)
<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)
},
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
}
},
}
return null
},
methods: {
getLifeCycleNum() : number {
return state.lifeCycleNum
}
},
}
</script>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或