一、分享给朋友朋友 or 群聊

1.1. 配置开启分享功能

pages.json找到你需要分享的页面，添加配置"enableShareAppMessage": true,

{
  "path": "questionnaire/begin",
  "enableShareAppMessage": true,
  "style": {
    "navigationBarTitleText": "开始答卷",
    "navigationStyle": "custom"
  }
},

1.2. 默认分享功能

• 点击屏幕右上角的...

1.3. 自定义分享按钮

必须设置 open-type="share" ，无需添加点击事件，点击按钮自动唤起，分享功能

data-source="button"可以用来区分分享配置来源

<button open-type="share" class="share-btn" data-source="button">
   分享
</button>

1.4. 分享链接卡片配置

在你的分享页面，添加声明周期onShareAppMessage，和methods同级，用于配置分享链接卡片

option.from === "button"可以区分是按钮分享还是右上角分享

onShareAppMessage(option) {
  let shareConfig = {
    title: "分享的标题",
    path: `/subpackageC/questionnaire/begin?researchCode=${researchCode}`,
    imageUrl: "你的分享封面地址",
    success: (res) => {
      uni.showToast({
        title: "分享成功",
        icon: "success",
      });
    },
    fail: (err) => {
      console.error("分享给朋友失败:", err);
    },
  };
  if (option.from === "button") {
    shareConfig.title = "你的按钮分享标题";
    shareConfig.imageUrl = "你的按钮分享封面地址";
  }
  return shareConfig;
},

二、分享到朋友圈

2.1. 配置开启分享功能

pages.json找到你需要分享的页面，添加配置 "enableShareTimeline": true,

2.2. 分享到朋友圈仅支持右上角分享

2.3. 分享链接卡片配置

在你的分享页面，添加声明周期onShareTimeline，和methods同级，用于配置你的分享链接卡片

onShareTimeline() {
  return {
    title: "分享到朋友圈的标题",
    query: `researchCode=${researchCode}`,
    imageUrl: "分享到朋友圈的封面地址",
    success: (res) => {
      uni.showToast({
        title: "分享成功",
        icon: "success",
      });
    },
    fail: (err) => {
      console.error("分享到朋友圈失败:", err);
    },
  };
},

三、总结

• 右上角分享：通过 onShareAppMessage 配置，无需额外按钮，适合默认分享场景。
• 按钮分享：通过 <button open-type="share"> 触发，可在 onShareAppMessage 中根据来源动态调整参数，适合引导用户分享。
• 朋友圈分享：通过 onShareTimeline 配置，仅支持右上角菜单触发，以链接形式展示。