在做uniapp的开发时，需要把一个资讯详情页面，能分享到朋友圈或者微信好友的聊天窗口中；

实现这个功能，用uni.share接口是很方便快捷的；

按文档流程，在微信公众号平台里面注册和申请好应用的信息；

由于需要很多申请，所以我建议，做分享可以留到app上线前再做，因为这些申请很多是其他权限申请的同时就能完成的。

下面是一个分享的组件。

它是用uni-popup组件包裹，然后从底部滑动升起的效果；

<template>
<view>
<view>
<view @click="toWxchat">
<load-img src="/static/images/share/share_wx_chat.svg" :height="84" :width="84" />
<view><text>微信</text></view>
</view>
<view @click="toWxpyq">
<load-img src="/static/images/share/share_wx_pyq.svg" :height="84" :width="84" />
<view><text>朋友圈</text></view>
</view>
<view @click="toCopyurl">
<load-img src="/static/images/share/share_copy_url.svg" :height="84" :width="84" />
<view><text>复制链接</text></view>
</view>
</view>
<view>
<button class="btn-size-small btn" @click="cancel">取消分享</button>
</view>
</view>
</template>

<script>
export default {
name: 'share-wexin',
props: {
shareData: {
type: [Object],
default: {
title: '',
href: '',
summary: '',
imageUrl: ''
}
}
},
emits: ['success', 'fail', 'cancel'],
data() {
return {};
},
methods: {
cancel(e) {
this.$emit('cancel', e);
},
toWxchat() {
let that = this;
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 0,
href: this.shareData.href,
title: this.shareData.title,
summary: this.shareData.summary,
imageUrl: this.shareData.imageUrl,
success: function (res) {
console.log('success:' + JSON.stringify(res));
that.$emit('success', res);
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
that.$emit('fail', res);
}
});
},
toWxpyq() {
let that = this;
uni.share({
provider: 'weixin',
scene: 'WXSceneTimeline',
type: 0,
href: this.shareData.href,
title: this.shareData.title,
summary: this.shareData.summary,
imageUrl: this.shareData.imageUrl,
success: function (res) {
console.log('success:' + JSON.stringify(res));
that.$emit('success', res);
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
that.$emit('fail', res);
}
});
},
toCopyurl(e) {
let that = this;
uni.setClipboardData({
data: this.shareData.href,
success() {
uni.showToast({
title: '复制成功',
icon: 'none'
});
that.$emit('success');
}
});
}
}
};
</script>

<style>
.modal {
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

&_box {
padding: 30px 50px;
display: flex;
justify-content: space-between;

.item {
text-align: center;
}
}

&_action {

.btn{
color: #999;
}
}
}
</style>

把组件用到页面里面：

<!-- 弹出分享底部的窗口 -->
<uni-popup ref="popupShare" type="bottom" border-radius="10px 10px 0 0">
 <share-wexin @success="()=>popupShare.close()" @cancel="()=>popupShare.close()"
   :shareData="detail.wxshare"
 ></share-wexin>
</uni-popup>
<!-- 弹出分享底部的窗口 -->

然后在必要的数据接口里面返回  这个数据格式：

wxshare:{
title: '',
 href: '',
 summary: '',
 imageUrl: ''
}

好了本文内容全部结束，感谢您的阅读，希望能帮助到您。