feat(h5): PageComponent

packages/global.d.ts

@@ -32,6 +32,7 @@ declare var __UNI_FEATURE_TOPWINDOW__: boolean
 declare var __UNI_FEATURE_LEFTWINDOW__: boolean
 declare var __UNI_FEATURE_RIGHTWINDOW__: boolean
 declare var __UNI_FEATURE_RESPONSIVE__: boolean
+declare var __UNI_FEATURE_PULL_DOWN_REFRESH__: boolean
 // TODO
 declare var __uniRoutes: any
 declare var __uniConfig: UniApp.UniConfig

packages/shims-uni-app.d.ts

@@ -10,10 +10,42 @@ declare namespace UniApp {
     router: {
       strict: boolean
     }
+    globalStyle: {
+      navigationBar: PageNavigationBar
+      refreshOptions?: PageRefreshOptions
+    }
     topWindow?: LayoutWindowOptions
     leftWindow?: 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 {
     path: string
     style?: Record<string, any>

packages/uni-core/src/helpers/util.ts

 export function PolySymbol(name: string) {
   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
+}

packages/uni-h5/src/framework/components/page/index.ts

+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 */,
+      }
+    )
+  )
+}

packages/uni-h5/src/framework/components/page/index.vue

@@ -9,10 +9,10 @@
     />
     <page-body
       v-if="enablePullDownRefresh"
-      @touchstart.native="_touchstart"
-      @touchmove.native="_touchmove"
-      @touchend.native="_touchend"
-      @touchcancel.native="_touchend"
+      @touchstart="_touchstart"
+      @touchmove="_touchmove"
+      @touchend="_touchend"
+      @touchcancel="_touchend"
     >
       <slot name="page" />
     </page-body>

packages/uni-h5/src/framework/components/page/pageBody.ts

+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 */
+  )
+}

packages/uni-h5/src/framework/components/page/pageBody.vue

 <template>
+  <div></div>
   <uni-page-wrapper>
     <uni-page-body>
       <slot />

packages/uni-h5/src/framework/components/page/pageHead.ts

+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)
+    )
+  },
+})

packages/uni-h5/src/framework/components/page/pageRefresh/index.vue

+<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>

packages/uni-h5/src/framework/plugin/index.ts

@@ -7,7 +7,6 @@ import { isCustomElement } from '@dcloudio/uni-shared'
 import { initRouter } from './router'
 import { initSystemComponents } from './components'
 import { initMixin } from './mixin'
-import { initProvide } from './provide'
 
 export default {
   install(app: App) {
@@ -19,6 +18,9 @@ export default {
     initSystemComponents(app)
 
     initMixin(app)
-    initProvide(app, (__UNI_FEATURE_PAGES__ && initRouter(app)) || undefined)
+
+    if (__UNI_FEATURE_PAGES__) {
+      initRouter(app)
+    }
   },
 }

packages/uni-h5/src/framework/plugin/page.ts

-import {
-  computed,
-  nextTick,
-  VNode,
-  ComponentPublicInstance,
-  ComputedRef,
-} from 'vue'
+import { computed, nextTick, VNode, ComponentPublicInstance } from 'vue'
 import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router'
 
 const SEP = '$$'

packages/uni-h5/src/framework/plugin/provide/index.ts

-import { App } from 'vue'
-import { Router } from 'vue-router'
-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))
-}
+export * from './page'
+export * from './layout'

packages/uni-h5/src/framework/plugin/provide/layout.ts

-import { computed, nextTick, Ref, ref } from 'vue'
+import { computed, inject, nextTick, provide, Ref, ref } from 'vue'
 import { Router } from 'vue-router'
 import { hasOwn } from '@vue/shared'
 import { RESPONSIVE_MIN_WIDTH } from '@dcloudio/uni-shared'
+import { PolySymbol } from '@dcloudio/uni-core'
+
 import { checkMinWidth } from '../../../helpers/dom'
 
+const layoutKey = PolySymbol(__DEV__ ? 'layout' : 'l')
+
 interface ProvideLayout {}
 
 // const windowTypes = ['top', 'left', 'right']
 
+export function useLayout() {
+  return inject(layoutKey)
+}
+
+export function provideLayout(router?: Router) {
+  provide(layoutKey, initLayout(router))
+}
 // 1. 查找minWidth，确认是否需要responsive
-export function initLayout(router?: Router): ProvideLayout {
+function initLayout(router?: Router): ProvideLayout {
   if (!__UNI_FEATURE_RESPONSIVE__) {
     return {}
   }

packages/uni-mp-vue/src/plugin.ts

-import { App } from '@vue/runtime-core'
+import { App } from 'vue'
 
 import { initApp } from '@dcloudio/uni-vue'