@mpxjs/webpack-plugin 2.9.0-beta.1 → 2.9.0-beta.3

package/lib/runtime/components/web/mpx-video.vue

@@ -1,20 +1,14 @@
 <template>
   <video
     ref="_mpx_video_ref"
-    :class="classList"
-    :src="src"
-    :controls="showControlsTool"
-    :autoplay="autoplay"
-    :loop="loop"
-    :muted="mutedCopy"
-    :poster="poster"
+    class="video-js"
     v-bind="playsinlineAttr"
-  >
-  </video>
-</template>
-
-<script>
+   ></video>
+ </template>
+ <script>
   import { inheritEvent } from './getInnerListeners'
+  import videojs from 'video.js'
+  import 'video.js/dist/video-js.min.css'
 
   export default {
     name: 'mpx-video',
@@ -54,7 +48,7 @@
         type: Boolean,
         default: false
       },
-      initialTime: { // done
+      initialTime: {
         type: Number,
         default: 0
       },
@@ -63,6 +57,10 @@
         type: Boolean,
         default: true
       },
+      showBottomProgress: { // done
+        type: Boolean,
+        default: true
+      },
       showFullscreenBtn: { // done
         type: Boolean,
         default: true
@@ -125,130 +123,166 @@
         default: false
       },
       playsinline: {
-        type: Boolean,
-        default: true
-      }
+      type: Boolean,
+      default: true
+    }
     },
