fix(ssr): canvas、webview

packages/playground/ssr/src/pages/index/index.vue

 <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 -->

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

packages/uni-h5/src/view/components/web-view/index.tsx

-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> */}
         </>
       )
     }