美文网首页
2020-06-30微信小程序分享和转发事件

2020-06-30微信小程序分享和转发事件

作者: Kason晨 | 来源:发表于2020-06-30 09:45 被阅读0次

    微信小程序“分享、转发”功能
    1、页内自定义分享
    2、页面右上角“…”分享行为

    当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。
    如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。

    1)使用默认页面右上角“…”分享事件

    Page({
      onShareAppMessage: function (res) {
        return {
          title: '这是默认转发',
          path: '/pages/index/index?id=123',
          imageUrl: '****.png'//这个是分享的图片
        }
      }
    })
    
    

    2)当页面上存在自定义“分享”按钮

     <!--index.wxml页面-->
        <button class="share_icon" open-type = "share">
            自定义分享按钮
        </button>
    
    /*index.js*/
    Page({
      onShareAppMessage: function (res) {
        let title,imageUrl;
        if (res.from === 'button') {
          // 来自页面内转发按钮
          title= ‘这个是页面自定义的分享事件~’;
          imageUrl='***.png';
        }
        if(res.from ==='menu'){
          title= ‘这个是页面右上角的分享事件~’;
          imageUrl='***.png';
        }
        return {
          title: title,
          imageUrl: imageUrl,//这个是分享的图片
          path: '/page/user?id=123',
        }
      }
    })
    

    3)当页面上存在多个自定义分享按钮

     <button open-type='share' id="share1">这个第一个分享按钮</button>
        <button open-type='share' id="share2">这个第一个分享按钮</button>
    
    
    /*index.js*/
    Page({
      onShareAppMessage: function (res) {
        let title,imageUrl;
        console.log(res.target);
        if (res.from === 'button' && res.target.id == 'share1') {
          title= ‘这个是页面自定义分享按钮share1的分享事件~’;
          imageUrl='***.png';
        }
        if (res.from === 'button' && res.target.id == 'share2') {
          title= ‘这个是页面自定义分享按钮share2的分享事件~’;
          imageUrl='***.png';
        }
        if(res.from ==='menu'){
          title= ‘这个是页面右上角的分享事件~’;
          imageUrl='***.png';
        }
        return {
          title: title,
          imageUrl: imageUrl,//这个是分享的图片
          path: '/page/user?id=123',
        }
      }
    })
    

    相关文章

      网友评论

          本文标题:2020-06-30微信小程序分享和转发事件

          本文链接:https://www.haomeiwen.com/subject/wmytqktx.html