Merge branch 'dev' into alpha

# Conflicts:
#	packages/uni-h5/dist/index.css
#	packages/uni-h5/dist/index.umd.min.js

docs/collocation/pages.md

@@ -51,7 +51,10 @@
 			"collapse-tree-item":"/components/collapse-tree-item"
 		},
 		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
-		"pageOrientation": "portrait"//横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
+		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
+		"rpxCalcMaxDeviceWidth": 960,
+		"rpxCalcBaseDeviceWidth": 375,
+		"rpxCalcIncludeWidth": 750
 	},
 	"tabBar": {
 		"color": "#7A7E83",
@@ -122,6 +125,9 @@
 |mp-qq|Object||设置编译到 mp-qq 平台的特定样式|QQ小程序|
 |usingComponents|Object| |引用小程序组件，参考 [小程序组件](/frame?id=小程序组件支持)||
 |renderingMode|String| |同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层|微信小程序|
+|rpxCalcMaxDeviceWidth|Number|960|rpx 计算所支持的最大设备宽度，单位 px|App、H5（2.8.12+）|
+|rpxCalcBaseDeviceWidth|Number|375|rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px|App、H5（2.8.12+）|
+|rpxCalcIncludeWidth|Number|750|rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx|App、H5（2.8.12+）|
 
 
 **注意**

packages/vue-cli-plugin-uni/lib/h5/compiler-options.js

 const {
   tags
 } = require('@dcloudio/uni-cli-shared')
+const parser = require('@babel/parser')
+const t = require('@babel/types')
 
 const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/
 
+function isFunction (expr) {
+  try {
+    const body = parser.parse(expr).program.body[0]
+    const expression = body.expression
+    return t.isFunctionDeclaration(body) || t.isArrowFunctionExpression(expression) || t.isFunctionExpression(expression)
+  } catch (error) { }
+}
+
 function processEvent (expr, filterModules) {
   const isMethodPath = simplePathRE.test(expr)
-  if (isMethodPath) {
+  if (isMethodPath || isFunction(expr)) {
     if (filterModules.find(name => expr.indexOf(name + '.') === 0)) {
       return `
 $event = $handleWxsEvent($event);
-${expr}($event, $getComponentDescriptor())
+(${expr})($event, $getComponentDescriptor())
 `
     } else {
-      expr = expr + '(...arguments)'
+      expr = `(${expr})(...arguments)`
     }
   }
   return `
@@ -97,4 +107,4 @@ module.exports = {
       }
     }
   }]
-}
+}

packages/webpack-uni-pages-loader/lib/index-new.js

@@ -17,7 +17,7 @@ const {
 } = require('@dcloudio/uni-cli-shared/lib/cache')
 
 const {
-  initTheme,
+  initTheme,
   parseTheme
 } = require('@dcloudio/uni-cli-shared/lib/theme')
 
@@ -95,7 +95,7 @@ module.exports = function (content, map) {
     })
   }
 
-  const jsonFiles = require('./platforms/' + process.env.UNI_PLATFORM)(pagesJson, manifestJson)
+  const jsonFiles = require('./platforms/' + process.env.UNI_PLATFORM)(pagesJson, manifestJson, isAppView)
 
   if (jsonFiles && jsonFiles.length) {
     if (process.env.UNI_USING_V3) {
@@ -144,4 +144,4 @@ module.exports = function (content, map) {
   }
 
   this.callback(null, '', map)
-}
+}

packages/webpack-uni-pages-loader/lib/platforms/app-plus/define-pages.js

@@ -7,10 +7,14 @@ function generatePageCode (pages, pageOptions) {
   }).join('\n')
 }
 
-module.exports = function definePages (appJson) {
+function generateUniConfig (appJson, isAppView) {
+  return isAppView ? `window.__uniConfig = ${JSON.stringify({ window: appJson.window }, null)};` : ''
+}
+
+module.exports = function definePages (appJson, isAppView) {
   return {
     name: 'define-pages.js',
-    content: `
+    content: `
 if (typeof Promise !== 'undefined' && !Promise.prototype.finally) {
   Promise.prototype.finally = function(callback) {
     const promise = this.constructor
@@ -22,10 +26,11 @@ if (typeof Promise !== 'undefined' && !Promise.prototype.finally) {
     )
   }
 }
+${generateUniConfig(appJson, isAppView)}
 if(uni.restoreGlobal){
   uni.restoreGlobal(weex,plus,setTimeout,clearTimeout,setInterval,clearInterval)
 }
 ${generatePageCode(appJson.pages, appJson.page)}
 `
   }
-}
+}

packages/webpack-uni-pages-loader/lib/platforms/app-plus/index.js

@@ -91,7 +91,7 @@ function updateFileFlag (appJson) {
   }
 }
 
