小程序onShareAppMessage

2020-01-07  本文已影响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;
}


上一篇下一篇

猜你喜欢

热点阅读