Taro+Vue3开发微信小程序的分享好友功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了Taro+Vue3开发微信小程序的分享好友功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、背景：使用taro框架和vue3框架开发小程序，实现一个把pdf文件直接分享给微信好友。

一开始看taro文档理解有偏差，导致分享出去的文件是个app的小程序连接。如下图

vue3 微信open-type,小程序,微信小程序,taro,小程序

实现代码如下：

  onShareAppMessage: function () {
    Taro.showShareMenu({
      withShareTicket: true
      // 用户点击右上角分享给好友,要先在分享好友这里设置menus的两个参数,才可以分享朋友圈
      // menus: ['shareAppMessage', 'shareTimeline']  
    });
  },

js:
       <nut-button
          shape="square"
          class="bg-primary button mb-md"
          style="padding: 24rpx 146rpx"
          open-type="share"  // 增加这个属性才能转发
          >分享至微信聊天</nut-button
        >

后续仔细查看taro文档， Taro 文档，发现这种写法是个页面组件，转发出去的是个小程序，无法单独将文件转发。

2、实现文件单独转发给好友：微信小程序下载文件和转发文件给好友总结_海海呐的博客-CSDN博客_小程序分享文件到微信

代码实现：


<nut-button
          shape="square"
          class="bg-primary button mb-md"
          style="padding: 24rpx 146rpx"
          @tap="shareFile"
          :class="{ 'button-disable': isShare }"
          >分享至微信聊天</nut-button
        >

shareFile() {
      if (this.isShare) {
        return false;
      }
      this.isShare = true;
      let that = this;
      const params = {
        startDateId: this.userValue.project.startDateId,
        endDateId: this.userValue.project.endDateId,
        fileType: 'pdf'
      };
      Taro.downloadFile({ // 先进行下载，接口返回后再分享文件
        filePath: Taro.env.USER_DATA_PATH + `/${that.projectName}`,
        url: `${config.serverUrl[getAppEnv()]}/watson/report/generateReport/${
          this.userValue.project.enterpriseId
        }?${queryToString(params)}`,
        header: {
          'content-type': 'application/json',
          cookie: Taro.getStorageSync('cookieKey')
        },
        success(res) {
          if (res.statusCode === 200) {
            that.isShare = false;
            Taro.shareFileMessage({
              filePath: res.filePath,
              fileName: that.projectName,
              fail() {
                showToast('分享失败');
              }
            });
          }
        },
        fail() {
          showToast('分享失败');
        }
      });
    },

效果如下：

vue3 微信open-type,小程序,微信小程序,taro,小程序