uniapp小程序分享uni.share给好友
用uniapp写这个功能的时候最重要的点是:要把写在一个上,否则不生效。
·
用uniapp写这个功能的时候最重要的点是:要把uni.share写在一个button按钮上,否则不生效。
分享给好友(示例图片)
代码实现
html代码
<view class="content">
<image @click="share" class="rightimg" src="" mode="widthFix">
</image>
<view class="shuzi"></view>
<button class="button" open-type="share" @click="shareFriends">分享</button>
</view>
js代码
shareFriends() {
uni.share({
provider: 'weixin', //分享服务提供商(即weixin|qq|sinaweibo)
scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
type: 5,
title: '分享标题',
summary: "分享描述",
href: 'www.baidu.com', //分享跳转地址
imageUrl: '../static/lovehot.png', //分享图片路径(必须是线上可访问图片)
miniProgram: {
id: 'gh_c6a0acadf951 ',
path: 'pages/index/index',
type: 0,
webUrl: 'http://uniapp.dcloud.io'
},
success: function(res) {
// console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
// console.log("fail:" + JSON.stringify(err));
}
})
},
css代码
.content {
font-size: 20rpx;
position: relative;
.shuzi {
width: 100%;
height: 50rpx;
}
.rightimg {
width: 50rpx; //小图标
height: 50rpx;
margin-top: 50rpx;
}
.button {
background: rgba(0, 0, 0, 0); //按钮 //背景颜色透明
font-size: 20rpx;
position: absolute;
color: #ffffff;
left: -50rpx;
top: 55rpx;
width: 140rpx;
height: 100rpx;
line-height: 130rpx;
}
button::after {
border: none; //取消按钮边框
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)