@liujitcn/kratos-taro-app-core 0.0.1

package/src/views/pages/webview/webview.scss

@@ -0,0 +1,43 @@
+.webview-container {
+  position: relative;
+  flex: 1;
+  height: 100vh;
+}
+
+.webview-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  text-align: center;
+  background-color: #fff;
+}
+
+.webview-empty__title {
+  font-size: 32px;
+  font-weight: 600;
+  color: #333;
+}
+
+.webview-empty__desc {
+  margin-top: 16px;
+  font-size: 26px;
+  color: #888;
+}
+
+.webview-open-button {
+  position: fixed;
+  right: 24px;
+  bottom: 96px;
+  z-index: 2;
+  width: 240px;
+  height: 72px;
+  line-height: 72px;
+  border-radius: 72px;
+  background-color: #27ba9b;
+  color: #fff;
+  font-size: 26px;
+}

package/src/views/pages/webview/webview.tsx

@@ -0,0 +1,41 @@
+import { Button, Text, View, WebView } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import './webview.scss'
+
+/** 统一外链承载页。 */
+export default function WebViewPage() {
+  const [url, setUrl] = useState('')
+
+  useLoad((query) => {
+    const nextUrl = decodeURIComponent(query?.url || '')
+    const title = decodeURIComponent(query?.title || '')
+    setUrl(nextUrl)
+    if (title) void Taro.setNavigationBarTitle({ title })
+  })
+
+  if (!url) {
+    return (
+      <View className='webview-container'>
+        <View className='webview-empty'>
+          <Text className='webview-empty__title'>链接无法打开</Text>
+          <Text className='webview-empty__desc'>缺少有效链接地址</Text>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View className='webview-container'>
+      <WebView src={url} onMessage={(event) => console.log('收到H5消息:', event.detail)} />
+      {process.env.TARO_ENV === 'h5' ? (
+        <Button
+          className='webview-open-button'
+          onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
+        >
+          新窗口打开
+        </Button>
+      ) : null}
+    </View>
+  )
+}