init

xhs-mini-demos/component-case/share-snapshoot/share-snapshoot.css

@@ -0,0 +1,67 @@
+.img {
+  width: 100%;
+  height: 100%;
+}
+
+.view12 {
+  display: none;
+  font-size: larger;
+  background-color: aqua;
+}
+
+.container {
+  font-size: 32rpx;
+}
+
+.share-landing-showcase {
+  width: 100%;
+  margin-top: 10rpx;
+  border: 1rpx solid #ccc;
+  border-radius: 10rpx;
+  display: inline-block;
+  text-align: center;
+}
+
+.code {
+  background-color: #2d2d2d;  /* 深色背景 */
+  color: #f8f8f2;             /* 代码文本颜色 */
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;       /* 保持换行 */
+  overflow-x: auto;            /* 水平滚动条 */
+}
+
+.code-placeholader {
+  width: 22rpx;
+  display: inline-block;
+}
+
+.share-landing-showcase-image {
+  width: 50%;
+}
+
+.title {
+  font-weight: bold;
+  font-size: 26rpx;
+  color: #333;
+  margin-top: 20rpx;
+}
+
+.share-desc {
+  font-size: 28rpx;
+  color: var(--xhs-theme-color);
+  font-weight: bold;
+  font-style: italic;
+  margin-top: 20rpx;
+}
+
+.share-resp {
+  border: 1px solid rgab(0, 0, 0, 0.1);
+  background: #f2f2f2;
+  font-style: italic;
+  font-size: 24rpx;
+  padding: 10px;
+  color: rgba(0, 0, 0, 0.55);
+  min-height: 200rpx;
+}

xhs-mini-demos/component-case/share-snapshoot/share-snapshoot.js

@@ -0,0 +1,55 @@
+Page({
+  data: {
+    onShareAppMessageResult: null,
+    onShareChatResult: null,
+    onShareTimelineResult: null,
+    onCopyUrlResult: null
+  },
+  onShareLandingClick() {
+    xhs.previewImage({
+      current: "https://picasso-static.xiaohongshu.com/fe-platform/a2f1eca7501ff9abe939ef17964315d07cb7123e.png",
+      urls: ["https://picasso-static.xiaohongshu.com/fe-platform/a2f1eca7501ff9abe939ef17964315d07cb7123e.png"],
+    });
+  },
+  onShareAppMessage(args) {
+    return {
+      title: '测试转发',
+      path: 'component-case/share-snapshoot/share-snapshoot?id=123',
+      content: 'onShareAppMessage 默认 content'
+    };
+  },
+  onShareChat(args) {
+    return {
+      title: 'onShareChat h5 转发测试: ' + args.from,
+      path: 'component-case/share-snapshoot/share-snapshoot',
+      query: 'a=1&b=2&c=3',
+      externalImageUrl: 'https://picasso-static.xiaohongshu.com/fe-platform/a2f1eca7501ff9abe939ef17964315d07cb7123e.png',
+      success() {
+        xhs.showToast({
+          title: 'onShareChat 开发者回调，分享成功！',
+        });
+      },
+      fail() {
+        xhs.showToast({
+          title: 'onShareChat 开发者回调，分享失败！！',
+        });
+      }
+    };
+  },
+  onCopyUrl() {
+    return {
+      query: 'a=1&b=2&c=3',
+      externalImageUrl: 'https://picasso-static.xiaohongshu.com/fe-platform/a2f1eca7501ff9abe939ef17964315d07cb7123e.png',
+      success() {
+        xhs.showToast({
+          title: 'onCopyUrl 开发者回调，分享成功！',
+        });
+      },
+      fail() {
+        xhs.showToast({
+          title: 'onCopyUrl 开发者回调，分享失败！！',
+        });
+      }
+    };
+  },
+});

xhs-mini-demos/component-case/share-snapshoot/share-snapshoot.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "站外分享(截屏能力)演示",
+  "usingComponents": {
+    "showbox": "../../common/component/showbox/index",
+    "box": "../../common/component/container/index"
+  }
+}

xhs-mini-demos/component-case/share-snapshoot/share-snapshoot.xhsml

@@ -0,0 +1,43 @@
+<view class="container">
+  <showbox title="分享快照，将对当前分享页生成截屏图片(比例5:7)">
+    <box class="box">
+      <view class="title">站外分享页样式(带截屏)</view>
+      <view class="share-landing-showcase">
+        <image 
+          bindtap="onShareLandingClick"
+          src="https://picasso-static.xiaohongshu.com/fe-platform/a2f1eca7501ff9abe939ef17964315d07cb7123e.png" 
+          class="share-landing-showcase-image" mode="aspectFit"></image>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="当前页面配置了【onShareAppMessage】【onShareChat】【onCopyUrl】">
+
+    <box class="box">
+      <view>
+        <view class="title">打开「胶囊按钮」，点击「复制链接」，「站外分享中间面」将展示配置的页面</view>
+        <view class="share-desc">
+          [onCopyUrl] 配置如下：
+        </view>
+        <view class="code">{</view>
+        <view class="code"><view class="code-placeholader"></view>"query": "a=1&b=2&c=3",</view>
+        <view class="code"><view class="code-placeholader"></view>"externalImageUrl": "https://test.png"</view>
+        <view class="code">}</view>
+      </view>
+    </box>
+
+    <box class="box">
+      <view>
+        <view class="title">打开「胶囊按钮」，点击「微信-私信分享」，「站外分享中间面」将使用当前页面的截屏（系统会自动截图）</view>
+        <view class="share-desc">
+          [onShareChat] 配置如下：
+        </view>
+        <view class="code">{</view>
+        <view class="code"><view class="code-placeholader"></view>"title": "onShareChat h5 转发测试: " + args.from,</view>
+        <view class="code"><view class="code-placeholader"></view>"path": "mponent-case/share-snapshoot/share-snapshoot",</view>
+        <view class="code"><view class="code-placeholader"></view>"query": "a=1&b=2&c=3"</view>
+        <view class="code">}</view>
+      </view>
+    </box>
+  </showbox>
+</view>