美文网首页
小程序onShareAppMessage

小程序onShareAppMessage

作者: 弗念腾 | 来源:发表于2020-01-07 20:25 被阅读0次

    1、onShareAppMessage:监听用户点击右上角菜单的「转发」按钮时触发的事件

    2、添加分享按钮及右上角的分享按钮,文字及图片内容更改,时两个转发出去的内容一样

    示例
    1、小程序转发的入口,为图片中的1,2 两个位置


    微信图片_20200116154818.jpg 微信图片_20200116154826.jpg
    /**
       * 用户点击右上角分享 .js文件
       */
      onShareAppMessage: function (res) {
    //转发事件来源:button:页面内转发按钮;menu:右上角转发菜单
        if (res.from === 'button') {
          console.log("来自页面内转发按钮");
          console.log(res.target);
        }
        else {
          console.log("来自右上角转发菜单")
        }
        return {
          title: '标题',
          imageUrl: "/resources/images/role/share.jpg",//转发携带的图片,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG
          path:"/pages/index/index",//当前页面 path ,必须是以 / 开头的完整路径
          success: (res) => {
            console.log("转发成功", res);
          },
          fail: (res) => {
            console.log("转发失败", res);
          }
        }
      },
    //.wxml文件
    <view class="share-box">
        <button class="share-btn" open-type="share">
          <image src="/resources/images/index/share.png" class="share-img"></image>
        </button>
      </view>
    
    
    //.wxss文件
    .share-box{
      position: fixed;
      top:12%;
      right: 6%;
    }
    .share-btn{
      width: 120rpx;
      height: 120rpx;  
      border-radius: 50%;
      background: transparent;
      border: red;
      box-shadow: 0 0 25rpx #F81945;
      
    }
    .share-img{
      width: 120rpx;
      height: 120rpx;
    }
    button{
      border: 0;
      padding: 0;
      margin: 0;
    }
    
    
    

    相关文章

      网友评论

          本文标题:小程序onShareAppMessage

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