-module.exports = function (pagesJson, userManifestJson) {
+module.exports = function (pagesJson, userManifestJson, isAppView) {
   const {
     app
   } = require('../mp')(pagesJson, userManifestJson)
@@ -179,7 +179,7 @@ module.exports = function (pagesJson, userManifestJson) {
   if (!manifestJson.permissions) {
     manifestJson.permissions = {}
   }
-
+
   const nvuePages = process.env.UNI_USING_V3_NATIVE ? pagesJson.pages : (pagesJson.nvue && pagesJson.nvue.pages)
 
   if (nvuePages && nvuePages.length) {
@@ -197,12 +197,12 @@ module.exports = function (pagesJson, userManifestJson) {
     appJson.nvue = {
       pages
     }
-
-    if (process.env.UNI_USING_V3_NATIVE) {
-      appJson.nvue.entryPagePath = nvuePages[0]
-    } else if (pagesJson.nvue.entryPagePath) {
-      appJson.nvue.entryPagePath = pagesJson.nvue.entryPagePath
-    }
+
+    if (process.env.UNI_USING_V3_NATIVE) {
+      appJson.nvue.entryPagePath = nvuePages[0]
+    } else if (pagesJson.nvue.entryPagePath) {
+      appJson.nvue.entryPagePath = pagesJson.nvue.entryPagePath
+    }
 
     // nvue 权限
     manifestJson.permissions.UniNView = {
@@ -347,10 +347,10 @@ module.exports = function (pagesJson, userManifestJson) {
         resources[key.replace(/\.nvue$/, '.js')] = confusion.resources[key]
       }
       if (!Object.keys(nvuePages).find(path => {
-        const subNVues = nvuePages[path].window.subNVues || []
-        // TODO
-        return (path.replace(/\.html$/, '.nvue') === key || path.replace(/\.html$/, '.nvue') + '.nvue' === key) || subNVues.find(({
-          path
+        const subNVues = nvuePages[path].window.subNVues || []
+        // TODO
+        return (path.replace(/\.html$/, '.nvue') === key || path.replace(/\.html$/, '.nvue') + '.nvue' === key) || subNVues.find(({
+          path
         }) => path === key.replace(/\.nvue$/, ''))
       }) && !pagesJson.pages.find(({
         style = {}
@@ -514,7 +514,7 @@ module.exports = function (pagesJson, userManifestJson) {
       manifest,
       pagesJson,
       normalizeNetworkTimeout
-    })
+    }, isAppView)
   }
   return [app, manifest]
-}
+}

packages/webpack-uni-pages-loader/lib/platforms/app-plus/index.v3.js

@@ -52,7 +52,7 @@ module.exports = function (appJson, manifestJson, {
   pagesJson,
   manifest,
   normalizeNetworkTimeout
-}) {
+}, isAppView) {
   parseEntryPagePath(appJson, manifestJson)
 
   // timeout
@@ -82,12 +82,12 @@ module.exports = function (appJson, manifestJson, {
   // 删除首页 style 中的 uni-app 配置（不注入 app-view.js）
   delete manifestJson.plus.launchwebview['uni-app']
 
-  const entryPagePath = appJson.entryPagePath
-  if (!appJson.page[entryPagePath]) {
-    console.error(
-      `pages.json condition['list'][current]['path']: ${entryPagePath} 需在 pages 数组中`
-    )
-    process.exit(0)
+  const entryPagePath = appJson.entryPagePath
+  if (!appJson.page[entryPagePath]) {
+    console.error(
+      `pages.json condition['list'][current]['path']: ${entryPagePath} 需在 pages 数组中`
+    )
+    process.exit(0)
   }
   if (appJson.page[entryPagePath].nvue) { // 首页是 nvue
     manifestJson.launch_path = '' // 首页地址为空
@@ -109,5 +109,5 @@ module.exports = function (appJson, manifestJson, {
   manifest.name = 'manifest.json'
   manifest.content = JSON.stringify(manifest.content)
   delete appJson.nvue
-  return [manifest, definePages(appJson), appConfigService(appJson)]
+  return [manifest, definePages(appJson, isAppView), appConfigService(appJson)]
 }

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

@@ -436,17 +436,6 @@ module.exports = function (pagesJson, manifestJson, loader) {
     qqMapKey = sdkConfigs.maps.qqmap.key
   }
 
-  let minWidth = 768
-
-  if (
-    manifestJson &&
-    manifestJson.h5 &&
-    manifestJson.h5.responsive &&
-    manifestJson.h5.responsive.minWidth
-  ) {
-    minWidth = parseInt(manifestJson.h5.responsive.minWidth) || minWidth
-  }
-
   return `
 import Vue from 'vue'
 ${genLayoutComponentsCode(pagesJson)}
@@ -454,7 +443,6 @@ global['____${h5.appid}____'] = true;
 delete global['____${h5.appid}____'];
 global.__uniConfig = ${JSON.stringify(pagesJson)};
 global.__uniConfig.compilerVersion = '${compilerVersion}';
-global.__uniConfig.responsive = { minWidth: ${minWidth} };
 global.__uniConfig.router = ${JSON.stringify(h5.router)};
 global.__uniConfig.publicPath = ${JSON.stringify(h5.publicPath)};
 global.__uniConfig['async'] = ${JSON.stringify(h5.async)};

src/core/service/api/base/upx2px.js

@@ -16,6 +16,11 @@ function checkDeviceWidth () {
   isIOS = platform === 'ios'
 }
 
+function checkValue (value, defaultValue) {
+  value = Number(value)
+  return isNaN(value) ? defaultValue : value
+}
+
 export function upx2px (number, newDeviceWidth) {
   if (deviceWidth === 0) {
     checkDeviceWidth()
@@ -25,7 +30,13 @@ export function upx2px (number, newDeviceWidth) {
   if (number === 0) {
     return 0
   }
-  let result = (number / BASE_DEVICE_WIDTH) * (newDeviceWidth || deviceWidth)
+  const config = __uniConfig.globalStyle || __uniConfig.window || {}
+  const maxWidth = checkValue(config.rpxCalcMaxDeviceWidth, 960)
+  const baseWidth = checkValue(config.rpxCalcBaseDeviceWidth, 375)
+  const includeWidth = checkValue(config.rpxCalcIncludeWidth, 750)
+  let width = newDeviceWidth || deviceWidth
+  width = number === includeWidth || width <= maxWidth ? width : baseWidth
+  let result = (number / BASE_DEVICE_WIDTH) * width
   if (result < 0) {
     result = -result
   }

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

@@ -3,26 +3,32 @@
     v-if="responsive"
     :class="{'uni-app--showlayout':showLayout}"
   >
+    <uni-top-window
+      v-if="topWindow"
+      v-show="showTopWindow && topWindowMediaQuery"
+      ref="topWindow"
+      :style="topWindowStyle"
+    >
+      <div class="uni-top-window">
+        <v-uni-top-window
+          ref="top"
+          @hook:mounted="onTopWindowInit"
+        />
+      </div>
+      <div
+        class="uni-top-window--placeholder"
+        :style="{height:topWindowHeight}"
+      />
+    </uni-top-window>
     <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"
+        v-show="showLeftWindow && leftWindowMediaQuery"
         ref="leftWindow"
         :style="leftWindowStyle"
       >
@@ -33,7 +39,7 @@
       </uni-left-window>
       <uni-right-window
         v-if="rightWindow"
-        v-show="showLayout&&showRightWindow"
+        v-show="showRightWindow && rightWindowMediaQuery"
         ref="rightWindow"
         :style="rightWindowStyle"
       >
@@ -60,11 +66,9 @@ import {
   RESPONSIVE_MIN_WIDTH
 } from 'uni-helpers/constants'
 
-const screen = window.screen
+const windowTypes = ['top', 'left', 'right']
 const documentElement = document.documentElement
 
-const minWidth = parseInt(__uniConfig.responsive && __uniConfig.responsive.minWidth) || RESPONSIVE_MIN_WIDTH
-
 let styleObj
 
 function updateCssVar (name, value) {
@@ -74,14 +78,18 @@ function updateCssVar (name, value) {
   styleObj.setProperty(name, value)
 }
 
-const sizes = [
-  window.outerWidth,
-  window.outerHeight,
-  screen.width,
-  screen.height,
-  documentElement.clientWidth,
-  documentElement.clientHeight
-]
+function checkMinWidth (minWidth) {
+  const screen = window.screen
+  const sizes = [
+    window.outerWidth,
+    window.outerHeight,
+    screen.width,
+    screen.height,
+    documentElement.clientWidth,
+    documentElement.clientHeight
+  ]
+  return Math.max.apply(null, sizes) > minWidth
+}
 
 export default {
   name: 'Layout',
@@ -99,19 +107,30 @@ export default {
   },
   data () {
     return {
-      showLayout: true,
       leftWindowStyle: '',
       rightWindowStyle: '',
       topWindowStyle: '',
-      showTopWindow: true,
-      showLeftWindow: true,
-      showRightWindow: true
+      topWindowMediaQuery: false,
+      leftWindowMediaQuery: false,
+      rightWindowMediaQuery: false,
+      topWindowHeight: '0px'
     }
   },
-  watch: {
-    $route (newRoute, oldRoute) {
-      this.initShowWindow(newRoute)
+  computed: {
+    showLayout () {
+      return this.showTopWindow || this.showLeftWindow || this.showRightWindow
+    },
+    showTopWindow () {
+      return this.$route.meta.topWindow !== false
+    },
+    showLeftWindow () {
+      return this.$route.meta.leftWindow !== false
     },
+    showRightWindow () {
+      return this.$route.meta.rightWindow !== false
+    }
+  },
+  watch: {
     showTopWindow (newVal, val) {
       if (newVal) {
         this.$nextTick(this.onTopWindowInit)
@@ -144,61 +163,64 @@ export default {
     this.leftWindow = Vue.component('VUniLeftWindow')
     this.rightWindow = Vue.component('VUniRightWindow')
     if ( // 低版本不提供 responsive 支持
-      (this.leftWindow || this.rightWindow) &&
+      (this.topWindow || this.leftWindow || this.rightWindow) &&
         uni.canIUse('css.var') &&
         window.matchMedia
     ) {
-      // 存在 topWindow 时，视为始终要支持 responsive （如 pc-admin 的情况，需要在 top 中切换 left 或 right）
-      this.responsive = this.topWindow || Math.max.apply(null, sizes) > minWidth
+      windowTypes.forEach(type => this.initWindowMinWidth(type))
+      this.responsive = checkMinWidth(this.minWidth)
       if (this.responsive) {
+        if (this.topWindow && this.topWindow.options.style) {
+          this.topWindowStyle = this.topWindow.options.style
+        }
         if (this.leftWindow && this.leftWindow.options.style) {
           this.leftWindowStyle = this.leftWindow.options.style
         }
         if (this.rightWindow && this.rightWindow.options.style) {
           this.rightWindowStyle = this.rightWindow.options.style
         }
-        this.initMediaQuery()
+        windowTypes.forEach(type => this.initMediaQuery(type))
       }
     }
-    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
+    initWindowMinWidth (type) {
+      const name = type + 'Window'
+      if (this[name]) {
+        const minWidthName = type + 'WindowMinWidth'
+        this[minWidthName] = RESPONSIVE_MIN_WIDTH
+        const windowOptions = __uniConfig[name]
+        if (windowOptions && windowOptions.matchMedia && windowOptions.matchMedia.minWidth) {
+          this[minWidthName] = windowOptions.matchMedia.minWidth
+        }
+        if (!this.minWidth || this.minWidth > this[minWidthName]) {
+          this.minWidth = this[minWidthName]
+        }
       }
     },
-    initMediaQuery () {
-      if (!window.matchMedia) {
-        return
-      }
-      const mediaQueryList = window.matchMedia('(min-width: ' + minWidth + 'px)')
-      mediaQueryList.addListener((e) => {
-        this.showLayout = e.matches
-        this.$nextTick(() => {
-          this.topWindow && this.onTopWindowInit()
-          this.leftWindow && this.onLeftWindowInit()
-          this.rightWindow && this.onRightWindowInit()
+    initMediaQuery (type) {
+      if (this[type + 'Window']) {
+        const name = type + 'WindowMediaQuery'
+        const mediaQueryList = window.matchMedia('(min-width: ' + this[type + 'WindowMinWidth'] + 'px)')
+        mediaQueryList.addListener((e) => {
+          this[name] = e.matches
+          this.$nextTick(() => {
+            this['on' + (type.substr(0, 1).toUpperCase() + type.substr(1)) + 'WindowInit']()
+          })
         })
-      })
-      this.showLayout = mediaQueryList.matches
+        this[name] = mediaQueryList.matches
+      }
     },
     onTopWindowInit () {
       // TODO page header
+      let windowTopHeight = '0px'
       if (this.topWindowStyle && this.topWindowStyle.width) {
-        updateCssVar('--window-top', this.$refs.topWindow.offsetHeight + 'px')
+        windowTopHeight = this.$refs.topWindow.offsetHeight + 'px'
       } else {
-        updateCssVar('--window-top', this.$refs.top.$el.offsetHeight + 'px')
+        windowTopHeight = this.$refs.top.$el.offsetHeight + 'px'
       }
+      this.topWindowHeight = windowTopHeight
+      updateCssVar('--window-top', windowTopHeight)
     },
     onLeftWindowInit () {
       if (this.leftWindowStyle && this.leftWindowStyle.width) {
@@ -230,7 +252,6 @@ export default {
   }
 
   uni-left-window {
-    display: none;
     position: relative;
     width: var(--window-left);
     order: -1;
@@ -238,18 +259,20 @@ export default {
   }
 
   uni-right-window {
-    display: none;
     position: relative;
     width: var(--window-right);
     overflow-x: hidden;
   }
 
-  .uni-app--showlayout uni-left-window,
-  .uni-app--showlayout uni-right-window {
-    display: block;
-  }
-
   .uni-app--showlayout+uni-tabbar {
     display: none;
   }
+
+  .uni-top-window {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 998;
+  }
 </style>