Merge branch 'master' into feat-update-i18n-doc

didi · Oct 24, 2023 · 44f688a · 44f688a
2 parents 57e992b + 391feab
commit 44f688a
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 102 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.8.55"
+  "version": "2.8.56"
 }
diff --git a/packages/core/@types/index.d.ts b/packages/core/@types/index.d.ts
@@ -86,7 +86,7 @@ type PropValueType<Def> = Def extends {
   : Def extends FullPropType<infer T>
   ? T
   : Def extends PropType<infer T>
-  ? T 
+  ? T
   : any;
 
 type GetPropsType<T> = {
@@ -250,6 +250,11 @@ interface AnyConstructor {
   prototype: any
 }
 
+interface WebviewConfig {
+  hostWhitelists?: Array<string>
+  apiImplementations?: object
+}
+
 interface MpxConfig {
   useStrictDiff: boolean
   ignoreWarning: boolean | string | RegExp | ((msg: string, location: string, e: Error) => boolean)
@@ -259,7 +264,8 @@ interface MpxConfig {
   proxyEventHandler: (e: Event) => any | null
   setDataHandler: (data: object, target: ComponentIns<{}, {}, {}, {}, []>) => any | null
   forceFlushSync: boolean,
-  webRouteConfig: object
+  webRouteConfig: object,
+  webviewConfig?: WebviewConfig
 }
 
 type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.8.55",
+  "version": "2.8.56",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",

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
@@ -1,5 +1,5 @@
 <template>
-  <iframe ref="mpxIframe" class="mpx-iframe" :src="currentUrl"></iframe>
+  <iframe ref="mpxIframe" class="mpx-iframe" :src="currentUrl" :key="currentUrl"></iframe>
 </template>
 
 <script>
@@ -11,91 +11,115 @@
   const eventMessage = 'message'
   const mpx = global.__mpx
   export default {
-    data: function () {
-      return {
-        origin: '',
-        messageList: [],
-        Loaded: false,
-        isActived: false,
-        mpxIframe: null,
-        isPostMessage: false,
-        currentUrl: ''
-      }
-    },
     props: {
       src: {
         type: String
       }
     },
-    watch: {
-      src (value) {
-        let host
-        host = value.split('/')
+    computed: {
+      host () {
+        let host = this.src.split('/')
         if (host[2]) {
           host = host[0] + '//' + host[2]
         } else {
           host = ''
         }
-        const hostValidate = this.hostValidate(host)
+        return host
+      },
+      currentUrl () {
+        if (!this.src) return ''
+        const hostValidate = this.hostValidate(this.host)
         if (!hostValidate) {
           console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
-          return
+          return ''
         }
-        this.currentUrl = value
-        this.mpxIframe = this.$refs.mpxIframe
-        this.mpxIframe.addEventListener('load', (event) => {
-          this.Loaded = true
-          const loadData = {
-            src: this.src
+        return this.src
+      },
+      loadData () {
+        return {
+          src: this.host,
+          fullUrl: 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(eventLoad, getCustomEvent(eventLoad, loadData, this))
-        })
+        },
+        immediate: true
       }
     },
+    beforeCreate () {
+      this.messageList = []
+    },
     mounted () {
-      setTimeout(() => {
-        if (!this.Loaded) {
-          const loadData = {
-            src: this.src
-          }
-          this.$emit(eventError, getCustomEvent(eventError, loadData, this))
-        }
-      }, 1000)
-      window.addEventListener('message', (event) => {
+      window.addEventListener('message', this.messageCallback)
+    },
+    deactivated () {
+      if (!this.messageList.length) {
+        return
+      }
+      let data = {
+        type: 'message',
+        data: this.messageList
+      }
+      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+    },
+    destroyed () {
+      window.removeEventListener('message', this.messageCallback)
+      if (!this.messageList.length) {
+        return
+      }
+      let data = {
+        type: 'message',
+        data: this.messageList
+      }
+      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+    },
+    methods: {
+      messageCallback (event) {
         const hostValidate = this.hostValidate(event.origin)
-        const hasPostMessage = this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage
         const data = event.data
         const value = data.payload
-        if (!this.isActived || !hostValidate) {
+        if (!hostValidate) {
           return
         }
         let asyncCallback = null
         switch (data.type) {
           case 'postMessage':
-            this.isPostMessage = true
-            this.messageList.push(value.data)
+            this.messageList.push(value)
             asyncCallback = Promise.resolve({
               errMsg: 'invokeWebappApi:ok'
             })
             break
           case 'navigateTo':
-            this.isActived = false
             asyncCallback = navigateTo(value)
             break
           case 'navigateBack':
-            this.isActived = false
             asyncCallback = value ? navigateBack(value) : navigateBack()
             break
           case 'redirectTo':
-            this.isActived = false
             asyncCallback = redirectTo(value)
             break
           case 'switchTab':
-            this.isActived = false
             asyncCallback = switchTab(value)
             break
           case 'reLaunch':
-            this.isActived = false
             asyncCallback = reLaunch(value)
             break
           case 'getLocation':
@@ -110,45 +134,19 @@
             break
         }
         asyncCallback && asyncCallback.then((res) => {
-          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+          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) => {
-          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
             type: data.type,
             callbackId: data.callbackId,
             error
           }, event.origin)
         })
-      })
-    },
-    activated () {
-      this.isActived = true
-      this.isPostMessage = false
-    },
-    deactivated () {
-      if (!this.isPostMessage) {
-        return
-      }
-      let data = {
-        type: 'message',
-        data: this.messageList
-      }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
-    },
-    destroyed () {
-      if (!this.isPostMessage) {
-        return
-      }
-      let data = {
-        type: 'message',
-        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) {

diff --git a/packages/webpack-plugin/lib/style-compiler/index.js b/packages/webpack-plugin/lib/style-compiler/index.js
@@ -89,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 }`
         }
 

diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.54",
+  "version": "2.8.56",
   "description": "mpx compile core",
   "keywords": [
     "mpx"

diff --git a/packages/webview-bridge/README.md b/packages/webview-bridge/README.md
@@ -1,3 +1,81 @@
 # @mpxjs/webview-bridge
 
-为跨小程序平台提供通用的webview-bridge
+> 为跨小程序平台提供通用的webview-bridge
+
+## Usage
+
+抹平了各端JSSDK方法调用逻辑，统一挂载在webviewBridge对象上提供调用
+
+```js
+import webviewBridge from '@mpxjs/webview-bridge'
+const { navigateBack, postMessage } = webviewBridge
+postMessage({
+  data: 'test',
+  success (res) {
+    console.log('postmessage成功回调, 结果：', res)
+  }
+})
+navigateBack()
+```
+
+### 各端支持情况说明
+- **微信小程序：**
+
+    提供可调用方法参考微信web-view组件 JSSDK提供能力
+
+    [jssdk接口1](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html) 提供的方法直接调用即可(参考Usage示例)
+
+    [jssdk接口2](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html) 提供的方法需要传入config配置后再调用，webview-bridge提供了对应的config方法，该方法只在微信小程序环境下生效，使用示例如下：
+    ```js
+    import webviewBridge from '@mpxjs/webview-bridge'
+    // 具体传入配置参考微信说明
+    webviewBridge.config({
+      debug: true,
+      appId: '',
+      timestamp: '',
+      nonceStr: '',
+      signature: '',
+      jsApiList: []
+    })
+    // wx.ready在框架内部抹平，直接调用方法即可
+    webviewBridge.updateAppMessageShareData({ 
+      title: '',
+      desc: '',
+      link: '',
+      imgUrl: '',
+      success: function () {
+      }
+    })
+    ```
+- **支付宝、百度、QQ、抖音小程序：**
+
+    支持各小程序web-view组件 JSSDK提供的方法，直接调用webviewBridge上挂载的对应方法即可(参考Usage示例)
+
+    ::: warning
+    各小程序接口1以外的方法提供的不尽相同，在支持多小程序运行的h5调用中，建议调用非通用的方法时，增加判空的容错处理
+    :::
+
+ - **webapp：** 
+
+    微信[jssdk接口1](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html) 提供的方法可以直接调用webviewBridge上挂载的对应方法(参考Usage示例)
+
+    微信[jssdk接口2](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html) 提供的方法目前只支持getLocation方法的调用
+
+     - **getLocation方法使用介绍：** 
+
+        小程序转webapp的项目本身没有getLocation的能力，需要在webapp属主中增加getLocation的方法挂载，挂载示例如下：
+
+        ```js
+           // webapp app.web.js
+            ...
+            mpx.config.webviewConfig = {
+                // 必须在webapp进行挂载否则h5中调用不到getLocation的返回
+                apiImplementations: {
+                    getLocation () {
+                        // 提供一个异步的方法
+                    }
+                }
+            }
+            ...
+        ```
+
diff --git a/packages/webview-bridge/package.json b/packages/webview-bridge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webview-bridge",
-  "version": "2.8.53",
+  "version": "2.8.56",
   "description": "a bridge for mpx webview",
   "author": "skyadmin",
   "license": "ISC",