提交 76729422 编写于 作者: fxy060608's avatar fxy060608

feat(h5): PageComponent

上级 2f1cf321
...@@ -32,6 +32,7 @@ declare var __UNI_FEATURE_TOPWINDOW__: boolean ...@@ -32,6 +32,7 @@ declare var __UNI_FEATURE_TOPWINDOW__: boolean
declare var __UNI_FEATURE_LEFTWINDOW__: boolean declare var __UNI_FEATURE_LEFTWINDOW__: boolean
declare var __UNI_FEATURE_RIGHTWINDOW__: boolean declare var __UNI_FEATURE_RIGHTWINDOW__: boolean
declare var __UNI_FEATURE_RESPONSIVE__: boolean declare var __UNI_FEATURE_RESPONSIVE__: boolean
declare var __UNI_FEATURE_PULL_DOWN_REFRESH__: boolean
// TODO // TODO
declare var __uniRoutes: any declare var __uniRoutes: any
declare var __uniConfig: UniApp.UniConfig declare var __uniConfig: UniApp.UniConfig
......
...@@ -10,10 +10,42 @@ declare namespace UniApp { ...@@ -10,10 +10,42 @@ declare namespace UniApp {
router: { router: {
strict: boolean strict: boolean
} }
globalStyle: {
navigationBar: PageNavigationBar
refreshOptions?: PageRefreshOptions
}
topWindow?: LayoutWindowOptions topWindow?: LayoutWindowOptions
leftWindow?: LayoutWindowOptions leftWindow?: LayoutWindowOptions
rightWindow?: LayoutWindowOptions rightWindow?: LayoutWindowOptions
} }
interface PageNavigationBar {
type: 'default' | 'transparent' | 'float' | 'none'
titleText: string
}
interface PageRefreshOptions {
support: boolean
color: string
style: 'circle' | string
height: number
range: number
offset: number
}
interface PageRouteMeta {
id: number
isQuit?: boolean
isEntry?: boolean
isTabBar?: boolean
tabBarIndex?: number
windowTop?: number
topWindow?: boolean
leftWindow?: boolean
rightWindow?: boolean
enablePullDownRefresh?: boolean
navigationBar: PageNavigationBar
refreshOptions?: PageRefreshOptions
}
interface PagesJsonPageOptions { interface PagesJsonPageOptions {
path: string path: string
style?: Record<string, any> style?: Record<string, any>
......
export function PolySymbol(name: string) { export function PolySymbol(name: string) {
return Symbol(__DEV__ ? '[uni-app]: ' + name : name) return Symbol(__DEV__ ? '[uni-app]: ' + name : name)
} }
export function rpx2px(str: string | number) {
if (typeof str === 'string') {
const res = parseInt(str) || 0
if (str.indexOf('rpx') !== -1 || str.indexOf('upx') !== -1) {
return uni.upx2px(res)
}
return res
}
return str
}
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
import {
withCtx,
openBlock,
renderSlot,
createBlock,
createVNode,
SetupContext,
defineComponent,
} from 'vue'
import PageHead from './PageHead'
import PageBody from './PageBody'
import { providePageMeta } from '../../plugin/provide'
export default defineComponent({
name: 'Page',
setup(props, ctx) {
providePageMeta()
return () => (
openBlock(),
createBlock('uni-page', null, [
createPageHeadVNode(),
createPageBodyVNode(ctx),
])
)
},
})
function createPageHeadVNode() {
return createVNode(PageHead)
}
function createPageBodyVNode(ctx: SetupContext) {
return (
openBlock(),
createBlock(
PageBody,
{ key: 1 },
{
default: withCtx(() => [renderSlot(ctx.slots, 'page')]),
_: 3 /* FORWARDED */,
}
)
)
}
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
/> />
<page-body <page-body
v-if="enablePullDownRefresh" v-if="enablePullDownRefresh"
@touchstart.native="_touchstart" @touchstart="_touchstart"
@touchmove.native="_touchmove" @touchmove="_touchmove"
@touchend.native="_touchend" @touchend="_touchend"
@touchcancel.native="_touchend" @touchcancel="_touchend"
> >
<slot name="page" /> <slot name="page" />
</page-body> </page-body>
......
import {
ref,
Fragment,
openBlock,
renderSlot,
createBlock,
createVNode,
defineComponent,
createCommentVNode,
Ref,
} from 'vue'
import { usePageMeta } from '../../plugin/provide'
import PageRefresh from './pageRefresh/index.vue'
import { usePageRefresh } from './pageRefresh'
export default defineComponent({
name: 'PageBody',
setup(props, ctx) {
const pageMeta = __UNI_FEATURE_PULL_DOWN_REFRESH__
? usePageMeta()
: undefined
const refreshRef = __UNI_FEATURE_PULL_DOWN_REFRESH__ ? ref(null) : undefined
const pageRefresh =
__UNI_FEATURE_PULL_DOWN_REFRESH__ && pageMeta!.enablePullDownRefresh
? usePageRefresh(refreshRef!)
: null
return () => (
openBlock(),
createBlock(Fragment, null, [
createPageRefreshVNode(refreshRef!, pageMeta!),
createVNode('uni-page-wrapper', pageRefresh, [
createVNode('uni-page-body', null, [
renderSlot(ctx.slots, 'default'),
]),
]),
])
)
},
})
function createPageRefreshVNode(
refreshRef: Ref,
pageMeta: UniApp.PageRouteMeta
) {
if (!__UNI_FEATURE_PULL_DOWN_REFRESH__) {
return createCommentVNode('', true)
}
if (!pageMeta.enablePullDownRefresh) {
return createCommentVNode('', true)
}
return createVNode(
PageRefresh,
{ ref: refreshRef },
null,
512 /* NEED_PATCH */
)
}
<template> <template>
<div></div>
<uni-page-wrapper> <uni-page-wrapper>
<uni-page-body> <uni-page-body>
<slot /> <slot />
......
import {
createBlock,
// createCommentVNode,
// createVNode,
defineComponent,
openBlock,
// renderSlot,
// SetupContext,
// withCtx,
} from 'vue'
import { usePageMeta } from '../../plugin/provide'
export default defineComponent({
name: 'PageHead',
setup() {
const pageMeta = usePageMeta()
return () => (
openBlock(),
createBlock('uni-page-head', null, pageMeta.navigationBar.titleText)
)
},
})
<template>
<uni-page-refresh>
<div :style="{ 'margin-top': offset + 'px' }" class="uni-page-refresh">
<div class="uni-page-refresh-inner">
<svg
:fill="color"
class="uni-page-refresh__icon"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
/>
<path d="M0 0h24v24H0z" fill="none" />
</svg>
<svg
class="uni-page-refresh__spinner"
width="24"
height="24"
viewBox="25 25 50 50"
>
<circle
:stroke="color"
class="uni-page-refresh__path"
cx="50"
cy="50"
r="20"
fill="none"
stroke-width="4"
stroke-miterlimit="10"
/>
</svg>
</div>
</div>
</uni-page-refresh>
</template>
<script lang="ts">
import { usePageMeta } from '../../../plugin/provide'
export default {
name: 'PageRefresh',
setup() {
const { refreshOptions } = usePageMeta()
return {
offset: refreshOptions!.offset,
color: refreshOptions!.color,
}
},
}
</script>
...@@ -7,7 +7,6 @@ import { isCustomElement } from '@dcloudio/uni-shared' ...@@ -7,7 +7,6 @@ import { isCustomElement } from '@dcloudio/uni-shared'
import { initRouter } from './router' import { initRouter } from './router'
import { initSystemComponents } from './components' import { initSystemComponents } from './components'
import { initMixin } from './mixin' import { initMixin } from './mixin'
import { initProvide } from './provide'
export default { export default {
install(app: App) { install(app: App) {
...@@ -19,6 +18,9 @@ export default { ...@@ -19,6 +18,9 @@ export default {
initSystemComponents(app) initSystemComponents(app)
initMixin(app) initMixin(app)
initProvide(app, (__UNI_FEATURE_PAGES__ && initRouter(app)) || undefined)
if (__UNI_FEATURE_PAGES__) {
initRouter(app)
}
}, },
} }
import { import { computed, nextTick, VNode, ComponentPublicInstance } from 'vue'
computed,
nextTick,
VNode,
ComponentPublicInstance,
ComputedRef,
} from 'vue'
import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router' import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router'
const SEP = '$$' const SEP = '$$'
......
import { App } from 'vue' export * from './page'
import { Router } from 'vue-router' export * from './layout'
import { PolySymbol } from '@dcloudio/uni-core'
import { initLayout } from './layout'
const layoutKey = PolySymbol(__DEV__ ? 'layout' : 'l')
export function initProvide(app: App, router?: Router) {
app.provide(layoutKey, initLayout(router))
}
import { computed, nextTick, Ref, ref } from 'vue' import { computed, inject, nextTick, provide, Ref, ref } from 'vue'
import { Router } from 'vue-router' import { Router } from 'vue-router'
import { hasOwn } from '@vue/shared' import { hasOwn } from '@vue/shared'
import { RESPONSIVE_MIN_WIDTH } from '@dcloudio/uni-shared' import { RESPONSIVE_MIN_WIDTH } from '@dcloudio/uni-shared'
import { PolySymbol } from '@dcloudio/uni-core'
import { checkMinWidth } from '../../../helpers/dom' import { checkMinWidth } from '../../../helpers/dom'
const layoutKey = PolySymbol(__DEV__ ? 'layout' : 'l')
interface ProvideLayout {} interface ProvideLayout {}
// const windowTypes = ['top', 'left', 'right'] // const windowTypes = ['top', 'left', 'right']
export function useLayout() {
return inject(layoutKey)
}
export function provideLayout(router?: Router) {
provide(layoutKey, initLayout(router))
}
// 1. 查找minWidth,确认是否需要responsive // 1. 查找minWidth,确认是否需要responsive
export function initLayout(router?: Router): ProvideLayout { function initLayout(router?: Router): ProvideLayout {
if (!__UNI_FEATURE_RESPONSIVE__) { if (!__UNI_FEATURE_RESPONSIVE__) {
return {} return {}
} }
......
此差异已折叠。
此差异已折叠。
import { App } from '@vue/runtime-core' import { App } from 'vue'
import { initApp } from '@dcloudio/uni-vue' import { initApp } from '@dcloudio/uni-vue'
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册