uni-app H5指定链接分享在非该链接界面无效

开发环境	版本号	项目创建方式
Mac	Mac OS 12.2.1	HBuilderX

### 操作步骤：
1. 点击二级界面分享
2. 分享到朋友圈或微信好友
3. 从分享结果进入

### 预期结果：
从分享结果进入，预期是想进去到首页index

### 实际结果：
从分享结果进入，实际上进去的是二级界面protocol

### bug描述：
情景：
使用JSSDK做H5分享，在需要分享的界面指定统一分享链接分享，问题就出在从二级界面做分享操作

问题：
二级界面分享成功后，并不是跳转指定分享链接多对应的界面，而是当前二级界面
原本想要分享链接为：
https://hengchiad.evergrandeauto.com/20220428/h5/index.html#/?kind=1&hmsr=xianshang
二级界面分享后的链接变成：
https://hengchiad.evergrandeauto.com/20220428/h5/index.html#/pages/protocol
比对二者发现：
1）所带参数kind和hmsr都被抹掉
2）链接后面被拼接界面路径：pages/protocol，从而导致跳转当前二级界面
注：附件是完整代码

wuwangju 1楼•1 个月前

在 uni-app 中，如果你想在 H5 页面中实现指定链接的分享功能，并且希望该功能仅在特定页面有效，可以通过以下步骤来实现。

1. 使用 `uni.share` API

uni-app 提供了 uni.share API 来实现分享功能。你可以在特定页面中调用该 API 来分享指定的链接。

2. 在特定页面中实现分享功能

你可以在特定页面的 onLoad 或 onShow 生命周期中调用 uni.share 方法，并指定分享的链接。

export default {
  onLoad() {
    // 在页面加载时设置分享内容
    this.setShareInfo();
  },
  methods: {
    setShareInfo() {
      uni.share({
        provider: 'weixin', // 分享服务提供商，如微信、QQ等
        type: 0, // 分享类型，0为图文链接
        title: '分享标题', // 分享标题
        summary: '分享描述', // 分享描述
        href: 'https://www.example.com/specific-page', // 分享的链接
        imageUrl: 'https://www.example.com/image.png', // 分享的图片
        success: function (res) {
          console.log('分享成功', res);
        },
        fail: function (err) {
          console.log('分享失败', err);
        }
      });
    }
  }
};

3. 在非指定页面禁用分享功能

如果你希望分享功能仅在特定页面有效，可以在其他页面中不调用 uni.share 方法，或者通过条件判断来禁用分享功能。

export default {
  onLoad() {
    // 判断当前页面是否为指定页面
    if (this.$route.path !== '/specific-page') {
      // 如果不是指定页面，不设置分享信息
      return;
    }
    // 在指定页面中设置分享内容
    this.setShareInfo();
  },
  methods: {
    setShareInfo() {
      uni.share({
        provider: 'weixin',
        type: 0,
        title: '分享标题',
        summary: '分享描述',
        href: 'https://www.example.com/specific-page',
        imageUrl: 'https://www.example.com/image.png',
        success: function (res) {
          console.log('分享成功', res);
        },
        fail: function (err) {
          console.log('分享失败', err);
        }
      });
    }
  }
};

4. 使用 `uni.onShareAppMessage` 监听分享事件

如果你使用的是微信小程序或 H5 页面，可以通过 uni.onShareAppMessage 来监听分享事件，并在特定页面中返回分享内容。

export default {
  onLoad() {
    // 监听分享事件
    uni.onShareAppMessage(() => {
      return {
        title: '分享标题',
        path: '/specific-page', // 分享的路径
        imageUrl: 'https://www.example.com/image.png', // 分享的图片
        success: function (res) {
          console.log('分享成功', res);
        },
        fail: function (err) {
          console.log('分享失败', err);
        }
      };
    });
  }
};

5. 在非指定页面中禁用分享

如果你希望在其他页面中禁用分享功能，可以在这些页面中不设置 uni.onShareAppMessage 监听器，或者返回空的分享内容。

export default {
  onLoad() {
    // 判断当前页面是否为指定页面
    if (this.$route.path !== '/specific-page') {
      // 如果不是指定页面，不设置分享信息
      return;
    }
    // 在指定页面中监听分享事件
    uni.onShareAppMessage(() => {
      return {
        title: '分享标题',
        path: '/specific-page',
        imageUrl: 'https://www.example.com/image.png',
        success: function (res) {
          console.log('分享成功', res);
        },
        fail: function (err) {
          console.log('分享失败', err);
        }
      };
    });
  }
};

uni-app H5指定链接分享 在非该链接界面无效