微信小程序-点击摁钮触发转发功能及onShareAppMessage(options)用法剖析

╰+攻爆jí腚メ 2023-07-17 12:47 17阅读 0赞

需求：通过点击微信图标，转发到微信；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70][]

实现：  
      通过给button组件设置open-type=“share” 属性（注：必须是button组件，其他组件中设置 open-type=“share” 无效）

可以在用户点击按钮之后触发 js里面的onShareAppMessage() 事件，如果当前页面没有定义此事件，则点击后无效果。

onShareAppMessage(options) {
        console.log("options=",options);
        var that = this;
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
          title: "转发的标题", // 默认是小程序的名称(可以写slogan等)
          path: '/pages/share/share', // 默认是当前页面，必须是以‘/'开头的完整路径
          imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
          success: function(res) {
            // 转发成功之后的回调
            if (res.errMsg == 'shareAppMessage:ok') {}
          },
          fail: function() {
            // 转发失败之后的回调
            if (res.errMsg == 'shareAppMessage:fail cancel') {
              // 用户取消转发
            } else if (res.errMsg == 'shareAppMessage:fail') {
              // 转发失败，其中 detail message 为详细失败信息
            }
          },
          complete:function(){
              // 转发结束之后的回调（转发成不成功都会执行）
          },
        };
        // 来自页面内的按钮的转发
        if (options.from == 'button') {
          var eData = options.target.dataset;
          console.log("options.target.dataset=",eData.name); // shareBtn
          // 此处可以修改 shareObj 中的内容
          shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name;
        }
        // 返回shareObj
        return shareObj;
      }

控制台打印：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 1][]

产品展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 2][]

--------------------

### 推荐阅读： ###

*   [onShareAppMessage转发gif图Android上不展示问题][onShareAppMessage_gif_Android]

--------------------

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70]: /images/20230528/05dcbe2989494fb99d372ea270849bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 1]: /images/20230528/d27e2191420444fc9423584ad19e9c41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 2]: /images/20230528/ae4ccf87ce634652855ab7321bf6c1d5.png
[onShareAppMessage_gif_Android]: https://blog.csdn.net/weixin_43970743/article/details/105582800