微信 小程序组件 分享按钮

//wxml

<view class='nav-right' bindtap='tobackShop'>

<button open-type="share" class='nav-right' style='background:#fff'>

<view>

<image src='../../imgs/index/tab_3.png'></image>

</view>

<text>分享</text>

</button>

</view>

 

 

//css

.nav-left,.nav-right{

text-align: center;

}

.nav-left,.nav-right{

text-align: center;

}

.nav-left>view,.nav-right>view{

width: 45rpx;

height: 45rpx;

margin: 0 auto;

margin-top: 15rpx;

}

.nav-left>view image, .nav-right>view image{

width: 100%;

height: 100%;

vertical-align: top;

}

.nav-left text,.nav-right text{

display: block;

margin-top: -30rpx;

font-size: 20rpx;

}

.nav-right button image{

width: 100%;

height: 100%;

vertical-align: top;

}

.nav-right button text{

display: block;

margin-top: -4rpx;

font-size: 20rpx;

}

.nav-right button::after {

border: 0;

">transparent;

}

 

 

//js

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function (res) {

if (res.from === 'button') {

// 来自页面内转发按钮

// console.log(res.target)

}

return {

// title: '',

path: '/page/detail/detail.js',

success: function (res) {

// 转发成功

},

fail: function (res) {

// 转发失败

}

}

}