@mpxjs/webpack-plugin 2.8.51 → 2.8.54

package/lib/json-compiler/index.js

@@ -154,6 +154,9 @@ module.exports = function (content) {
       if (!json.usingComponents) {
         json.usingComponents = {}
       }
+      if (!json.component && mode === 'swan') {
+        json.component = true
+      }
     }
   } else if (componentsMap[resourcePath]) {
     // component

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

@@ -1,14 +1,15 @@
 <template>
-  <iframe ref="mpxIframe" class="mpx-iframe" :src="src"></iframe>
+  <iframe ref="mpxIframe" class="mpx-iframe" :src="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 {
@@ -17,7 +18,8 @@
         Loaded: false,
         isActived: false,
         mpxIframe: null,
-        isPostMessage: false
+        isPostMessage: false,
+        currentUrl: ''
       }
     },
     props: {
@@ -25,22 +27,29 @@
         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]
+    watch: {
+      src (value) {
+        let host
+        host = value.split('/')
+        if (host[2]) {
+          host = host[0] + '//' + host[2]
         } else {
-          domain = ''
+          host = ''
+        }
+        const hostValidate = this.hostValidate(host)
+        if (!hostValidate) {
+          console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
+          return
         }
-        return domain
+        this.currentUrl = value
+        this.mpxIframe = this.$refs.mpxIframe
+        this.mpxIframe.addEventListener('load', (event) => {
+          this.Loaded = true
+          const loadData = {
+            src: this.src
+          }
+          this.$emit(eventLoad, getCustomEvent(eventLoad, loadData, this))
+        })
       }
     },
     mounted () {
@@ -52,48 +61,67 @@
           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 hostValidate = this.hostValidate(event.origin)
+        const hasPostMessage = this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage
         const data = event.data
-        const value = data.detail && data.detail.data && data.detail.data
-        if (!this.isActived) {
+        const value = data.payload
+        if (!this.isActived || !hostValidate) {
           return
         }
+        let asyncCallback = null
         switch (data.type) {
-          case eventMessage:
+          case 'postMessage':
             this.isPostMessage = true
             this.messageList.push(value.data)
+            asyncCallback = Promise.resolve({
+              errMsg: 'invokeWebappApi:ok'
+            })
             break
           case 'navigateTo':
             this.isActived = false
-            navigateTo(value)
+            asyncCallback = navigateTo(value)
             break
           case 'navigateBack':
             this.isActived = false
-            value ? navigateBack(value) : navigateBack()
+            asyncCallback = value ? navigateBack(value) : navigateBack()
             break
           case 'redirectTo':
             this.isActived = false
-            redirectTo(value)
+            asyncCallback = redirectTo(value)
             break
           case 'switchTab':
             this.isActived = false
-            switchTab(value)
+            asyncCallback = switchTab(value)
             break
           case 'reLaunch':
             this.isActived = false
-            reLaunch(value)
+            asyncCallback = reLaunch(value)
             break
-          case 'load':
-            this.Loaded = true
-            const loadData = {
-              src: this.src
+          case 'getLocation':
+            const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
+            if (getLocation) {
+              asyncCallback = getLocation()
+            } else {
+              asyncCallback = Promise.reject({
+                errMsg: '未在apiImplementations中配置getLocation方法'
+              })
             }
-            this.$emit(eventLoad, getCustomEvent(eventLoad, loadData, this))
+            break
         }
+        asyncCallback && asyncCallback.then((res) => {
+          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+            type: data.type,
+            callbackId: data.callbackId,
+            result: res
+          }, event.origin)
+        }).catch((error) => {
+          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+            type: data.type,
+            callbackId: data.callbackId,
+            error
+          }, event.origin)
+        })
       })
     },
     activated () {
@@ -119,6 +147,18 @@
         data: this.messageList
       }
       this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+    },
+    methods: {
+      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/template-compiler/compiler.js

@@ -1795,7 +1795,7 @@ function processRootViewStyleClassHack (el, options, root) {
 
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
 function getVirtualHostRoot (options, meta) {
-  if (options.isComponent) {
+  if (srcMode === 'wx' && options.isComponent) {
     // 处理组件时
     if (mode === 'wx' && options.hasVirtualHost) {
       // wx组件注入virtualHost配置
@@ -1810,7 +1810,6 @@ function getVirtualHostRoot (options, meta) {
           value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
         }
       ])
-      // 添加时间处理
       processElement(rootView, rootView, options, meta)
       return rootView
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.51",
+  "version": "2.8.54",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -81,5 +81,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "7b9523688cc1cf8077d8705e64ea5a742dccff13"
+  "gitHead": "e39ad9b35cdb336f271f424dbfae9cf7688c8d0d"
 }