fixed: test match-media, MediaQueryObserver done

packages/uni-cli-shared/components/uni-match-media.vue

 <template>
-  <view
-    v-show="matches"
-  > 
-    <slot />
-  </view>
+ <view v-show="matches">
+	<slot />
+ </view>
 </template>
 
 <script>
+let mediaQueryObserver
 export default {
   name: 'UniMatchMedia',
   props: {
@@ -42,13 +41,13 @@ export default {
 
   data () {
     return {
-      matches: false
+      matches: true,
     }
   },
 
   mounted() {
-    const mediaQ = uni.createMediaQueryObserver()
-    mediaQ.observe({
+    mediaQueryObserver = uni.createMediaQueryObserver(this)
+    mediaQueryObserver.observe({
         width: this.width,
         maxWidth: this.maxWidth,
         minWidth: this.minWidth,
@@ -61,15 +60,14 @@ export default {
       })
   },
 
+  destroyed() {
+    mediaQueryObserver.disconnect()
+  }
 }
 </script>
 
 <style>
-  view {
-    display: block;
-  }
-
-  view[hidden] {
-    display: none;
-  }
+	view {
+		display: block;
+	}
 </style>

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

@@ -41,5 +41,4 @@ 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']
 }

packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js

@@ -45,7 +45,6 @@ const TAGS = [
   'video',
   'view',
   'web-view',
-  'match-media'
 ]
 
 const EVENTS = {

packages/uni-template-compiler/lib/mp.js

@@ -48,7 +48,6 @@ const tags = [
   'view',
   'web-view',
   'editor',
-  'match-media'
 ]
 
 const baseCompiler = {

packages/vue-cli-plugin-uni/packages/postcss/index.js

@@ -136,8 +136,7 @@ if (process.env.UNI_USING_V3) {
     'textarea',
     'video',
     'view',
-    'web-view',
-    'match-media'
+    'web-view'
   ]
 
   const BG_PROPS = [

src/core/helpers/tags.js

@@ -2,7 +2,7 @@ module.exports = [
   'uni-app',
   'uni-layout',
   'uni-content',
-  'uni-main',
+  'uni-main',
   'uni-top-window',
   'uni-left-window',
   'uni-right-window',
@@ -58,6 +58,5 @@ module.exports = [
   'uni-textarea',
   'uni-video',
   'uni-view',
-  'uni-web-view',
-  'uni-match-media'
+  'uni-web-view'
 ]

src/core/view/bridge/subscribe/api/request-media-query-observer.js

@@ -41,7 +41,7 @@ export function requestMediaQueryObserver ({
     throw new Error(`Not Found：Page[${pageId}]`)
   }
 
-  const pageVm = page.$vm
+  // const pageVm = page.$vm
 
   // 创建一个媒体查询对象
   const mediaQueryObserver = mediaQueryObservers[reqId] = window.matchMedia(handleMediaQueryStr(options))
@@ -51,7 +51,7 @@ export function requestMediaQueryObserver ({
     UniViewJSBridge.publishHandler('onRequestMediaQueryObserver', {
       reqId,
       res: e.matches
-    }, pageVm.$page.id)
+    }, pages[pages.length - 1].$page.id)
   }
 
   listener(mediaQueryObserver) // 监听前执行一次媒体查询

src/core/view/components/match-media/index.vue

-<template>
-  <uni-match-media
-    v-show="MediaQueryListRes"
-    v-on="$listeners"
-  >
-    <slot />
-  </uni-match-media>
-</template>
-
-<script>
-export default {
-  name: 'MatchMedia',
-  props: {
-    width: {
-      type: [Number, String],
-      default: ''
-    },
-    minWidth: {
-      type: [Number, String],
-      default: ''
-    },
-    maxWidth: {
-      type: [Number, String],
-      default: ''
-    },
-    height: {
-      type: [Number, String],
-      default: ''
-    },
-    minHeight: {
-      type: [Number, String],
-      default: ''
-    },
-    maxHeight: {
-      type: [Number, String],
-      default: ''
-    },
-    orientation: {
-      type: String,
-      default: ''
-    }
-  },
-
-  data () {
-    return {
-      MediaQueryListRes: true,
-      mql: null
-    }
-  },
-
-  computed: {
-    handleMediaQueryStr () {
-      let mediaQueryStr = []
-      const { $props } = this
-      const propsMenu = [
-        'width',
-        'minWidth',
-        'maxWidth',
-        'height',
-        'minHeight',
-        'maxHeight',
-        'orientation'
-      ]
-      for (const item of propsMenu) {
-        if (item !== 'orientation' && $props[item] !== '' && Number($props[item]) >= 0) {
-          mediaQueryStr.push(`(${this.humpToLine(item)}: ${Number($props[item])}px)`)
-        }
-        if (item === 'orientation' && $props[item]) {
-          mediaQueryStr.push(`(${this.humpToLine(item)}: ${$props[item]})`)
-        }
-      }
-      mediaQueryStr = mediaQueryStr.join(' and ')
-      return mediaQueryStr
-    }
-  },
-
-  watch: {
-    handleMediaQueryStr: 'replaceListener'
-  },
-
-  mounted () {
-    this.mql = window.matchMedia(this.handleMediaQueryStr)
-    this.handleMediaQuery(this.mql)
-    this.mql.addListener(this.handleMediaQuery)
-  },
-
-  beforeDestroy () {
-    this.mql.removeListener(this.handleMediaQuery)
-  },
-
-  methods: {
-    handleMediaQuery (e) {
-      if (e.matches) {
-        this.MediaQueryListRes = true
-      } else {
-        this.MediaQueryListRes = false
-      }
-    },
-
-    replaceListener () {
-      this.mql.removeListener(this.handleMediaQuery)
-      this.mql = window.matchMedia(this.handleMediaQueryStr)
-      this.handleMediaQuery(this.mql)
-      this.mql.addListener(this.handleMediaQuery)
-    },
-
-    humpToLine (name) {
-      return name.replace(/([A-Z])/g, '-$1').toLowerCase()
-    }
-  }
-}
-</script>
-
-<style>
-  uni-match-media {
-    display: block;
-  }
-
-  uni-match-media[hidden] {
-  display: none;
-}
-</style>

src/platforms/mp-alipay/runtime/api/index.js

@@ -106,4 +106,4 @@ export function createIntersectionObserver (component, options) {
   return my.createIntersectionObserver(options)
 }
 
-export { createMediaQueryObserver }
\ No newline at end of file
+export { createMediaQueryObserver }

src/platforms/mp-baidu/runtime/api/index.js

@@ -18,4 +18,4 @@ export function requestPayment (params) {
   }
 }
 
-export { createMediaQueryObserver }
\ No newline at end of file
+export { createMediaQueryObserver }

src/platforms/mp-qq/runtime/api/index.js

 import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
 
-export { createMediaQueryObserver }
\ No newline at end of file
+export { createMediaQueryObserver }

src/platforms/mp-toutiao/runtime/api/index.js

 import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
 
-export { createMediaQueryObserver }
\ No newline at end of file
+export { createMediaQueryObserver }

src/platforms/mp-weixin/helpers/create-media-query-observer.js

 export default function createMediaQueryObserver () {
-    const mediaQueryObserver = {}
-    const {
-      windowWidth,
-      windowHeight
-    } = __GLOBAL__.getSystemInfoSync()
-  
-    const orientation = windowWidth < windowHeight ?  'portrait' : 'landscape'
-  
-    mediaQueryObserver.observe = (options, callback) => {
-      let matches = false
-      for (const item in options) {
-        const itemValue = item === 'orientation' ? options[item] : Number(options[item])
-        if (options[item] !== '') {
-          if (item === 'width'){
-            if (itemValue == windowWidth) {
-              matches = true
-            } else {
-              matches = false
-              callback(matches)
-              return matches
-            }
+  const mediaQueryObserver = {}
+  const {
+    windowWidth,
+    windowHeight
+  } = __GLOBAL__.getSystemInfoSync()
+
+  const orientation = windowWidth < windowHeight ? 'portrait' : 'landscape'
+
+  mediaQueryObserver.observe = (options, callback) => {
+    let matches = false
+    for (const item in options) {
+      const itemValue = item === 'orientation' ? options[item] : Number(options[item])
+      if (options[item] !== '') {
+        if (item === 'width') {
+          if (itemValue === windowWidth) {
+            matches = true
+          } else {
+            matches = false
+            callback(matches)
+            return matches
           }
-          if (item === 'minWidth'){
-            if (windowWidth >= itemValue) {
-              matches = true
-            } else {
-              matches = false
-              callback(matches)
-              return matches
-            }
+        }
+        if (item === 'minWidth') {
+          if (windowWidth >= itemValue) {
+            matches = true
+          } else {
+            matches = false
+            callback(matches)
+            return matches
           }
-          if (item === 'maxWidth'){
-            if (windowWidth <= itemValue) {
-              matches = true
-            } else {
-              matches = false
-              callback(matches)
-              return matches
-            }
+        }
+        if (item === 'maxWidth') {
+          if (windowWidth <= itemValue) {
+            matches = true
+          } else {
+            matches = false
+            callback(matches)
+            return matches
           }
-          
-          if (item === 'height'){
-            if (itemValue == windowHeight) {
-              matches = true
-            } else {
-              matches = false
-              callback(matches)
-              return matches
-            }
+        }
+
+        if (item === 'height') {
+          if (itemValue === windowHeight) {
+            matches = true
+          } else {
+            matches = false
+            callback(matches)
+            return matches
           }
-          if (item === 'minHeight'){
-            if (windowHeight >= itemValue) {
-              matches = true
-            } else {
-              matches = false
-              callback(matches)
-              return matches
-            }
+        }
+        if (item === 'minHeight') {
+          if (windowHeight >= itemValue) {
+            matches = true
+          } else {
+            matches = false
+            callback(matches)
+            return matches
           }
-          if (item === 'maxHeight'){
-            if (windowHeight <= itemValue) {
-              matches = true
-            } else {
-              matches = false
-              callback(matches)
-              return matches
-            }
+        }
+        if (item === 'maxHeight') {
+          if (windowHeight <= itemValue) {
+            matches = true
+          } else {
+            matches = false
+            callback(matches)
+            return matches
           }
-    
-          if (item === 'orientation'){
-            if (options[item] === orientation) {
-              matches = true
-            }  else {
-              matches = false
-              callback(matches)
-              return matches
-            }
+        }
+
+        if (item === 'orientation') {
+          if (options[item] === orientation) {
+            matches = true
+          } else {
+            matches = false
+            callback(matches)
+            return matches
           }
         }
       }
-      callback(matches)  
-      
-      return matches
-    }
- 
-    mediaQueryObserver.disconnect = () => {
     }
-    
-    return mediaQueryObserver
-}
\ No newline at end of file
+    callback(matches)
+
+    return matches
+  }
+
+  mediaQueryObserver.disconnect = () => {
+  }
+
+  return mediaQueryObserver
+}