From 970b68308e69534187f6a6e8fe0d5cc1b1b1be5f Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Tue, 22 Jun 2021 11:41:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(ssr):=20canvas=E3=80=81webview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../playground/ssr/src/pages/index/index.vue  |  8 ++--
 .../src/components/canvas/index.tsx           |  4 +-
 .../src/view/components/web-view/index.tsx    | 42 ++++++++++++++++---
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/playground/ssr/src/pages/index/index.vue b/packages/playground/ssr/src/pages/index/index.vue
index 7385c48b32..ee8f87b149 100644
--- a/packages/playground/ssr/src/pages/index/index.vue
+++ b/packages/playground/ssr/src/pages/index/index.vue
@@ -1,13 +1,13 @@
 <template>
-  <text v-if="item">{{ item.title }}</text>
+  <!-- <text v-if="item">{{ item.title }}</text>
   <text v-else>...</text>
   <ssr-cover-image />
   <ssr-cover-view />
   <ssr-icon />
-  <ssr-image />
+  <ssr-image /> -->
   <!-- <ssr-match-media /> -->
   <!-- <ssr-movable-area /> -->
-  <ssr-progress />
+  <!-- <ssr-progress />
   <ssr-scroll-view />
   <ssr-swiper />
   <ssr-text />
@@ -23,7 +23,7 @@
   <ssr-slider />
   <ssr-map />
   <ssr-picker-view />
-  <ssr-picker />
+  <ssr-picker /> -->
   <ssr-webview />
 
   <!-- <ssr-video /> dataOptions is not a function -->
diff --git a/packages/uni-components/src/components/canvas/index.tsx b/packages/uni-components/src/components/canvas/index.tsx
index e31031568a..c652911385 100644
--- a/packages/uni-components/src/components/canvas/index.tsx
+++ b/packages/uni-components/src/components/canvas/index.tsx
@@ -19,7 +19,9 @@ import { useNativeEvent, NativeEventTrigger } from '../../helpers/useEvent'
 import { pixelRatio, wrapper, initHidpi } from '../../helpers/hidpi'
 import { once } from '@dcloudio/uni-shared'
 
-const initHidpiOnce = /*#__PURE__*/ once(initHidpi)
+const initHidpiOnce = /*#__PURE__*/ once(() => {
+  return __NODE_JS__ ? onMounted(initHidpi) : initHidpi()
+})
 
 function $getRealPath(src: string) {
   return src ? getRealPath(src) : src
diff --git a/packages/uni-h5/src/view/components/web-view/index.tsx b/packages/uni-h5/src/view/components/web-view/index.tsx
index cdd3b46d73..43b57d691b 100644
--- a/packages/uni-h5/src/view/components/web-view/index.tsx
+++ b/packages/uni-h5/src/view/components/web-view/index.tsx
@@ -1,4 +1,12 @@
-import { ref, onMounted, Ref, onActivated, onDeactivated, Teleport } from 'vue'
+import {
+  ref,
+  onMounted,
+  Ref,
+  onActivated,
+  onDeactivated,
+  watchEffect,
+  onBeforeUnmount,
+} from 'vue'
 import {
   defineBuiltInComponent,
   ResizeSensor,
@@ -25,15 +33,34 @@ export default /*#__PURE__*/ defineBuiltInComponent({
   inheritAttrs: false,
   name: 'WebView',
   props,
-  setup(props, { attrs }) {
+  setup(props) {
     Invoke()
     const rootRef: RootRef = ref(null)
     const iframeRef: RootRef = ref(null)
-    const _resize = useWebViewSize(rootRef, iframeRef)
     const { $attrs, $excludeAttrs, $listeners } = useAttrs({
       excludeListeners: true,
     })
+    let _resize: Function
 
+    const renderIframe = () => {
+      const iframe = document.createElement('iframe')
+      watchEffect(() => {
+        for (const key in $attrs.value) {
+          if (Object.prototype.hasOwnProperty.call($attrs.value, key)) {
+            const attr = ($attrs.value as any)[key]
+            ;(iframe as any)[key] = attr
+          }
+        }
+      })
+      watchEffect(() => {
+        iframe.src = getRealPath(props.src)
+      })
+      document.body.appendChild(iframe)
+      iframeRef.value = iframe
+      _resize = useWebViewSize(rootRef, iframeRef)
+    }
+
+    __NODE_JS__ ? onMounted(renderIframe) : renderIframe()
     onMounted(() => {
       _resize()
     })
@@ -46,6 +73,10 @@ export default /*#__PURE__*/ defineBuiltInComponent({
       iframeRef.value && (iframeRef.value.style.display = 'none')
     })
 
+    onBeforeUnmount(() => {
+      document.body.removeChild(iframeRef.value!)
+    })
+
     return () => {
       return (
         <>
@@ -58,13 +89,14 @@ export default /*#__PURE__*/ defineBuiltInComponent({
             <ResizeSensor onResize={_resize} />
           </uni-web-view>
 
-          <Teleport to="body">
+          {/* TODO 等待teleport组件支持ssr */}
+          {/* <Teleport to="body">
             <iframe
               ref={iframeRef}
               src={getRealPath(props.src)}
               {...$attrs.value}
             ></iframe>
-          </Teleport>
+          </Teleport> */}
         </>
       )
     }
-- 
GitLab