美文网首页微信小程序开发总结
微信小程序-页面分享 onShareAppMessage

微信小程序-页面分享 onShareAppMessage

作者: 意外金喜 | 来源:发表于2018-05-16 21:16 被阅读38次

    效果

    image

    js

      let app = getApp();  
      Page({  
      data: {  
      img: "/images/1.jpg"  
      },  
      onLoad() {  
      },  
      showShareMenu() {  
      wx.showShareMenu();  
      console.log("显示了当前页面的转发按钮");  
      },  
      hideShareMenu() {  
      wx.hideShareMenu();  
      console.log("隐藏了当前页面的转发按钮");  
      },  
      onShareAppMessage: (res) => {  
      if (res.from === 'button') {  
      console.log("来自页面内转发按钮");  
      console.log(res.target);  
      }  
      else {  
      console.log("来自右上角转发菜单")  
      }  
      return {  
      title: '妹子图片',  
      path: '/pages/share/share?id=123',  
      imageUrl: "/images/1.jpg",  
      success: (res) => {  
      console.log("转发成功", res);  
      },  
      fail: (res) => {  
      console.log("转发失败", res);  
      }  
      }  
      }  
      })  
    

    html

      <view class="view">  
      <image class="cover-9" src="{{img}}" bindtap="img"></image>  
      <view class="window-1">  
      <button type="default" id="open" bindtap="showShareMenu">开启分享</button>  
      <button type="warn" id="close" bindtap="hideShareMenu">关闭分享</button>  
      </view>  
      <button type="primary" open-type="share" data-name="pageShare" id="share">点击分享</button>    
      </view>  
    

    css

      page{  
      height: 100%;  
      }  
      .view{  
      width: 100%;  
      height: 100%;  
      }  
      .window-1{  
      display: flex;  
      flex-direction: row;  
      margin: 20rpx 0;  
      }  
      .cover-9{  
      width: 688rpx;  
      height: 75%;  
      margin: 0 30rpx;  
      border:2rpx solid;  
      border-radius:5px;    
      }  
      button{  
      margin: 0 10rpx;  
      width: 100%;  
      }  
      #share{  
      width: 730rpx;  
      }
    

    相关文章

      网友评论

        本文标题:微信小程序-页面分享 onShareAppMessage

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