码迷,mamicode.com
首页 > 微信 > 详细

微信小程序之分享或转发功能(自定义button样式)

时间:2019-01-03 10:48:03      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:col   res   target   xss   sage   turn   png   pos   样式   

小程序页面内发起转发

通过给 button 组件设置属性open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,如果当前页面没有定义此事件,则点击后无效果。相关组件:button

wxml:

<!-- 分享 -->
<!--/pages/detail/detail.wxml--> 
<view class='share'>
  <image src='/images/share.png'></image>
  <text>分享</text>
  <button open-type='share'></button>
</view>

wxss:

.share { 
  height: 120rpx;
  width: 120rpx;
  position: fixed;
  bottom: 170rpx;
  right: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  background: rgba(0, 0, 0, .6);
  border-radius: 50%;
  z-index: 10;
} 
.share image {
  height: 70rpx;
  width: 70rpx;
}
.share text {
  color: #fff;  
}

.share button {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.1;
  z-index: 99;
}

js:

onShareAppMessage(res) {
    let id = wx.getStorageSync('shareId') // 分享产品的Id
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '转发标题',
      path: `pages/detail/detail?id=${id}` // 分享后打开的页面
    }
},

按钮样式如图:

技术分享图片

微信小程序之分享或转发功能(自定义button样式)

标签:col   res   target   xss   sage   turn   png   pos   样式   

原文地址:https://www.cnblogs.com/cckui/p/10212476.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!