微信小程序分享转发功能(带参数)

最新推荐文章于 2024-12-04 10:37:16 发布

林中明月间。

最新推荐文章于 2024-12-04 10:37:16 发布

阅读量2.1k

点赞数

分类专栏：微信小程序

原文链接：https://www.jb51.net/article/160170.htm

版权

微信小程序专栏收录该内容

67 篇文章

订阅专栏

最简单的：https://blog.csdn.net/onion_line/article/details/83036502

https://www.jianshu.com/p/266545660eef 微信小程序生成分享海报（附带二维码生成）

https://www.jb51.net/article/160170.htm

https://www.jianshu.com/p/709acb84448b 小程序微信小程序分享成功失败回调

<!-- 分享弹窗 -->
<view class='lay-box share-bottom {{!share ? "on" : ""}}'>
  <view class='top'>
    <button open-type='share'>发送给朋友</button> <!--自带-->
    <button bindtap='DrawImg'>分享到朋友圈</button> <!---生成海报--->
  </view>
  <button bindtap='CancelShare'>取消</button>
</view>

js:
// 绘制图片
  DrawImg() {
    wx.showLoading({
      title: '海报生成中...'
    });
    const _this = this;
    // let path = null;  //获取商品图片
    // var qrcode = this.data.data.qrcode;        //获取二维码
    const context = wx.createCanvasContext('mycanvas');
    var title = this.data.data.info.title;
    var linnoe = title.substring(0, 16);
    var lintwo = title.substring(16, 30);
    wx.downloadFile({
      url: this.data.data.item_img[0][0],
      success: function (res) {
        if (res.statusCode === 200) {
          _this.data.pathImg = res.tempFilePath;
          context.setFillStyle('white')
          context.fillRect(0, 0, 542, 977)
          context.drawImage(_this.data.pathImg, 0, 0, 271, 271)
          context.setTextAlign('center')    // 文字居中
          context.setFillStyle('#000000')  // 文字颜色：黑色
          context.setFontSize(14)         // 文字字号
          // context.setTextAlign('center')
          context.fillText(linnoe, 132, 320)
          if (String(lintwo).length != 0) {
            context.fillText(lintwo + '...', (_this.data.qrwidth / 2), 343)
          }
          // context.fillText(lintwo + '...', 132, 348)
          context.setTextAlign('left')    // 文字居中
          context.setFillStyle('#ff0000')
          context.fillText("￥", 20, _this.data.qrheight)
          context.setFontSize(22);
          context.fillText(_this.data.p_min, 32, _this.data.qrheight)
          wx.downloadFile({
            url: _this.data.data.qrcode,
            success: function (res) {
              if (res.statusCode === 200) {
                console.log(_this.data.data.qrcode);
                _this.data.qrcode = res.tempFilePath;
                context.drawImage(_this.data.qrcode, _this.data.qrwidth - 96, _this.data.qrheight - 55, 80, 80)
                context.stroke()
                context.draw()
                
                setTimeout(function () {
                  wx.canvasToTempFilePath({
                    canvasId: 'mycanvas',
                    success: function (res) {
                      // console.log(res.tempFilePath)
                      _this.setData({
                        imagePath: res.tempFilePath
                      })
                      _this.setData({
                        share: !_this.data.share,  //显示隐藏分享弹窗
                        mask: false,  //显示隐藏遮罩层
                        Poster: !_this.data.Poster
                      })
                      wx.hideLoading()
                    }
                  })
                }, 2000)
              }
            }
          })
        }
      }
    })
  },

  // 保存海报
  storage() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.imagePath,
      success(res) {
        wx.showToast({
          title: '保存成功！',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },


  //取消分享弹窗
  CancelShare() {
    this.setData({
      share: !this.data.share,  //显示隐藏分享弹窗
      mask: !this.data.mask, //显示隐藏遮罩层
    })
  },

微信客户端6.7.2版本以上版本不再支持分享回调参数 success 、fail 、complete，微信官方

/**
   * 用户点击小程序自带转发(不加入参数) 无 options.from == 'button'
    分享代码只能写在想分享的页面
   */
  onShareAppMessage: function(options) {
    var shareObj = {
      title: '哈根达斯冰激凌5折特惠',// 默认是小程序的名称(可以写slogan等)
      path: '/pages/index/index',// 默认是当前页面，必须是以‘/'开头的完整路径
      imageUrl: 'http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg',
       //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。
       //支持PNG及JPG。显示图片长宽比是 5:4。
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          console.log('转发成功')
        }
        var shareTickets = res.shareTickets,
          shareTicket = shareTickets;
        wx.getShareInfo({
          shareTicket: shareTicket,
          success: function (res) {
            wx.showToast({
              title: '转发成功',
              duration: 3000
            })

          },
          fail: function (res) {
            wx.showToast({
              title: 'fail:' + res.errMsg,
              duration: 3000
            })
          }
        });
        wx.showShareMenu({
          // 要求小程序返回分享目标信息
          withShareTicket: true
        });
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
          console.log('用户取消转发')
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
          console.log('转发失败')
        }
      },
    }
    return shareObj;
  }


 //用户点击小程序自带转发 (加入参数)
  onShareAppMessage: function (options) {
    let users = wx.getStorageSync('user');
    var shareObj = {
      title: '转发',
      path: '/pages/index/index?from_uid=' + users.id,
      imageUrl: 'http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg',
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          console.log('转发成功')
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
          console.log('用户取消转发')
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
          console.log('转发失败')
        }
      },
    }
    return shareObj;
  }

第二种分享,用户自定义按钮 <button data-name="shareBtn" open-type="share">转发</button>

这个分享必须做成button 且加上 open-type="share"

不加入参数

onShareAppMessage: function (options) {
    var shareObj = {
      title: '哈根达斯冰激凌5折特惠', // 默认是小程序的名称(可以写slogan等)
      path: '/pages/index/index', // 默认是当前页面，必须是以‘/'开头的完整路径
      imageUrl: 'http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg',
       //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。
       //支持PNG及JPG。显示图片长宽比是 5:4。
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          console.log('转发成功')
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
          console.log('用户取消转发')
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
          console.log('转发失败')
        }
      },
    }
    if (options.from == 'button') {
      console.log(options);   // shareBtn
    }
    return shareObj;
  }

加入参数 :

onShareAppMessage: function (options) {
    let users = wx.getStorageSync('user');
    var shareObj = {
      title: '哈根达斯冰激凌5折特惠',
      path: '/pages/index/index?goods_id=' + wx.getStorageSync("goods_id"),
      imageUrl: 'http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg',
       //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。
       //支持PNG及JPG。显示图片长宽比是 5:4。
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          console.log('转发成功')
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
          console.log('用户取消转发')
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
          console.log('转发失败')
        }
      },
    }
    if (options.from == 'button') {
      var eData = options.target.dataset;
      console.log(options);   // shareBtn
      // 此处可以修改 shareObj 中的内容
      shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name;
    }
    return shareObj;
  }

// 来自页面内的按钮的转发
    if (options.from == 'button') {
      var eData = options.target.dataset;
      console.log(eData.name);   // shareBtn
      // 此处可以修改 shareObj 中的内容
      shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name;
    }

提醒：

这里转发的参数要在onLoad 的options 运用