feat(h5): add maxWidth

packages/vue-cli-plugin-uni/lib/split-chunks.js

@@ -203,7 +203,6 @@ module.exports = function getSplitChunks () {
             !hasMainPackage(chunks) &&
             !hasMainPackageComponent(module, matchSubPackages.values().next().value)
           ) {
-
             if (process.env.UNI_OPT_TRACE) {
               console.log(root, module.resource, chunks.map(chunk => chunk.name))
             }

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

@@ -157,7 +157,8 @@ const getPageComponents = function (inputDir, pagesJson) {
       windowTop,
       topWindow: pageStyle.topWindow,
       leftWindow: pageStyle.leftWindow,
-      rightWindow: pageStyle.rightWindow
+      rightWindow: pageStyle.rightWindow,
+      maxWidth: pageStyle.maxWidth
     }
   }).filter(pageComponents => !!pageComponents)
 }
@@ -217,7 +218,8 @@ const genPageRoutes = function (pageComponents) {
       tabBarIndex,
       topWindow,
       leftWindow,
-      rightWindow
+      rightWindow,
+      maxWidth
     }) => {
       return `
 {
@@ -243,7 +245,7 @@ component: {
 },
 meta:{${isQuit ? '\nid:' + (id++) + ',' : ''}
   name:'${name}',
-  isNVue:${isNVue},${topWindow === false ? 'topWindow:false,\n' : ''}${leftWindow === false ? 'leftWindow:false,\n' : ''}${rightWindow === false ? 'rightWindow:false,\n' : ''}
+  isNVue:${isNVue},maxWidth:${maxWidth || 0},${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}
 }

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

 <template>
-  <uni-app :class="{'uni-app--showtabbar':showTabBar}">
+  <uni-app :class="{'uni-app--showtabbar':showTabBar,'uni-app--maxwidth':showMaxWidth}">
     <layout
       ref="layout"
       :router-key="key"
       :keep-alive-include="keepAliveInclude"
+      @maxWidth="onMaxWidth"
     />
     <tab-bar
       v-if="hasTabBar"
@@ -63,7 +64,8 @@ export default {
       transitionName: 'fade',
       hideTabBar: false,
       tabBar: __uniConfig.tabBar || {},
-      sysComponents: this.$sysComponents
+      sysComponents: this.$sysComponents,
+      showMaxWidth: false
     }
   },
   computed: {
@@ -113,6 +115,11 @@ export default {
         UniServiceJSBridge.emit('onAppEnterBackground')
       }
     })
+  },
+  methods: {
+    onMaxWidth (showMaxWidth) {
+      this.showMaxWidth = showMaxWidth
+    }
   }
 }
 </script>

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

@@ -134,6 +134,7 @@ export default {
   },
   data () {
     return {
+      marginWidth: 0,
       leftWindowStyle: '',
       rightWindowStyle: '',
       topWindowStyle: '',
@@ -144,7 +145,8 @@ export default {
       apiShowTopWindow: false,
       apiShowLeftWindow: false,
       apiShowRightWindow: false,
-      navigationBarTitleText: ''
+      navigationBarTitleText: '',
+      maxWidthMeidaQuery: false
     }
   },
   computed: {
@@ -175,6 +177,9 @@ export default {
     }
   },
   watch: {
+    $route () {
+      this.checkMaxWidth()
+    },
     showTopWindow (newVal, val) {
       if (newVal) {
         this.$nextTick(this.onTopWindowInit)
@@ -230,6 +235,10 @@ export default {
         })
       }
     }
+    this.initMaxWidth()
+  },
+  mounted () {
+    this.checkMaxWidth()
   },
   methods: {
     resetApiShowWindow () {
@@ -257,6 +266,42 @@ export default {
         }
       }
     },
+    initMaxWidth () {
+      window.addEventListener('resize', () => {
+        this.checkMaxWidth()
+      })
+    },
+    checkMaxWidth () {
+      const maxWidth = parseInt(this.$route.meta.maxWidth)
+      let showMaxWidth = false
+      if (window.innerWidth > maxWidth) {
+        showMaxWidth = true
+      } else {
+        showMaxWidth = false
+      }
+      this.$emit('maxWidth', showMaxWidth)
+      if (!this.$containerElem) {
+        this.$containerElem = document.querySelector('uni-content,uni-app')
+      }
+      if (!this.$containerElem) {
+        return
+      }
+      if (showMaxWidth && maxWidth) {
+        this.marginWidth = (window.innerWidth - maxWidth) / 2
+        this.$nextTick(() => {
+          this.onLeftWindowInit()
+          this.onRightWindowInit()
+          this.$containerElem.setAttribute('style', 'max-width:' + maxWidth + 'px;margin:0 auto')
+        })
+      } else {
+        this.marginWidth = 0
+        this.$nextTick(() => {
+          this.onLeftWindowInit()
+          this.onRightWindowInit()
+          this.$containerElem.removeAttribute('style')
+        })
+      }
+    },
     initWindowMinWidth (type) {
       const name = type + 'Window'
       if (this[name]) {
@@ -300,22 +345,24 @@ export default {
     },
     onLeftWindowInit () {
       if (!(this.responsive && this.leftWindow)) {
+        updateCssVar('--window-left', this.marginWidth + 'px')
         return
       }
       if (this.leftWindowStyle && this.leftWindowStyle.width) {
-        updateCssVar('--window-left', this.$refs.leftWindow.offsetWidth + 'px')
+        updateCssVar('--window-left', this.$refs.leftWindow.offsetWidth + this.marginWidth + 'px')
       } else {
-        updateCssVar('--window-left', this.$refs.left.$el.offsetWidth + 'px')
+        updateCssVar('--window-left', this.$refs.left.$el.offsetWidth + this.marginWidth + 'px')
       }
     },
     onRightWindowInit () {
       if (!(this.responsive && this.rightWindow)) {
+        updateCssVar('--window-right', this.marginWidth + 'px')
         return
       }
       if (this.rightWindowStyle && this.rightWindowStyle.width) {
-        updateCssVar('--window-right', this.$refs.rightWindow.offsetWidth + 'px')
+        updateCssVar('--window-right', this.$refs.rightWindow.offsetWidth + this.marginWidth + 'px')
       } else {
-        updateCssVar('--window-right', this.$refs.right.$el.offsetWidth + 'px')
+        updateCssVar('--window-right', this.$refs.right.$el.offsetWidth + this.marginWidth + 'px')
       }
     }
   }

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

@@ -66,9 +66,9 @@ uni-tabbar {
 uni-tabbar .uni-tabbar {
   display: flex;
   position: fixed;
-  left: 0;
+  left: var(--window-left);
+  right: var(--window-right);
   bottom: 0;
-  width: 100%;
   z-index: 998;
   box-sizing: border-box;
   padding-bottom: 0;