feat(h5): topWindow

packages/uni-app-plus/dist/index.v3.js

@@ -137,7 +137,8 @@ var serviceContext = (function () {
 
   const keyboard = [
     'hideKeyboard',
-    'onKeyboardHeightChange'
+    'onKeyboardHeightChange',
+    'getSelectedTextRange'
   ];
 
   const ui = [
@@ -171,6 +172,7 @@ var serviceContext = (function () {
     'stopPullDownRefresh',
     'createSelectorQuery',
     'createIntersectionObserver',
+    'createMediaQueryObserver',
     'getMenuButtonBoundingClientRect'
   ];
 
@@ -969,7 +971,7 @@ var serviceContext = (function () {
     },
     canvasId: {
       type: String,
-      require: true
+      required: true
     },
     fileType: {
       type: String,
@@ -990,11 +992,11 @@ var serviceContext = (function () {
   const drawCanvas = {
     canvasId: {
       type: String,
-      require: true
+      required: true
     },
     actions: {
       type: Array,
-      require: true
+      required: true
     },
     reserve: {
       type: Boolean,
@@ -1108,7 +1110,7 @@ var serviceContext = (function () {
       default: type.WGS84
     },
     altitude: {
-      altitude: Boolean,
+      type: Boolean,
       default: false
     }
   };
@@ -8826,7 +8828,7 @@ var serviceContext = (function () {
     return webview
   }
 
-  function _navigateTo({
+  function _navigateTo ({
     url,
     path,
     query,
@@ -8860,7 +8862,7 @@ var serviceContext = (function () {
     setStatusBarStyle();
   }
 
-  function navigateTo$1({
+  function navigateTo$1 ({
     url,
     events,
     openType,
@@ -8878,7 +8880,7 @@ var serviceContext = (function () {
       animationDuration = routeStyles.animationDuration || globalStyle.animationDuration || ANI_DURATION;
     }
     const query = parseQuery(urls[1] || '');
-    navigate(path, function() {
+    navigate(path, function () {
       _navigateTo({
         url,
         path,
@@ -10339,16 +10341,6 @@ var serviceContext = (function () {
 
   const canvasEventCallbacks = createCallbacks('canvasEvent');
 
-  UniServiceJSBridge.subscribe('onDrawCanvas', ({
-    callbackId,
-    data
-  }) => {
-    const callback = canvasEventCallbacks.pop(callbackId);
-    if (callback) {
-      callback(data);
-    }
-  });
-
   UniServiceJSBridge.subscribe('onCanvasMethodCallback', ({
     callbackId,
     data
@@ -10589,17 +10581,6 @@ var serviceContext = (function () {
     'setTextBaseline', 'setLineDash'
   ];
 
-  var tempCanvas;
-
-  function getTempCanvas (width = 0, height = 0) {
-    if (!tempCanvas) {
-      tempCanvas = document.createElement('canvas');
-    }
-    tempCanvas.width = width;
-    tempCanvas.height = height;
-    return tempCanvas
-  }
-
   function TextMetrics (width) {
     this.width = width;
   }
@@ -10664,14 +10645,23 @@ var serviceContext = (function () {
       }
     }
 
-    // TODO
-    measureText (text) {
-      if (typeof document === 'object') {
-        var c2d = getTempCanvas().getContext('2d');
-        c2d.font = this.state.font;
-        return new TextMetrics(c2d.measureText(text).width || 0)
+    measureText (text, callback) {
+      const font = this.state.font;
+      {
+        const textMetrics = new TextMetrics(0);
+        if (typeof callback === 'function') {
+          const callbackId = canvasEventCallbacks.push(function ({ width }) {
+            callback(new TextMetrics(width));
+          });
+          operateCanvas(this.id, this.pageId, 'measureText', {
+            text,
+            font,
+            callbackId
+          });
         } else {
-        return new TextMetrics(0)
+          console.error('warning: measureText missing required arguments: callback');
+        }
+        return textMetrics
       }
     }
 
@@ -11753,6 +11743,51 @@ var serviceContext = (function () {
     onUIStyleChange: onUIStyleChange
   });
 
+  const getSelectedTextRangeEventCallbacks = createCallbacks('getSelectedTextRangeEvent');
+
+  UniServiceJSBridge.subscribe('onGetSelectedTextRange', ({
+    callbackId,
+    data
+  }) => {
+    console.log('onGetSelectedTextRange');
+    const callback = getSelectedTextRangeEventCallbacks.pop(callbackId);
+    if (callback) {
+      callback(data);
+    }
+  });
+
+  function getSelectedTextRange (_, callbackId) {
+    const pageId = getCurrentPageId();
+    UniServiceJSBridge.publishHandler('getSelectedTextRange', {
+      pageId,
+      callbackId: getSelectedTextRangeEventCallbacks.push(function (res) {
+        invoke$1(callbackId, res);
+      })
+    }, pageId);
+  }
+
+  var require_context_module_1_16 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getSelectedTextRange: getSelectedTextRange
+  });
+
+  let callback$1;
+
+  onMethod('onKeyboardHeightChange', res => {
+    if (callback$1) {
+      invoke$1(callback$1, res);
+    }
+  });
+
+  function onKeyboardHeightChange (callbackId) {
+    callback$1 = callbackId;
+  }
+
+  var require_context_module_1_17 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    onKeyboardHeightChange: onKeyboardHeightChange
+  });
+
   const longPressActionsCallbackId = 'longPressActionsCallback';
 
   let longPressActions = {};
@@ -11776,7 +11811,7 @@ var serviceContext = (function () {
     return invokeMethod('previewImagePlus', args)
   }
 
-  var require_context_module_1_16 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_18 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     previewImage: previewImage$1
   });
@@ -11864,7 +11899,7 @@ var serviceContext = (function () {
     return recorderManager || (recorderManager = new RecorderManager())
   }
 
-  var require_context_module_1_17 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_19 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     getRecorderManager: getRecorderManager
   });
@@ -11958,7 +11993,7 @@ var serviceContext = (function () {
     return task
   }
 
-  var require_context_module_1_18 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_20 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     downloadFile: downloadFile$1
   });
@@ -12076,7 +12111,7 @@ var serviceContext = (function () {
     return new RequestTask(requestTaskId)
   }
 
-  var require_context_module_1_19 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_21 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     request: request$1
   });
@@ -12258,7 +12293,7 @@ var serviceContext = (function () {
     callbacks$b.close = callbackId;
   }
 
-  var require_context_module_1_20 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_22 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     connectSocket: connectSocket$1,
     sendSocketMessage: sendSocketMessage$1,
@@ -12293,7 +12328,7 @@ var serviceContext = (function () {
     return updateManager || (updateManager = new UpdateManager())
   }
 
-  var require_context_module_1_21 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_23 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     getUpdateManager: getUpdateManager
   });
@@ -12387,7 +12422,7 @@ var serviceContext = (function () {
     return task
   }
 
-  var require_context_module_1_22 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_24 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     uploadFile: uploadFile$1
   });
@@ -12476,7 +12511,7 @@ var serviceContext = (function () {
     return new MPAnimation(option)
   }
 
-  var require_context_module_1_23 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_25 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     createAnimation: createAnimation
   });
@@ -12546,11 +12581,58 @@ var serviceContext = (function () {
     return new ServiceIntersectionObserver(getCurrentPageVm('createIntersectionObserver'), options)
   }
 
-  var require_context_module_1_24 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_26 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     createIntersectionObserver: createIntersectionObserver
   });
 
+  const createMediaQueryObserverCallbacks = createCallbacks('requestMediaQueryObserver');
+
+  class ServiceMediaQueryObserver {
+    constructor (component, options) {
+      this.pageId = component.$page.id;
+      this.component = component._$id || component; // app-plus 平台传输_$id
+      this.options = options;
+    }
+
+    observe (options, callback) {
+      if (typeof callback !== 'function') {
+        return
+      }
+      this.options = options;
+
+      this.reqId = createMediaQueryObserverCallbacks.push(callback);
+
+      UniServiceJSBridge.publishHandler('requestMediaQueryObserver', {
+        reqId: this.reqId,
+        component: this.component,
+        options: this.options
+      }, this.pageId);
+    }
+
+    disconnect () {
+      UniServiceJSBridge.publishHandler('destroyMediaQueryObserver', {
+        reqId: this.reqId
+      }, this.pageId);
+    }
+  }
+
+  function createMediaQueryObserver (context, options) {
+    if (!context._isVue) {
+      options = context;
+      context = null;
+    }
+    if (context) {
+      return new ServiceMediaQueryObserver(context, options)
+    }
+    return new ServiceMediaQueryObserver(getCurrentPageVm('createMediaQueryObserver'), options)
+  }
+
+  var require_context_module_1_27 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createMediaQueryObserver: createMediaQueryObserver
+  });
+
   const ContextClasss = {
     canvas: CanvasContext,
     map: MapContext,
@@ -12687,28 +12769,11 @@ var serviceContext = (function () {
     return new SelectorQuery(getCurrentPageVm('createSelectorQuery'))
   }
 
-  var require_context_module_1_25 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_28 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     createSelectorQuery: createSelectorQuery
   });
 
-  let callback$1;
-
-  onMethod('onKeyboardHeightChange', res => {
-    if (callback$1) {
-      invoke$1(callback$1, res);
-    }
-  });
-
-  function onKeyboardHeightChange (callbackId) {
-    callback$1 = callbackId;
-  }
-
-  var require_context_module_1_26 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    onKeyboardHeightChange: onKeyboardHeightChange
-  });
-
   UniServiceJSBridge.subscribe('onLoadFontFaceCallback', ({
     callbackId,
     data
@@ -12729,7 +12794,7 @@ var serviceContext = (function () {
     }, pageId);
   }
 
-  var require_context_module_1_27 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_29 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     loadFontFace: loadFontFace$1
   });
@@ -12742,7 +12807,7 @@ var serviceContext = (function () {
     return {}
   }
 
-  var require_context_module_1_28 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_30 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     pageScrollTo: pageScrollTo$1
   });
@@ -12755,7 +12820,7 @@ var serviceContext = (function () {
     return {}
   }
 
-  var require_context_module_1_29 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_31 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     setPageMeta: setPageMeta
   });
@@ -12792,7 +12857,7 @@ var serviceContext = (function () {
     callbacks$c.push(callbackId);
   }
 
-  var require_context_module_1_30 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_32 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     removeTabBarBadge: removeTabBarBadge$1,
     showTabBarRedDot: showTabBarRedDot$1,
@@ -12818,7 +12883,7 @@ var serviceContext = (function () {
     callbacks$d.splice(callbacks$d.indexOf(callbackId), 1);
   }
 
-  var require_context_module_1_31 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_33 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     onWindowResize: onWindowResize,
     offWindowResize: offWindowResize
@@ -12845,22 +12910,24 @@ var serviceContext = (function () {
   './device/compass.js': require_context_module_1_13,
   './device/network.js': require_context_module_1_14,
   './device/theme.js': require_context_module_1_15,
-  './media/preview-image.js': require_context_module_1_16,
-  './media/recorder.js': require_context_module_1_17,
-  './network/download-file.js': require_context_module_1_18,
-  './network/request.js': require_context_module_1_19,
-  './network/socket.js': require_context_module_1_20,
-  './network/update.js': require_context_module_1_21,
-  './network/upload-file.js': require_context_module_1_22,
-  './ui/create-animation.js': require_context_module_1_23,
-  './ui/create-intersection-observer.js': require_context_module_1_24,
-  './ui/create-selector-query.js': require_context_module_1_25,
-  './ui/keyboard.js': require_context_module_1_26,
-  './ui/load-font-face.js': require_context_module_1_27,
-  './ui/page-scroll-to.js': require_context_module_1_28,
-  './ui/set-page-meta.js': require_context_module_1_29,
-  './ui/tab-bar.js': require_context_module_1_30,
-  './ui/window.js': require_context_module_1_31,
+  './keyboard/get-selected-text-range.js': require_context_module_1_16,
+  './keyboard/keyboard.js': require_context_module_1_17,
+  './media/preview-image.js': require_context_module_1_18,
+  './media/recorder.js': require_context_module_1_19,
+  './network/download-file.js': require_context_module_1_20,
+  './network/request.js': require_context_module_1_21,
+  './network/socket.js': require_context_module_1_22,
+  './network/update.js': require_context_module_1_23,
+  './network/upload-file.js': require_context_module_1_24,
+  './ui/create-animation.js': require_context_module_1_25,
+  './ui/create-intersection-observer.js': require_context_module_1_26,
+  './ui/create-media-query-observer.js': require_context_module_1_27,
+  './ui/create-selector-query.js': require_context_module_1_28,
+  './ui/load-font-face.js': require_context_module_1_29,
+  './ui/page-scroll-to.js': require_context_module_1_30,
+  './ui/set-page-meta.js': require_context_module_1_31,
+  './ui/tab-bar.js': require_context_module_1_32,
+  './ui/window.js': require_context_module_1_33,
 
       };
       var req = function req(key) {
@@ -13013,6 +13080,9 @@ var serviceContext = (function () {
 
     function onAppEnterForeground () {
       const pages = getCurrentPages();
+      if (pages.length === 0) {
+        return
+      }
       const page = pages[pages.length - 1];
       const args = {
         path: page.route,
@@ -13109,11 +13179,29 @@ var serviceContext = (function () {
       }
     }
 
+    const requestMediaQueryObserverCallbacks = createCallbacks('requestMediaQueryObserver');
+
+    function onRequestMediaQueryObserver ({
+      reqId,
+      reqEnd,
+      res
+    }) {
+      const callback = requestMediaQueryObserverCallbacks.get(reqId);
+      if (callback) {
+        if (reqEnd) {
+          requestMediaQueryObserverCallbacks.pop(reqId);
+          return
+        }
+        callback(res);
+      }
+    }
+
     subscribe('onPageScroll', createPageEvent('onPageScroll'));
     subscribe('onReachBottom', createPageEvent('onReachBottom'));
 
     subscribe('onRequestComponentInfo', onRequestComponentInfo);
     subscribe('onRequestComponentObserver', onRequestComponentObserver);
+    subscribe('onRequestMediaQueryObserver', onRequestMediaQueryObserver);
   }
 
   function perf (type, startTime) {
@@ -13581,7 +13669,8 @@ var serviceContext = (function () {
     'uni-textarea',
     'uni-video',
     'uni-view',
-    'uni-web-view'
+    'uni-web-view',
+    'uni-match-media'
   ];
 
   // 使用白名单过滤（前期有一批自定义组件使用了 uni-）
@@ -13697,6 +13786,10 @@ var serviceContext = (function () {
       return uni.createIntersectionObserver(this, options)
     };
 
+    Vue.prototype.createMediaQueryObserver = function createMediaQueryObserver (options) {
+      return uni.createMediaQueryObserver(this, options)
+    };
+
     Vue.prototype.selectComponent = function selectComponent (selector) {
       return querySelector(this, parseSelector(selector))
     };
@@ -14391,7 +14484,7 @@ var serviceContext = (function () {
   }
 
   var vuePlugin = {
-    install(Vue, options) {
+    install (Vue, options) {
       initVue(Vue);
 
       initData(Vue);
@@ -14399,18 +14492,21 @@ var serviceContext = (function () {
 
       initPolyfill(Vue);
 
-      Vue.prototype.getOpenerEventChannel = function() {
-        return this.$root.$scope.eventChannel || new EventChannel()
+      Vue.prototype.getOpenerEventChannel = function () {
+        if (!this.$root.$scope.eventChannel) {
+          this.$root.$scope.eventChannel = new EventChannel();
+        }
+        return this.$root.$scope.eventChannel
       };
 
       Object.defineProperty(Vue.prototype, '$page', {
-        get() {
+        get () {
           return this.$root.$scope.$page
         }
       });
       // 兼容旧版本
       Object.defineProperty(Vue.prototype, '$mp', {
-        get() {
+        get () {
           return {
             page: this.$root.$scope
           }
@@ -14418,9 +14514,9 @@ var serviceContext = (function () {
       });
 
       const oldMount = Vue.prototype.$mount;
-      Vue.prototype.$mount = function mount(el, hydrating) {
+      Vue.prototype.$mount = function mount (el, hydrating) {
         if (this.mpType === 'app') {
-          this.$options.render = function() {};
+          this.$options.render = function () {};
           if (weex.config.preload) { // preload
             if (process.env.NODE_ENV !== 'production') {
               console.log('[uni-app] preload app-service.js');
@@ -14441,7 +14537,7 @@ var serviceContext = (function () {
         return oldMount.call(this, el, hydrating)
       };
 
-      Vue.prototype.$nextTick = function nextTick(cb) {
+      Vue.prototype.$nextTick = function nextTick (cb) {
         const renderWatcher = this._watcher;
         const callback = typeof cb === 'function';
         const result = new Promise((resolve) => {

packages/uni-cli-shared/lib/tags.js

@@ -41,5 +41,5 @@ module.exports = {
   video: ['app-plus', 'mp-weixin', 'h5'],
   view: ['app-plus', 'mp-weixin', 'h5'],
   'web-view': ['app-plus', 'mp-weixin'],
-  'match-media':['app-plus', 'mp-weixin', 'h5']
+  'match-media': ['app-plus', 'mp-weixin', 'h5']
 }

packages/uni-h5/manifest.json

@@ -301,6 +301,14 @@
                 "/core/view/components/swiper-item/index.vue",
                 "SwiperItem"
             ],
+            [
+                "/core/view/components/movable-area/index.vue",
+                "MovableArea"
+            ],
+            [
+                "/core/view/components/movable-view/index.vue",
+                "MovableView"
+            ],
             [
                 "/platforms/h5/components/system-routes/preview-image/index.vue",
                 "PreviewImage"
@@ -460,11 +468,15 @@
         []
     ],
     "hideKeyboard": [
-        "/platforms/h5/service/api/device/hide-keyboard.js",
+        "/platforms/h5/service/api/keyboard/keyboard.js",
         []
     ],
     "onKeyboardHeightChange": [
-        "/core/service/api/ui/keyboard.js",
+        "/core/service/api/keyboard/keyboard.js",
+        []
+    ],
+    "getSelectedTextRange": [
+        "/core/service/api/keyboard/get-selected-text-range.js",
         []
     ],
     "showToast": [
@@ -732,6 +744,10 @@
             ]
         ]
     ],
+    "createMediaQueryObserver": [
+        "/core/service/api/ui/create-media-query-observer.js",
+        []
+    ],
     "$emit": [
         "/platforms/h5/service/api/base/event-bus.js",
         [

packages/webpack-uni-pages-loader/lib/platforms/h5.js

@@ -154,7 +154,10 @@ const getPageComponents = function (inputDir, pagesJson) {
       isTabBar,
       tabBarIndex,
       isQuit: isEntry || isTabBar,
-      windowTop
+      windowTop,
+      topWindow: pageStyle.topWindow,
+      leftWindow: pageStyle.leftWindow,
+      rightWindow: pageStyle.rightWindow
     }
   }).filter(pageComponents => !!pageComponents)
 }
@@ -211,7 +214,10 @@ const genPageRoutes = function (pageComponents) {
       isEntry,
       isTabBar,
       windowTop,
-      tabBarIndex
+      tabBarIndex,
+      topWindow,
+      leftWindow,
+      rightWindow
     }) => {
       return `
 {
@@ -222,9 +228,8 @@ component: {
       'Page',
       {
         props: Object.assign({
-          ${isQuit ? 'isQuit:true,\n' : ''}
-          ${isEntry ? 'isEntry:true,\n' : ''}
-          ${isTabBar ? 'isTabBar:true,\n' : ''}
+          ${isQuit ? 'isQuit:true,\n' : ''}${isEntry ? 'isEntry:true,\n' : ''}${isTabBar ? 'isTabBar:true,\n' : ''}
+          ${topWindow === false ? 'topWindow:false,\n' : ''}${leftWindow === false ? 'leftWindow:false,\n' : ''}${rightWindow === false ? 'rightWindow:false,\n' : ''}
           ${isTabBar ? ('tabBarIndex:' + tabBarIndex) : ''}
         },__uniConfig.globalStyle,${JSON.stringify(props)})
       },
@@ -238,7 +243,7 @@ component: {
 },
 meta:{${isQuit ? '\nid:' + (id++) + ',' : ''}
   name:'${name}',
-  isNVue:${isNVue},
+  isNVue:${isNVue},${topWindow === false ? 'topWindow:false,\n' : ''}${leftWindow === false ? 'leftWindow:false,\n' : ''}${rightWindow === false ? 'rightWindow:false,\n' : ''}
   pagePath:'${route}'${isQuit ? ',\nisQuit:true' : ''}${isEntry ? ',\nisEntry:true' : ''}${isTabBar ? ',\nisTabBar:true' : ''}${tabBarIndex !== -1 ? (',\ntabBarIndex:' + tabBarIndex) : ''},
   windowTop:${windowTop}
 }
@@ -360,9 +365,17 @@ function filterPages (pagesJson, includes) {
 function genLayoutComponentsCode (pagesJson) {
   const code = []
   const {
+    topWindow,
     leftWindow,
     rightWindow
   } = pagesJson
+  if (topWindow && topWindow.path) {
+    code.push(
+      `import TopWindow from './${topWindow.path}';
+${topWindow.style ? ('TopWindow.style=' + JSON.stringify(topWindow.style)) : ''}
+Vue.component('VUniTopWindow',TopWindow);`
+    )
+  }
   if (leftWindow && leftWindow.path) {
     code.push(
       `import LeftWindow from './${leftWindow.path}';

src/core/helpers/tags.js

@@ -3,6 +3,7 @@ module.exports = [
   'uni-layout',
   'uni-content',
   'uni-main',
+  'uni-top-window',
   'uni-left-window',
   'uni-right-window',
   'uni-tabbar',

src/platforms/h5/components/app/layout.vue

@@ -3,15 +3,26 @@
     v-if="responsive"
     :class="{'uni-app--showlayout':showLayout}"
   >
-    <!--TODO header-->
     <uni-content>
       <uni-main>
+        <uni-top-window
+          v-if="topWindow"
+          v-show="showLayout&&showTopWindow"
+          ref="topWindow"
+          :style="topWindowStyle"
+        >
+          <v-uni-top-window
+            ref="top"
+            @hook:mounted="onTopWindowInit"
+          />
+        </uni-top-window>
         <keep-alive :include="keepAliveInclude">
           <router-view :key="routerKey" />
         </keep-alive>
       </uni-main>
       <uni-left-window
         v-if="leftWindow"
+        v-show="showLayout&&showLeftWindow"
         ref="leftWindow"
         :style="leftWindowStyle"
       >
@@ -22,6 +33,7 @@
       </uni-left-window>
       <uni-right-window
         v-if="rightWindow"
+        v-show="showLayout&&showRightWindow"
         ref="rightWindow"
         :style="rightWindowStyle"
       >
@@ -89,14 +101,46 @@ export default {
     return {
       showLayout: true,
       leftWindowStyle: '',
-      rightWindowStyle: ''
+      rightWindowStyle: '',
+      topWindowStyle: '',
+      showTopWindow: true,
+      showLeftWindow: true,
+      showRightWindow: true
+    }
+  },
+  watch: {
+    $route (newRoute, oldRoute) {
+      this.initShowWindow(newRoute)
+    },
+    showTopWindow (newVal, val) {
+      if (newVal) {
+        this.$nextTick(this.onTopWindowInit)
+      } else {
+        updateCssVar('--window-top', '0px')
+      }
+    },
+    showLeftWindow (newVal, val) {
+      if (newVal) {
+        this.$nextTick(this.onLeftWindowInit)
+      } else {
+        updateCssVar('--window-left', '0px')
+      }
+    },
+    showRightWindow (newVal, val) {
+      if (newVal) {
+        this.$nextTick(this.onRightWindowInit)
+      } else {
+        updateCssVar('--window-right', '0px')
+      }
     }
   },
   beforeCreate () {
+    updateCssVar('--window-top', '0px')
     updateCssVar('--window-left', '0px')
     updateCssVar('--window-right', '0px')
   },
   created () {
+    this.topWindow = Vue.component('VUniTopWindow')
     this.leftWindow = Vue.component('VUniLeftWindow')
     this.rightWindow = Vue.component('VUniRightWindow')
     if ( // 低版本不提供 responsive 支持
@@ -104,7 +148,8 @@ export default {
         uni.canIUse('css.var') &&
         window.matchMedia
     ) {
-      this.responsive = Math.max.apply(null, sizes) > minWidth
+      // 存在 topWindow 时，视为始终要支持 responsive （如 pc-admin 的情况，需要在 top 中切换 left 或 right）
+      this.responsive = this.topWindow || Math.max.apply(null, sizes) > minWidth
       if (this.responsive) {
         if (this.leftWindow && this.leftWindow.options.style) {
           this.leftWindowStyle = this.leftWindow.options.style
@@ -115,8 +160,23 @@ export default {
         this.initMediaQuery()
       }
     }
+    this.initShowWindow(this.$route)
   },
   methods: {
+    initShowWindow (newRoute) {
+      if (!this.responsive) {
+        return
+      }
+      if (this.topWindow) {
+        this.showTopWindow = newRoute.meta.topWindow !== false
+      }
+      if (this.leftWindow) {
+        this.showLeftWindow = newRoute.meta.leftWindow !== false
+      }
+      if (this.rightWindow) {
+        this.showRightWindow = newRoute.meta.rightWindow !== false
+      }
+    },
     initMediaQuery () {
       if (!window.matchMedia) {
         return
@@ -125,12 +185,21 @@ export default {
       mediaQueryList.addListener((e) => {
         this.showLayout = e.matches
         this.$nextTick(() => {
+          this.topWindow && this.onTopWindowInit()
           this.leftWindow && this.onLeftWindowInit()
           this.rightWindow && this.onRightWindowInit()
         })
       })
       this.showLayout = mediaQueryList.matches
     },
+    onTopWindowInit () {
+      // TODO page header
+      if (this.topWindowStyle && this.topWindowStyle.width) {
+        updateCssVar('--window-top', this.$refs.topWindow.offsetHeight + 'px')
+      } else {
+        updateCssVar('--window-top', this.$refs.top.$el.offsetHeight + 'px')
+      }
+    },
     onLeftWindowInit () {
       if (this.leftWindowStyle && this.leftWindowStyle.width) {
         updateCssVar('--window-left', this.$refs.leftWindow.offsetWidth + 'px')
@@ -158,7 +227,6 @@ export default {
 
   uni-main {
     flex: 1;
-    overflow: auto;
   }
 
   uni-left-window {

src/platforms/h5/components/page/index.vue

 <template>
   <uni-page :data-page="$route.meta.pagePath">
     <page-head
-      v-if="navigationBar.type!=='none'"
+      v-if="!hasTopWindow && navigationBar.type!=='none'"
       v-bind="navigationBar"
     />
     <page-refresh
@@ -32,6 +32,8 @@
   }
 </style>
 <script>
+import Vue from 'vue'
+
 import {
   upx2px
 } from 'uni-helpers/index'
@@ -159,9 +161,16 @@ export default {
       default () {
         return {}
       }
+    },
+    topWindow: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
+    // 目前简单处理，存在topWindow时，始终不显示page head
+    const hasTopWindow = this.topWindow !== false && !!Vue.component('VUniTopWindow')
+    let navigationBar = {}
     const titleNViewTypeList = {
       none: 'default',
       auto: 'transparent',
@@ -198,7 +207,7 @@ export default {
       NO: false
     }
 
-    const navigationBar = mergeTitleNView({
+    navigationBar = mergeTitleNView({
       loading: false,
       backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
       backgroundColor: this.navigationBarBackgroundColor,
@@ -231,6 +240,7 @@ export default {
     refreshOptions.range = upx2px(refreshOptions.range)
 
     return {
+      hasTopWindow,
       navigationBar,
       refreshOptions
     }

src/platforms/h5/view/bridge/subscribe/index.js

+import Vue from 'vue'
+
 import {
   isPlainObject,
   supportsPassive
@@ -28,10 +30,14 @@ function updateCssVar (vm) {
     const windowTopValue = navigationBarType === 'default' || navigationBarType === 'float' ? NAVBAR_HEIGHT : 0
     const windowBottomValue = getApp().$children[0].showTabBar ? TABBAR_HEIGHT : 0
     const envMethod = uni.canIUse('css.env') ? 'env' : (uni.canIUse('css.constant') ? 'constant' : '')
-    const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))` : `${windowTopValue}px`
-    const windowBottom = windowBottomValue && envMethod ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : `${windowBottomValue}px`
+    const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))`
+      : `${windowTopValue}px`
+    const windowBottom = windowBottomValue && envMethod
+      ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : `${windowBottomValue}px`
     const style = document.documentElement.style
+    if (!Vue.component('VUniTopWindow') || pageVm.topWindow === false) { // TODO 目前简单处理，只要包含topWindow，则不再更新--window-top
       style.setProperty('--window-top', windowTop)
+    }
     style.setProperty('--window-bottom', windowBottom)
     console.debug(`${vm.$page.route}[${vm.$page.id}]：--window-top=${windowTop}`)
     console.debug(`${vm.$page.route}[${vm.$page.id}]：--window-bottom=${windowBottom}`)