Merge pull request #1500 from didi/fix-web-view-refresh

修改在刷新webview页面后message未被销毁的问题
didi · Jun 19, 2024 · e4cbac3 · e4cbac3
2 parents ac36fe8 + c735127
commit e4cbac3
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 124 deletions.
diff --git a/examples/mpx-webview/H5/webviewbridge.min.js b/examples/mpx-webview/H5/webviewbridge.min.js
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-icon.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-icon.vue
@@ -2,16 +2,31 @@
   import getInnerListeners from './getInnerListeners'
   import { processSize } from '../../utils'
 
-  let defaultColor = {
-    success: '#09BB07',
-    'success_no_circle': '#09BB07',
-    info: '#10AEFF',
-    warn: '#F76260',
-    waiting: '#10AEFF',
-    cancel: '#F43530',
-    download: '#09BB07',
-    search: '#B2B2B2',
-    clear: '#B2B2B2'
+  let defaultColor
+  if (global.__style === 'v2') {
+    defaultColor = {
+      success: '#07c160',
+      'success_no_circle': '#07c160',
+      info: '#10AEFF',
+      warn: '#F76260',
+      waiting: '#10AEFF',
+      cancel: '#F43530',
+      download: '#13bf69',
+      search: '#7d7979',
+      clear: '#B2B2B2'
+    }
+  } else {
+    defaultColor = {
+      success: '#09BB07',
+      'success_no_circle': '#09BB07',
+      info: '#10AEFF',
+      warn: '#F76260',
+      waiting: '#10AEFF',
+      cancel: '#F43530',
+      download: '#09BB07',
+      search: '#B2B2B2',
+      clear: '#B2B2B2'
+    }
   }
 
   export default {
@@ -52,17 +67,6 @@
               width: sizeStr,
               height: sizeStr
             }
-            defaultColor = {
-              success: '#07c160',
-              'success_no_circle': '#07c160',
-              info: '#10AEFF',
-              warn: '#F76260',
-              waiting: '#10AEFF',
-              cancel: '#F43530',
-              download: '#13bf69',
-              search: '#7d7979',
-              clear: '#B2B2B2'
-            }
         }
       }
       const data = {
@@ -118,11 +122,8 @@
     &.mpx-icon-waiting-v2,
     &.mpx-icon-search-v2,
     &.mpx-icon-clear-v2,
-    &.mpx-icon-success_no_circle-v2,
-    &.mpx-icon-download-v2
+    &.mpx-icon-success_no_circle-v2
       display: inline-block
-      width: 64px
-      height: 64px
       mask-position: 50% 50%
       -webkit-mask-position: 50% 50%
       -webkit-mask-repeat: no-repeat

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-web-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-web-view.vue
@@ -33,7 +33,15 @@
           console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
           return ''
         }
-        return this.src
+        let src
+        const srcQueryIndex = this.src.indexOf('?')
+        // webview与被打开页面通过_uid确定关联关系
+        if (srcQueryIndex > -1) {
+          src = `${this.src.substring(0, srcQueryIndex + 1)}mpx_webview_id=${this._uid}&${this.src.substring(srcQueryIndex + 1)}`
+        } else {
+          src = `${this.src}?mpx_webview_id=${this._uid}`
+        }
+        return src
       },
       loadData () {
         return {
@@ -95,6 +103,10 @@
       messageCallback (event) {
         const hostValidate = this.hostValidate(event.origin)
         const data = event.data
+        // 判断number类型，防止undefined导致触发return逻辑
+        if (data.clientUid !== undefined && +data.clientUid !== this._uid) {
+          return
+        }
         let value = data.payload
         if (!hostValidate) {
           return

diff --git a/packages/webpack-plugin/lib/runtime/optionProcessor.js b/packages/webpack-plugin/lib/runtime/optionProcessor.js
@@ -141,7 +141,18 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
       ...webRouteConfig,
       routes: routes
     })
-    global.__mpxRouter.stack = []
+    let mpxStackPath = []
+    if (isBrowser) {
+      // 解决webview被刷新导致路由栈丢失后产生错乱问题
+      const sessionStorage = window.sessionStorage
+      try {
+        if (sessionStorage) {
+          mpxStackPath = JSON.parse(sessionStorage.getItem('_mpx_stack_path_'))
+        }
+      } catch (e) {
+      }
+    }
+    global.__mpxRouter.stack = mpxStackPath
     global.__mpxRouter.lastStack = null
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
@@ -255,6 +266,17 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
             global.__mpxRouter.needCache = insertItem
           }
       }
+      if (isBrowser) {
+        const sessionStorage = window.sessionStorage
+        if (sessionStorage) {
+          const stackStorage = global.__mpxRouter.stack.slice(0, global.__mpxRouter.stack.length - 1).map((item) => {
+            return {
+              path: item.path
+            }
+          })
+          sessionStorage.setItem('_mpx_stack_path_', JSON.stringify(stackStorage))
+        }
+      }
       next()
     })
     // 处理visibilitychange时触发当前活跃页面组件的onshow/onhide

diff --git a/packages/webview-bridge/dist/webviewbridge.esm.browser.js b/packages/webview-bridge/dist/webviewbridge.esm.browser.js
@@ -1,5 +1,5 @@
 /**
- * mpxjs webview bridge v2.9.15
+ * mpxjs webview bridge v2.9.17
  * (c) 2024 @mpxjs team
  * @license Apache
  */
@@ -62,11 +62,21 @@ const SDK_URL_MAP = {
   },
   ...window.sdkUrlMap
 };
-
+function getMpxWebViewId () {
+  const href = location.href;
+  const reg = /mpx_webview_id=(\d+)/g;
+  const matchVal = reg.exec(href);
+  let result;
+  if (matchVal && matchVal[1]) {
+    result = +matchVal[1];
+  }
+  return result
+}
 let env = null;
 let callbackId = 0;
+const clientUid = getMpxWebViewId();
 const callbacks = {};
-// 环境判断
+// 环境判断逻辑
 const systemUA = navigator.userAgent;
 if (systemUA.indexOf('AlipayClient') > -1 && systemUA.indexOf('MiniProgram') > -1) {
   env = 'my';
@@ -149,11 +159,15 @@ function postMessage (type, data = {}) {
       }
       delete callbacks[currentCallbackId];
     };
-    window.parent.postMessage && window.parent.postMessage({
+    const postParams = {
       type,
       callbackId,
       payload: filterData(data)
-    }, '*');
+    };
+    if (clientUid !== undefined) {
+      postParams.clientUid = clientUid;
+    }
+    window.parent.postMessage && window.parent.postMessage(postParams, '*');
   } else {
     data({
       webapp: true