搜索
您的当前位置:首页正文

微信小程序点击icon实现分享功能

来源:欧得旅游网


本文是想点击一个icon触发实现分享功能

1.小程序分享功能实现方式

小程序分享功能有两种方式,监听用户点击页面内转发按钮( 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。
使用微信小程序的分享功能需要定义onShareAppMessage(Object object)函数,存在该函数分享功能才能被触发
如下:

2.定义触发分享功能的icon按钮

注意设置open-type="share"用于触发分享功能

<button class="iconfont icon-yaoqing" style="font-size:65rpx;width:100%" open-type="share"></button>

效果查看

/* button自带样式清除 */
.student-orther-icon button::after {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.student-orther-icon button {
  background-color: transparent !important;
  padding: 0 !important;
  line-height: inherit !important;
  margin: 0 !important;
  width: auto !important;
  font-weight: 500 !important;
  border-radius: none !important;
}

效果如下

3.onShareAppMessage实现分享

  //分享功能
  onShareAppMessage(res){
    //判断触发的方式是否为按钮
    if(res.from=="button"){
      //参数
      let uid = "111";
      return{
        title:"标题",
        path:"/pages/dynamic/dynamic?uid="+uid
      }
    }
  }

效果如下

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top