feat(h5): add maxWidth

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

@@ -166,7 +166,7 @@ module.exports = function getSplitChunks () {
     if (module.resource && module.reasons) {
       for (let index = 0; index < module.reasons.length; index++) {
         const m = module.reasons[index]
-        
+
         if (m.module && m.module.resource) {
           const resource = normalizePath(m.module.resource)
           if (
@@ -202,8 +202,7 @@ module.exports = function getSplitChunks () {
             matchSubPackages.has(root + '/') &&
             !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

@@ -154,10 +154,11 @@ const getPageComponents = function (inputDir, pagesJson) {
       isTabBar,
       tabBarIndex,
       isQuit: isEntry || isTabBar,
-      windowTop,
-      topWindow: pageStyle.topWindow,
-      leftWindow: pageStyle.leftWindow,
-      rightWindow: pageStyle.rightWindow
+      windowTop,
+      topWindow: pageStyle.topWindow,
+      leftWindow: pageStyle.leftWindow,
+      rightWindow: pageStyle.rightWindow,
+      maxWidth: pageStyle.maxWidth
     }
   }).filter(pageComponents => !!pageComponents)
 }
@@ -214,10 +215,11 @@ const genPageRoutes = function (pageComponents) {
       isEntry,
       isTabBar,
       windowTop,
-      tabBarIndex,
-      topWindow,
-      leftWindow,
-      rightWindow
+      tabBarIndex,
+      topWindow,
+      leftWindow,
+      rightWindow,
+      maxWidth
     }) => {
       return `
 {
@@ -228,7 +230,7 @@ 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)})
@@ -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;