miniprogram suppout match-media and uni.createMediaQueryObserver

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

+<template>
+  <view
+    v-show="matches"
+  > 
+    <slot />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'UniMatchMedia',
+  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 {
+      matches: false
+    }
+  },
+
+  mounted() {
+    const mediaQ = uni.createMediaQueryObserver()
+    mediaQ.observe({
+        width: this.width,
+        maxWidth: this.maxWidth,
+        minWidth: this.minWidth,
+        height: this.height,
+        minHeight: this.minHeight,
+        maxHeight: this.maxHeight,
+        orientation: this.orientation
+      }, matches => {
+        this.matches = matches
+      })
+  },
+
+}
+</script>
+
+<style>
+  view {
+    display: block;
+  }
+
+  view[hidden] {
+    display: none;
+  }
+</style>

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

+import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
 import {
   isFn,
   hasOwn
@@ -104,3 +105,5 @@ export function createIntersectionObserver (component, options) {
   }
   return my.createIntersectionObserver(options)
 }
+
+export { createMediaQueryObserver }
\ No newline at end of file

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

+import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
+
 export function requestPayment (params) {
   let parseError = false
   if (typeof params.orderInfo === 'string') {
@@ -15,3 +17,5 @@ export function requestPayment (params) {
     swan.requestPolymerPayment(params)
   }
 }
+
+export { createMediaQueryObserver }
\ No newline at end of file

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

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

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
+            }
+          }
+          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 === '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 === '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
+            }
+          }
+        }
+      }
+      callback(matches)  
+      
+      return matches
+    }
+ 
+    mediaQueryObserver.disconnect = () => {
+    }
+    
+    return mediaQueryObserver
+}
\ No newline at end of file