1

new-soul/miniprogram/pages/link-preview/link-preview.js

@@ -0,0 +1,64 @@
+const app = getApp()
+
+Page({
+  data: {
+    url: '',
+    title: '链接预览',
+    statusBarHeight: 44,
+    navBarHeight: 88,
+    loadError: false,
+  },
+
+  onLoad(options) {
+    const url = decodeURIComponent(options.url || '')
+    const title = options.title ? decodeURIComponent(options.title) : '链接预览'
+    this.setData({
+      url,
+      title,
+      statusBarHeight: app.globalData.statusBarHeight || 44,
+      navBarHeight: app.globalData.navBarHeight || 88,
+    })
+  },
+
+  onWebViewError() {
+    this.setData({ loadError: true })
+    wx.showModal({
+      title: '无法在小程序内打开',
+      content: '该链接无法在小程序内预览，是否复制链接到浏览器打开？',
+      confirmText: '复制链接',
+      cancelText: '返回',
+      success: (res) => {
+        if (res.confirm) {
+          wx.setClipboardData({
+            data: this.data.url,
+            success: () => wx.showToast({ title: '链接已复制，请在浏览器打开', icon: 'none', duration: 2000 }),
+          })
+        } else {
+          this.goBack()
+        }
+      },
+    })
+  },
+
+  goBack() {
+    const pages = getCurrentPages()
+    if (pages.length > 1) {
+      wx.navigateBack()
+    } else {
+      wx.switchTab({ url: '/pages/index/index' })
+    }
+  },
+
+  copyLink() {
+    const url = (this.data.url || '').trim()
+    if (!url) {
+      wx.showToast({ title: '暂无可复制链接', icon: 'none' })
+      return
+    }
+    wx.setClipboardData({
+      data: url,
+      success: () => wx.showToast({ title: '链接已复制', icon: 'none' }),
+    })
+  },
+})
+

new-soul/miniprogram/pages/link-preview/link-preview.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {}
+}
+

new-soul/miniprogram/pages/link-preview/link-preview.wxml

@@ -0,0 +1,34 @@
+<view class="page">
+  <!-- 简单自定义导航栏 -->
+  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
+    <view class="nav-content" style="height: {{navBarHeight - statusBarHeight}}px;">
+      <view class="nav-back" bindtap="goBack">
+        <text class="back-arrow">←</text>
+      </view>
+      <view class="nav-title">
+        <text class="nav-title-text">{{title}}</text>
+      </view>
+      <view class="nav-actions">
+        <view class="copy-btn" bindtap="copyLink">
+          <text class="copy-text">复制链接</text>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="nav-placeholder" style="height: {{navBarHeight}}px;"></view>
+
+  <!-- 链接预览区域 -->
+  <view class="webview-wrap" wx:if="{{url && !loadError}}">
+    <web-view src="{{url}}" binderror="onWebViewError"></web-view>
+  </view>
+  <view class="error-wrap" wx:elif="{{loadError}}">
+    <text class="error-text">该链接无法在小程序内预览</text>
+    <view class="error-btn" bindtap="copyLink">
+      <text class="error-btn-text">复制链接到浏览器打开</text>
+    </view>
+  </view>
+  <view class="empty-wrap" wx:else>
+    <text class="empty-text">暂无链接地址</text>
+  </view>
+</view>
+

new-soul/miniprogram/pages/link-preview/link-preview.wxss

@@ -0,0 +1,107 @@
+.page {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  color: #fff;
+}
+
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #000;
+}
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+}
+
+.nav-back {
+  width: 40rpx;
+  justify-content: center;
+  align-items: center;
+}
+
+.back-arrow {
+  font-size: 32rpx;
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+}
+
+.nav-title-text {
+  font-size: 28rpx;
+  font-weight: 600;
+}
+
+.nav-actions {
+  min-width: 120rpx;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.copy-btn {
+  padding: 6rpx 10rpx;
+  border-radius: 999rpx;
+  border: 1px solid #444;
+}
+
+.copy-text {
+  font-size: 22rpx;
+  color: #ccc;
+}
+
+.nav-placeholder {
+  width: 100%;
+}
+
+.webview-wrap {
+  width: 100%;
+  height: 100%;
+}
+
+web-view {
+  width: 100%;
+  height: 100%;
+}
+
+.empty-wrap {
+  padding: 40rpx;
+  text-align: center;
+  color: #888;
+}
+
+.empty-text {
+  font-size: 26rpx;
+}
+
+.error-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80rpx 40rpx;
+}
+
+.error-text {
+  font-size: 28rpx;
+  color: #999;
+  margin-bottom: 40rpx;
+}
+
+.error-btn {
+  padding: 16rpx 40rpx;
+  border-radius: 999rpx;
+  background: #38bdac;
+}
+
+.error-btn-text {
+  font-size: 26rpx;
+  color: #fff;
+}
+