-    computed: {
-      playsinlineAttr () {
-        if (!this.playsinline) return {}
-        return {
-          'webkit-playsinline': true,
-          'playsinline': true,
-          'x5-playsinline': true
-        }
+    data () {
+      return {
       }
     },
-    data () {
+    computed: {
+    playsinlineAttr () {
+      if (!this.playsinline) return {}
       return {
-        showControlsTool: this.controls,
-        mutedCopy: this.muted,
-        classList: ''
+        'webkit-playsinline': true,
+        'playsinline': true,
+        'x5-playsinline': true,
+        'x5-video-orientation': 'landscape|portrait'
+      }
+    }
+  },
+    watch: {
+      muted: function (val) {
+        this._player?.muted(val)
+      },
+      controls: function (show) {
+        this.$emit('controlstoggle', inheritEvent('controlstoggle', {}, { show }))
       }
     },
     mounted () {
+      const videoNode = this.$refs['_mpx_video_ref']
+      this._player = videojs(videoNode, {
+        controls: true,
+        sources:[
+          {
+            src: this.src
+          }
+        ],
+        autoplay: this.autoplay,
+        loop: this.loop,
+         /**
+          log 若 controls 属性值为 false 则设置 poster 无效
+        */
+        poster: this.controls ? this.poster : ''
+      }, function () {
+      })
+      this.initPlayer()
       this.initStyle()
       this.initEvent()
     },
     methods: {
-      initStyle () {
-        const videoNode = this.$refs['_mpx_video_ref']
+      initPlayer () {
+        this._player.muted(this.muted)
         if (this.initialTime) {
-          videoNode.currentTime = this.initialTime
+          this._player.currentTime(this.initialTime)
         }
-        if (this.autoplay) { // log 解决autoplay无法自动播放问题
-          this.mutedCopy = true
-        }
-        if (!this.showProgress) this.classList += ' mpx-no-show_progress'
-        if (!this.showFullscreenBtn) this.classList += ' mpx-no-show_fullscreen_btn'
-        if (!this.showPlayBtn) this.classList += ' mpx-no-show_play_btn'
-        if (!this.showCenterPlayBtn) this.classList += ' mpx-no-show_center_play_btn'
-        if (!this.showMuteBtn) this.classList += ' mpx-no-show_mute_btn'
       },
-      initEvent () {
-        const videoNode = this.$refs['_mpx_video_ref']
+      initStyle () {
+        if (!this.controls) this._player.el_.classList.add('mpx-no-show_controls')
+
+        if (!this.showBottomProgress) this._player.el_.classList.add('mpx-no-show_progress')
+
+        /**
+          showProgress若不设置，宽度大于240时才会显示
+        */
+        if (!this.showProgress || (this._player.el_.offsetWidth < 240 && this.showProgress)) this._player.el_.classList.add('mpx-no-show_progress')
+
+        if (!this.showFullscreenBtn) this._player.el_.classList.add('mpx-no-show_fullscreen_btn')
+
+        if (!this.showPlayBtn) this._player.el_.classList.add('mpx-no-show_play_btn')
+
+        if (!this.showCenterPlayBtn) this._player.el_.classList.add('mpx-no-show_center_play_btn')
 
-        videoNode.addEventListener('play', (e) => {
+        if (!this.showMuteBtn) this._player.el_.classList.add('mpx-no-show_mute_btn')
+      },
+      initEvent () {
+        this._player.on('play', (e) => {
           this.$emit('play', inheritEvent('play', e, {}))
         })
 
-        videoNode.addEventListener('pause', (e) => {
+        this._player.on('pause', (e) => {
           this.$emit('pause', inheritEvent('pause', e, {}))
         })
 
-        videoNode.addEventListener('ended', (e) => {
+        this._player.on('ended', (e) => {
           this.$emit('ended', inheritEvent('ended', e, {}))
         })
 
-        videoNode.addEventListener('timeupdate', (e) => {
-          const eNode = e.target
-          this.$emit('timeupdate', inheritEvent('timeupdate', e, { currentTime: eNode.currentTime, duration: eNode.duration }))
+        this._player.on('timeupdate', (e) => {
+          this.$emit('timeupdate', inheritEvent('timeupdate', e, {}))
         })
 
-        videoNode.addEventListener('error', (e) => {
+        this._player.on('error', (e) => {
           this.$emit('error', inheritEvent('error', e, {}))
         })
 
-        videoNode.addEventListener('waiting', (e) => {
+        this._player.on('waiting', (e) => {
           this.$emit('waiting', inheritEvent('waiting', e, {}))
         })
-
-        videoNode.addEventListener('loadedmetadata', (e) => {
-          const eNode = e.target
-          this.$emit('loadedmetadata', inheritEvent('loadedmetadata', e, { width: eNode.videoWidth, height: eNode.videoHeight, duration: eNode.duration }))
+        this._player.on('loadedmetadata', (e) => {
+          this.$emit('loadedmetadata', inheritEvent('loadedmetadata', e, {}))
         })
 
-        videoNode.addEventListener('progress', (e) => {
+        this._player.on('progress', (e) => {
           const eNode = e.target
           const buffered = (eNode?.buffered?.end(0)) / (eNode?.duration)
           this.$emit('progress', inheritEvent('progress', e, { buffered: buffered * 100 }))
         })
 
-        videoNode.addEventListener('seeked', (e) => {
+        this._player.on('seeked', (e) => {
           const eNode = e.target
-          this.$emit('seekcomplete', inheritEvent('seekcomplete', e, { position: eNode.currentTime }))
+          this.$emit('seekcomplete', inheritEvent('seekcomplete', e, { position: eNode.currentTime  }))
         })
-
-        videoNode.addEventListener('fullscreenchange', (e) => {
-          //  TODO direction
-          if (document.isFullScreen) {
-            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: true }))
-          } else {
-            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: false }))
+        this._player.on('fullscreenchange', (e) => {
+          if (!this._player.paused()) {
+            // hack: 解决退出全屏自动暂停
+            setTimeout(() => {
+              this._player.play()
+            }, 500)
           }
+          this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: this._player.isFullscreen() }))
         })
 
-        videoNode.addEventListener('enterpictureinpicture', (e) => {
+        this._player.on('enterpictureinpicture', (e) => {
           this.$emit('enterpictureinpicture', inheritEvent('enterpictureinpicture', e, {}))
         })
 
-        videoNode.addEventListener('leavepictureinpicture', (e) => {
+        this._player.on('leavepictureinpicture', (e) => {
           this.$emit('leavepictureinpicture', inheritEvent('leavepictureinpicture', e, {}))
         })
+
       }
     }
   }
-</script>
-
-<style lang="stylus">
-  .mpx-video-container
-    .mpx-no-show_progress
-      &::-webkit-media-controls-timeline
-        display none !important
-
-    .mpx-no-show_fullscreen_btn
-      &::-webkit-media-controls-fullscreen-button
-        display none !important
-
-    .mpx-no-show_play_btn
-      &::-webkit-media-controls-play-button
-        display none !important
-
-    .mpx-no-show_center_play_btn
-      &::-webkit-media-controls-start-playback-button
-        display none !important
-
-    .mpx-no-show_mute_btn
-      &::-webkit-media-controls-mute-button
-        display none !important
-</style>
+ </script>
+
+ <style lang="stylus">
+
+    .vjs-chapters-button
+      display: none !important
+
+   .mpx-no-show_controls
+     .vjs-control-bar
+       display none !important
+
+   .mpx-no-show_progress
+     .vjs-progress-control
+       display none !important
+
+   .mpx-no-show_fullscreen_btn
+     .vjs-fullscreen-control
+       display none !important
+
+   .mpx-no-show_play_btn
+     .vjs-play-control
+       display none !important
+
+   .mpx-no-show_center_play_btn
+     .vjs-big-play-button
+       display none !important
+
+   .mpx-no-show_mute_btn
+     .vjs-mute-control
+       display none !important
+ </style>

package/lib/runtime/components/web/mpx-web-view.vue

@@ -1,107 +1,77 @@
 <template>
-  <iframe ref="mpxIframe" class="mpx-iframe" :src="src"></iframe>
+  <iframe ref="mpxIframe" class="mpx-iframe" :src="currentUrl" :key="currentUrl"></iframe>
 </template>
 
 <script>
   import { getCustomEvent } from './getInnerListeners'
-  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab} from '@mpxjs/api-proxy/src/web/api/index'
+  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy/src/web/api/index'
 
   const eventLoad = 'load'
   const eventError = 'error'
   const eventMessage = 'message'
+  const mpx = global.__mpx
   export default {
-    data: function () {
-      return {
-        origin: '',
-        messageList: [],
-        Loaded: false,
-        isActived: false,
-        mpxIframe: null,
-        isPostMessage: false
-      }
-    },
     props: {
       src: {
         type: String
       }
     },
     computed: {
-      mainDomain () {
-        let domain
-        const src = location.href
-        let index = src.indexOf('?')
-        if (index > -1) {
-          domain = src.substr(0, index)
-          return domain
-        }
-        domain = src.split('/')
-        if (domain[2]) {
-          domain = domain[0] + '//' + domain[2]
+      host () {
+        let host = this.src.split('/')
+        if (host[2]) {
+          host = host[0] + '//' + host[2]
         } else {
-          domain = ''
+          host = ''
+        }
+        return host
+      },
+      currentUrl () {
+        if (!this.src) return ''
+        const hostValidate = this.hostValidate(this.host)
+        if (!hostValidate) {
+          console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
+          return ''
+        }
+        return this.src
+      },
+      loadData () {
+        return {
+          src: this.host,
+          fullUrl: this.src
         }
-        return domain
       }
     },
-    mounted () {
-      setTimeout(() => {
-        if (!this.Loaded) {
-          const loadData = {
-            src: this.src
+    watch: {
+      currentUrl: {
+        handler (value) {
+          if (!value) {
+            this.$emit(eventError, getCustomEvent(eventError, {
+              ...this.loadData,
+              errMsg: 'web-view load failed due to not in domain list'
+            }, this))
+          } else {
+            this.$nextTick(() => {
+              if (this.$refs.mpxIframe && this.mpxIframe != this.$refs.mpxIframe) {
+                this.mpxIframe = this.$refs.mpxIframe
+                this.mpxIframe.addEventListener('load', (event) => {
+                  this.$emit(eventLoad, getCustomEvent(eventLoad, this.loadData, this))
+                })
+              }
+            })
           }
-          this.$emit(eventError, getCustomEvent(eventError, loadData, this))
-        }
-      }, 1000)
-      this.mpxIframe = this.$refs.mpxIframe
-      this.mpxIframe.addEventListener('load', (event) => {
-        event.currentTarget.contentWindow.postMessage(this.mainDomain, '*')
-      })
-      window.addEventListener('message', (event) => {
-        const data = event.data
-        const value = data.detail && data.detail.data && data.detail.data
-        if (!this.isActived) {
-          return
-        }
-        switch (data.type) {
-          case eventMessage:
-            this.isPostMessage = true
-            this.messageList.push(value.data)
-            break
-          case 'navigateTo':
-            this.isActived = false
-            navigateTo(value)
-            break
-          case 'navigateBack':
-            this.isActived = false
-            value ? navigateBack(value) : navigateBack()
-            break
-          case 'redirectTo':
-            this.isActived = false
-            redirectTo(value)
-            break
-          case 'switchTab':
-            this.isActived = false
-            switchTab(value)
-            break
-          case 'reLaunch':
-            this.isActived = false
-            reLaunch(value)
-            break
-          case 'load':
-            this.Loaded = true
-            const loadData = {
-              src: this.src
-            }
-            this.$emit(eventLoad, getCustomEvent(eventLoad, loadData, this))
-        }
-      })
+        },
+        immediate: true
+      }
     },
-    activated () {
-      this.isActived = true
-      this.isPostMessage = false
+    beforeCreate () {
+      this.messageList = []
+    },
+    mounted () {
+      window.addEventListener('message', this.messageCallback)
     },
     deactivated () {
-      if (!this.isPostMessage) {
+      if (!this.messageList.length) {
         return
       }
       let data = {
@@ -111,7 +81,8 @@
       this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
     },
     destroyed () {
-      if (!this.isPostMessage) {
+      window.removeEventListener('message', this.messageCallback)
+      if (!this.messageList.length) {
         return
       }
       let data = {
@@ -119,6 +90,73 @@
         data: this.messageList
       }
       this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+    },
+    methods: {
+      messageCallback (event) {
+        const hostValidate = this.hostValidate(event.origin)
+        const data = event.data
+        const value = data.payload
+        if (!hostValidate) {
+          return
+        }
+        let asyncCallback = null
+        switch (data.type) {
+          case 'postMessage':
+            this.messageList.push(value)
+            asyncCallback = Promise.resolve({
+              errMsg: 'invokeWebappApi:ok'
+            })
+            break
+          case 'navigateTo':
+            asyncCallback = navigateTo(value)
+            break
+          case 'navigateBack':
+            asyncCallback = value ? navigateBack(value) : navigateBack()
+            break
+          case 'redirectTo':
+            asyncCallback = redirectTo(value)
+            break
+          case 'switchTab':
+            asyncCallback = switchTab(value)
+            break
+          case 'reLaunch':
+            asyncCallback = reLaunch(value)
+            break
+          case 'getLocation':
+            const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
+            if (getLocation) {
+              asyncCallback = getLocation()
+            } else {
+              asyncCallback = Promise.reject({
+                errMsg: '未在apiImplementations中配置getLocation方法'
+              })
+            }
+            break
+        }
+        asyncCallback && asyncCallback.then((res) => {
+          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+            type: data.type,
+            callbackId: data.callbackId,
+            result: res
+          }, event.origin)
+        }).catch((error) => {
+          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+            type: data.type,
+            callbackId: data.callbackId,
+            error
+          }, event.origin)
+        })
+      },
+      hostValidate (host) {
+        const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
+        if (hostWhitelists.length) {
+          return hostWhitelists.some((item) => {
+            return host.endsWith(item)
+          })
+        } else {
+          return true
+        }
+      }
     }
   }
 </script>

package/lib/runtime/components/wx/default-page.mpx

@@ -0,0 +1,27 @@
+<template>
+  <view>局部构建兜底页面</view>
+  <view>当前路由：{{currentRoute}}</view>
+</template>
+
+<script>
+import { onLoad } from '@mpxjs/core'
+import { createPage } from '@mpxjs/core'
+
+createPage({
+  data() {
+    return {
+      currentRoute: '',
+    }
+  },
+  onLoad() {
+    this.getPagePath()
+  },
+  methods: {
+    getPagePath() {
+      const pages = getCurrentPages() || []
+      const currPage = pages[pages.length - 1]
+      this.currentRoute = currPage && currPage.route || ''
+    },
+  }
+})
+</script>

package/lib/runtime/optionProcessor.js

@@ -3,7 +3,19 @@ import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
 
-export default function processComponentOption ({ option, ctorType, outputPath, pageConfig, componentsMap, componentGenerics, genericsInfo, mixin, hasApp }) {
+export default function processComponentOption (
+  {
+    option,
+    ctorType,
+    outputPath,
+    pageConfig,
+    componentsMap,
+    componentGenerics,
+    genericsInfo,
+    mixin,
+    hasApp
+  }
+) {
   // 局部注册页面和组件中依赖的组件
   for (const componentName in componentsMap) {
     if (hasOwn(componentsMap, componentName)) {
@@ -101,6 +113,8 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
 
   Vue.filter('transRpxStyle', transRpxStyle)
 
+  Vue.config.ignoredElements = ['page']
+
   const routes = []
 
   for (const pagePath in pagesMap) {
@@ -128,6 +142,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     global.__mpxRouter.stack = []
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
+    global.__mpxRouter.eventChannelMap = {}
     // 处理reLaunch中传递的url并非首页时的replace逻辑
     global.__mpxRouter.beforeEach(function (to, from, next) {
       let action = global.__mpxRouter.__mpxAction
@@ -166,24 +181,15 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
             })
           }
         } else {
-          let methods = ''
-          switch (action.type) {
-            case 'to':
-              methods = 'navigateTo'
-              break
-            case 'redirect':
-              methods = 'redirectTo'
-              break
-            case 'back':
-              methods = 'navigateBack'
-              break
-            case 'reLaunch':
-              methods = 'reLaunch'
-              break
-            default:
-              methods = 'navigateTo'
+          const typeMethodMap = {
+            to: 'navigateTo',
+            redirect: 'redirectTo',
+            back: 'navigateBack',
+            switch: 'switchTab',
+            reLaunch: 'reLaunch'
           }
-          throw new Error(`${methods}:fail page "${to.path}" is not found`)
+          const method = typeMethodMap[action.type]
+          throw new Error(`${method}:fail page "${to.path}" is not found`)
         }
       }
 
@@ -195,6 +201,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         case 'to':
           stack.push(insertItem)
           global.__mpxRouter.needCache = insertItem
+          if (action.eventChannel) global.__mpxRouter.eventChannelMap[to.path.slice(1)] = action.eventChannel
           break
         case 'back':
           global.__mpxRouter.needRemove = stack.splice(stack.length - action.delta, action.delta)
@@ -214,7 +221,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
             // 将非tabBar页面remove
             let tabItem = null
             global.__mpxRouter.needRemove = stack.filter((item) => {
-              if (tabBarMap[item.path.slice(1)]) {
+              if (tabBarMap[item.path.slice(1)] && !tabItem) {
                 tabItem = item
                 tabItem.path = to.path
                 return false
@@ -235,7 +242,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
             return next({
               path: action.path,
               query: {
-                reLaunchCount: action.reLaunchCount
+                routeCount: action.routeCount
               },
               replace: true
             })

package/lib/style-compiler/index.js

@@ -47,6 +47,10 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
+    if (mode === 'web') {
+      plugins.push(transSpecial({ id }))
+    }
+
     plugins.push(pluginCondStrip({
       defs
     }))
@@ -85,7 +89,7 @@ module.exports = function (css, map) {
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异
-        if (mode === 'ali' && isApp) {
+        if ((mode === 'ali' || mode === 'web') && isApp) {
           result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
         }