微信小程序开发总结

微信小程序-页面分享 onShareAppMessage

2018-05-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;  
  }
上一篇下一篇

猜你喜欢

热点阅读